Experimentation with instructables html editing features that you can't do using the normal tools. An attempt to go further than this instructable.

HTML or "HyperText Markup Language" is a nearly universal language for coding websites. HTML is usually used in conjunction with css style sheets. I doubt we can edit the css on Instructables but there look to be some default ones supported from my experimentation.

I am far from an expert, although I have made a few websites/apps before. This instructable is just some documentation to show what seems to be possible.

Step 1: Boxes

test

<div style="background-color: rgb(255,182,149);"><p>test</p>

Step 2: Boarder

red boarder

<p style="border: 1px solid red">red boarder</p>

Step 3: Using Button Style

New

<a tabindex="" href="/editor" class="button__OztXk buttonPrimary__KqQrQ buttonMedium__ZsQKM "><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="#333"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3a1 1 0 0 1 1 1v7h7a1 1 0 1 1 0 2h-7v7a1 1 0 1 1-2 0v-7H4a1 1 0 1 1 0-2h7V4a1 1 0 0 1 1-1Z"></path></svg><span>New</span></a>

Step 4: Other Button

<button class="button__OztXk buttonSecondary__OfsQ3 buttonMedium__ZsQKM " type="button"><span>Add New Step</span> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em"><path d="M12.216 3v18m-9-9h18"></path></svg></button>

Step 5: Text Color

blue

<div style="color:blue">blue</div>

Step 6: Text Shadow

gray shadow

<p style="text-shadow: 3px 2px gray;">gray shadow</p>

Step 7: Using Random Style

<div class="trigger__Ss6Df"><button class="">css style</button></div>

Step 8: Horizontal Lines

Long Line

<hr><p>Long Line</p>

Step 9: Bad Table :(

This	Is	A
Messed	Up	Table
idk	why	it is

<table>
 <tr>
  <th>This</th>
  <th>Is</th>
  <th>A</th>
 </tr>
 <tr>
  <td>Messed</td>
  <td>Up</td>
  <td>Table</td>
 </tr>
 <tr>
  <td>idk</td>
  <td>why</td>
  <td>it is</td>
 </tr>
</table>

Step 10: Using Instructables Logo

In the body of the text!

<div class="logo-nav"><a class="instructables-logo" href="/"><img src="/assets/img/instructables-logo-2023.svg"></a>

Step 11: Fun Fun

Remember you can also easily do all of the normal things in the toolbar and things like subscripts and heading sizes as shown in the other instructables.

If you find any others please let me know in the comments!

Introduction: Instructables HTML Editor Commands/Code