Instructables Text Formatting

.  This iBle was obsoleted by the introduction of the new editor in early 2010. The information here no longer applies at Instructables.

Step 1: HTML

Direct HTML entry is not supported on Instructables. :(

Use the "WikiFormatting" described in the following steps.

Step 2: Font Styles

Use two single-quotes to start/end italic and three single-quotes to start/end bold:

''italic'''''bold'''

Use five single-quotes and you get bolded italic:

'''''bolded italic'''''

Two tildes start/end strikethrough text:

~~strikethrough~~

A single caret starts/ends ^superscript:

^superscript^

Two commas start/end _subscript.

,,subscript,,

You can combine different modifiers (as above), but you cannot repeat the same modifier to get "extra" effect.

• The exclamation point "!" tells parser to not process the characters which follow it, so pay attention to put a space after !, e.g. when ending bold (see below).

Here are some examples of using the markup for emphasis, as well as "mistakes" when trying to combine modifiers:

  '''!''' can be bold too''', and '''! '''  ''''''bold-bold'''''' ends up being bold-italic with leading/trailing apostrophes  ''''italic-italic'''' ends up being bold with leading/trailing apostrophes  ~~~~strike-strike~~~~ does nothing (strikethrough an empty string at each end)  '''''bold italic'''''  '''''~~bold italic strike~~'''''  __underline__ doesn't work  `monospace` doesn't work either

! can be bold too, and !
'bold-bold' ends up being bold-italic with leading/trailing apostrophes
'italic-italic' ends up being bold with leading/trailing apostrophes
strike-strike does nothing (strikethrough an empty string at each end)
bold italic
bold italic strike
underline doesn't work
`monospace` doesn't work, either

The subscripts and superscripts are useful with mathematical and chemical notation:

  pi^1/2^ * R^3^ = c^4+5^  H,,2,,(SO,,3,,),,4,,^++^

pi^1/2 * R³ = c⁴⁺⁵
H₂(SO₃)₄⁺⁺

  Regular text^super^super-super^back to super^back to regular  Regular text^super,,super-sub,,back to super^back to regular  Regular text^super ''italic'' ~~strike~~ super^ back to regular

Regular text^supersuper-super^{back to super}back to regular (can't nest supers)
Regular text^{super_super-subback to super}back to regular
Regular text^{super italicstrike super} back to regular

1.1 Underlining

There is no underline in IblesFormatting. Zachninme provided this work-around: to ^underline use a combination of strikeout and superscript. Pretty clever, eh?

  Normal text ~~^underlined text^~~ back to normal.  === Here Is~~^Underlined Text^~~ In Heading 3 ===

Normal text ^{underlined text} back to normal.

Here Is ^{Underlined Text} In Heading 3

Step 3: Headings

Headings don't work in the comments, but you can still put them in your instructables. You can create headings by starting a line with up to five equal characters ("=") followed by a single space and the headline text. The line should end with a space followed by the same number of = characters.

  = Heading 1 =    Extra blank line after Heading 1 ... Lorem ipsum dolor sit amet, consectetuer ...  == Heading 2 ==    No blank lines ... Lorem ipsum dolor sit amet, consectetueradipiscing elit. ...  === Heading 3 ===    Extra blank line before Heading 3 ... Lorem ipsum dolor sit amet, consectetuer...  ==== Heading 4 ====    No blank lines ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ...  ===== Heading 5 =====    Extra blank lines before and after Heading 5 ... Lorem ipsum dolor sit amet, ...  === ''other formatting'' ,,codes will,, work,too ===    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vitae justo...

Heading 1

Extra blank line after Heading 1 ... Lorem ipsum dolor sit amet, consectetuer ...

Heading 2

No blank lines ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ...

Heading 3

Extra blank line before Heading 3 ... Lorem ipsum dolor sit amet, consectetuer...

Heading 4

No blank lines ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ...

Heading 5

Extra blank lines before and after Heading 5 ... Lorem ipsum dolor sit amet, ...

other formatting_{codes will} work,too

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vitae justo...

• Notes:

 ==== doesn't work (space at beginning of line) ========But this does (no inner spaces)======== But this does (leading space only)========But this does (trailing space only) ======= Start with 3 and end with 4 ======== Start with 4 and end with 3 ===padding

==== doesn't work (space at beginning of line) ====

But this does (no inner spaces)

But this does (leading space only)

But this does (trailing space only)

Start with 3 and end with 4 =

Start with 4 and end with 3 ===

padding

Step 4: Paragraphs and Line Breaks

A new text paragraph is created whenever two blocks of text are separated by one or more empty lines.

One paragraph is here.A new paragraph starts now.

A forced line break can be inserted with a macro:

  Line 1[[BR]]Line 2

Line 1Line 2

Step 5: Preformatted Text

Blocks containing preformatted text are suitable for source code snippets, notes, and examples (you've seen their effect in the preceding steps!).

Use three curly-braces on lines above and below the text. The curly-braces need to be on separate lines (i.e., you cannot do inline monospace).

 {{{  def HelloWorld():      print "Hello World" }}}

 def HelloWorld():     print "Hello World"

Step 6: Links

Hyperlinks are automatically created for URLs. Links can be given a more descriptive title by writing the link followed by a space and a title and all this inside square brackets.

  https://www.instructables.com/  [https://www.instructables.com/ Instructables Home page]

https://www.instructables.com/
Instructables Home page

URLs must be formatted correctly, according to their technical specification (RFC 3986). In particular, don't use special punctuation characters (such as parentheses, brackets, &, $, *). All of these must be "percent-escaped" using their hexadecimal ASCII codes. For example,

   http://en.wikipedia.org/wiki/Executive_order_(United_States)

is not valid, but

   http://en.wikipedia.org/wiki/Executive_order_%28United_States%29

is.

You may avoid making hyperlinks (i.e., just leave the URL as plain text) by preceding an expression with a single "!" (exclamation mark).

  !https://www.instructables.com/

!https://www.instructables.com/

Step 7: Miscellaneous Formatting

6.1 Horizontal Rule (HR)

Four or more dashes will be replaced by a horizontal line (<HR> in HTML markup)

  -  --  ---  ----  ----------

-
--
---

---

---

6.2 Bullets

Space + asterisk + space = funny line leader and gray text. (Thanks to Zachninme for pointing out that the trailing space is also required.)

 * <-- that thing

• <-- that thing

* works, too (no leading space) *doesn't work (no trailing space) * Other ''formatting'' codes '''are''' allowed

• works, too (no leading space)

*doesn't work (no trailing space)

• Other formatting codes are allowed

6.3 Inserting Literal Brackets

Use numeric entities:

  [ Bracketed text ]

[Bracketed text]

Step 8: Character Entities and Extended Codes

---

Note: The IbleFormatter does not handle character entities well. If you use entities, and go back to re-edit the text, some of them will be "stuck" as embedded special characters, which will subsequently have extra "garbage" characters attached to them.

---

HTML (and the I'bles Formatter) provides named "entities" for a number of characters beyond the normal keyboard (ASCII) set, using strings of the form "&name;". These (the ISO Latin-1 character set) cover primarily the Western European languages with accents and umlauts, and some simple mathematical symbols. The left table, below, shows the ASCII codes, with entity names for a few characters.

The same characters (and even some normal ASCII) are also available using their numerical codes, as "&#code;". All of the ISO Latin-1 characters, with their codes and entity names, are listed in the right-hand table, below.

If you think you've seen this before, you're experiencing déjà vu.

If you think you've seen this before, you're experiencing déjà vu.

_{^{& amp;eacute; - & amp;agrave;}}

To put literal brackets into your text &#91;rather than hyperlinks&#93;, use ASCII codes 91 and 93.

To put literal brackets into your text [rather than hyperlinks], use ASCII codes 91 and 93.

_{^{& amp;#91; - & amp;#93;}}

HTML 4.0 also supports the full Unicode set of characters, with numerical codes greater than 255. These include the non-Latin European alphabets (Greek, Cyrillic, etc.) as well as numerous Asian character sets. For more info, check out these links:

• Unicode Characters as Named and Numeric HTML Entities
• ASCII table.
• Entities for Symbols and Greek Letters (use the "Decimal" column).

Here are some of the codes and what is displayed.

Step 9: Macros

There are only four "macros" supported in the I'bles formatter:

• Line Break
• Timestamp
• Image
  Macro Not Found:

  Image

• Video
  Video

  missing movie url...

The image macro cannot be directly accessed by typing; use the attach image button on the text input.

You can, however, insert videos manually. To insert a video, use two brackets, "Video", insert the URL in parenthesis, after the URL,use one space and put the desired width and height in curly brackets in the form width: XXX, height: XXX, (note that the video will always display the same size, but if you adjust these numbers from the default of 425 by 350 the comment itself will appear larger) " { } ", and close parenthesis and end with two regular brackets.

Like so:

[[ Video(http://www.youtube.com/example video that does not exist {width:425, height:350})] ] (Spaces between brackets left only to show you; they should be omitted in practice)

Video inserted manually:

  [[Timestamp]]  Inserts the current time in Pacific (US) time zone.

Inserts the current time in Pacific (US) time zone.

Step 10: Missing Features, Bugs, and Workarounds

Just for reference, this is the WikiFormatting stuff that doesn't work on Instructables.

• Numbered Lists
• Definition Lists
• Blockquotes
• Discussion Citations
• Tables
• Images (unless you use the "attach image" button)
• Comments
• Colors

---

There are several known bugs (or weird features) with the Instructables formatting.

• As noted in Step 8, non-ASCII characters aren't handled quite right. Literal extended characters put into text (e.g., cut-and-pasted from Word) are published with extraneous nonsense characters. If you insert an entity and re-edit the text, it will be returned to you as a literal, with subsequent nonsense prepended.
• Square brackets used literally (i.e., not for a valid hyperlink) generate a red error box when published.
• Characters placed immediately before a hyperlink (square bracket) get shifted to the end of the link when published. This includes special formatting characters like apostrophes for bold or italic.



---

There are "workarounds" for the last two problems listed above. The entity bug is pervasive and inescapable. Every time you edit a block of text with extended characters, you must go back through and replace them with the original entity strings.

• To avoid the literal square bracket problem, use the numeric entities ([and]) in your text.
• To make a hyperlink bold or italic, just leave a space between the formatting character and the leading square bracket:

     Here's a ''' [<URL> bold link]'''

_{^{& #91; - & #93;}}

Step 11: Please Do Not Use the Comments for Experimenting

If you will do your experimenting on your Orangeboard, you can delete the comment when you are done.
Please don't clutter up the comments.