Introduction: Instructables Text Formatting

Picture of 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

Picture of HTML

Direct HTML entry is not supported on Instructables. :(

Use the "WikiFormatting" described in the following steps.

Step 2: Font Styles

Picture of 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,,^++^
pi1/2 * R3 = c4+5
H2(SO3)4++

  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 textsupersuper-superback to superback to regular (can't nest supers)
Regular textsupersuper-subback to superback to regular
Regular textsuper 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

Picture of 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 formattingcodes 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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&apos;t work (no trailing space) * Other &apos;&apos;formatting&apos;&apos; codes &apos;&apos;&apos;are&apos;&apos;&apos; 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

Picture of 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&apos;ve seen this before, you&apos;re experiencing d&eacute;j&agrave; 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:
Here are some of the codes and what is displayed.

Step 9: Macros

Picture of 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

Picture of 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&apos;s a &apos;&apos;&apos; [<URL> bold link]&apos;&apos;&apos;
& #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.

Comments

NachoMahma (author)2010-10-14

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

Woshishui (author)2013-12-05

cool

Millawi Legend (author)2010-10-14

~~strikethrough~~

coolo52 (author)2010-04-24

^i^  ~~dont~~ know

finnrambo (author)2010-02-04

 wo^oo^,,oo,^oo^

finnrambo (author)finnrambo2010-02-04

 oops didnt work

Mplinnc (author)2010-01-23

^superscript^

DrWeird117 (author)2009-03-07

SUPERSCRIPT DOESN'T WORK!

orangewolf22 (author)DrWeird1172010-01-21

^sure it does!^

M4industries (author)2009-12-20

 This may be obsolete because some of these features are for pro's only.

Ya I know I'm kinda mad...it's cool when they add extra features for people who pay, but removing features from standard accounts? Uber meh

smattman22 (author)2009-12-13

''italics'' right! ''italics'

Matt21497 (author)2009-07-06
     I have been loking for how to do this thanks nacho mahma
zascecs (author)Matt214972009-12-03

I was too, untill someone posted in a comment on how to; I just realized that it was in this instructable. 

ian25 (author)2009-03-17

I think this Instructable is Awesome!
No, I was Not experimenting on the comments.

Zaphod Beeblebrox (author)ian252009-12-03

me ~~neither~~ i love that new special character thing!!

what the heck it didnt     ~~work~~      

REA (author)ian252009-03-18

areyousureyouwerent?

fearme36 (author)REA2009-03-19

Of corse hewasnt!

REA (author)fearme362009-03-20

orly?

fearme36 (author)REA2009-12-02

yarly.

REA (author)fearme362009-12-03

nowai

ERCCRE123 (author)REA2009-04-25

LOL

ERCCRE123 (author)ERCCRE1232009-04-25

it looks like a face lol

will421 (author)ERCCRE1232009-06-16

Jumbleoftext

DrWeird117 (author)2009-03-07

XXHi!YY

fwjs28 (author)DrWeird1172009-03-13

u use carrots( )

Matt21497 (author)fwjs282009-05-05

I eat carrots

fwjs28 (author)Matt214972009-05-05

i beat the women and children with carrots....

Matt21497 (author)fwjs282009-05-06

I see we have many things in common

fwjs28 (author)Matt214972009-05-06

Huzzah, yet the cake is a lie...so we cannot be...*sighs*....

Matt21497 (author)fwjs282009-05-10

what is rong with the cake is it not chocolate like we ordered?

fwjs28 (author)Matt214972009-05-10

my fine bretheren it is SPARTAAAAH!!!!

Matt21497 (author)fwjs282009-05-10

hehe bad guy go down hole (=

fwjs28 (author)Matt214972009-05-10

agreed it is then, we shall dine in hell, and tommorow Arby's yet first we must feast upon the carrto cake...

Matt21497 (author)fwjs282009-05-11

arbys tast bad )= im not thnkin arbys

fwjs28 (author)Matt214972009-05-11

SHUNNN!...shun the none believer...umm, unshun....how about BK or McDonalds?

Matt21497 (author)fwjs282009-05-12

bk might steel my star trek cup so how bout mc Ds

fwjs28 (author)Matt214972009-05-12

i see...i prefer Micky D's anyway...might i ask upon the collection of such a cup... (where'd you get the fucken cup?)

Matt21497 (author)fwjs282009-05-15

actually i do no own such a cup but say i acquire the cup BK will steal the cup

fwjs28 (author)Matt214972009-05-16

cupity cupity CUP!!!.....anwho, CUP!!!!!!!!!!!!!!!!!!!!!!!!!!......carrots

you ca get a star trek cup and put carrots in it to stop the kingons from stealinz
it !!!!!!!!(kingons hate carrots) but i don't

silly kingons how can you not like carrots? ....i think i ll juice the carrots and have carrot juice...

carrot juice FTW

YAY, then force feed the kingons carrot juice FTW!

will421 (author)fwjs282009-06-09

Carrots, anyone? *snicker*

fwjs28 (author)will4212009-06-09

giggles menaicly...

will421 (author)fwjs282009-06-09

What about... BANANAS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1111

will421 (author)will4212009-06-09

Or... APPLES!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!111111111

will421 (author)will4212009-06-09

Or, CHOCOLATE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1111111111111111111

About This Instructable

8,938views

87favorites

License:

Bio: Just another poor slob, trying to make it to the grave with as little hassle as possible. . Humor is the only test of gravity, and ... More »
More by NachoMahma:Instructables Text FormattingWhat To Do If Harassed On Instructables
Add instructable to: