Introduction: How to Add Code Into Your Instrucatable.

Picture of How to Add Code Into Your Instrucatable.

In this instructable I will show you how to add code like this:

<DOCTYPE html>
<html>
  <head>
    <title>A webpage</title>
  </head>
  <body>
    <h1>A webpage</h1>
    <p>Lorem ipsum</p>
  </body>
</html>

Step 1: Using DevTools

Picture of Using DevTools

To add code using devTools, create a temporally (empty) line, press F12, click the Inspector and target the line. Change the "p" to an "pre" and you are done!

Step 2: Via Tempermonkey or Greasemonkey

Picture of Via Tempermonkey or Greasemonkey

If you are using Chrome or Firefox as your browser, you can add the following userscript to add an code button to the WYSIWYG editor.

Userscript:
http://puu.sh/snvFO/372df330d7.txt

Greasemonkey for Firefox:
https://addons.mozilla.org/nl/firefox/addon/grease...

Comments

Maker Saga (author)2017-03-18

The userscript just says "this puush can't be found"

DIY Hacks and How Tos (author)2016-11-19

html is a great way to customize a write up.

I agree with that, the only downside is that the WYSIWYG editor of instructables is really limited to what is can do with it's build in buttons.

About This Instructable

169views

5favorites

License:

More by StephanS2:How to add code into your instrucatable.
Add instructable to: