How to Add Code Into Your Instrucatable.

Introduction: 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>

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: 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

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...

Be the First to Share

    Recommendations

    • Backyard Contest

      Backyard Contest
    • Silly Hats Speed Challenge

      Silly Hats Speed Challenge
    • Arduino Contest 2020

      Arduino Contest 2020

    3 Discussions

    0
    Maker Saga
    Maker Saga

    3 years ago

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

    0
    StephanS2
    StephanS2

    Reply 3 years ago

    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.