Introduction: 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:
Use five single-quotes and you get bolded italic:
Two tildes start/endstrikethrough text:
A single caret starts/ends superscript:
Two commas start/end subscript.
You can combine different modifiers (as above), but you cannot repeat the same modifier to get "extra" effect.
'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:
H2(SO3)4++
Regular textsupersuper-subback to superback to regular
Regular textsuper italicstrike super back to regular
underline use a combination of strikeout and superscript. Pretty clever, eh?
underlined text back to normal.
Here Is
&apos&apositalic&apos&apos&apos&apos&aposbold&apos&apos&apos
Use five single-quotes and you get bolded italic:
&apos&apos&apos&apos&aposbolded italic&apos&apos&apos&apos&apos
Two tildes start/end
~~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).
&apos&apos&apos!&apos&apos&apos can be bold too&apos&apos&apos, and &apos&apos&apos! &apos&apos&apos &apos&apos&apos&apos&apos&aposbold-bold&apos&apos&apos&apos&apos&apos ends up being bold-italic with leading/trailing apostrophes &apos&apos&apos&apositalic-italic&apos&apos&apos&apos ends up being bold with leading/trailing apostrophes ~~~~strike-strike~~~~ does nothing (strikethrough an empty string at each end) &apos&apos&apos&apos&aposbold italic&apos&apos&apos&apos&apos &apos&apos&apos&apos&apos~~bold italic strike~~&apos&apos&apos&apos&apos __underline__ doesn&apost work `monospace` doesn&apost 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
bold italic
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 &apos&apositalic&apos&apos ~~strike~~ super^ back to regularRegular textsupersuper-superback to superback to regular (can't nest supers)
Regular textsupersuper-subback to superback to regular
Regular textsuper italic
1.1 Underlining
There is no underline in IblesFormatting. Zachninme provided this work-around: toNormal text ~~^underlined text^~~ back to normal. === Here Is~~^Underlined Text^~~ In Heading 3 ===Normal text
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, ... === &apos&aposother formatting&apos&apos ,,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&apost 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 ===
paddingStep 4: Paragraphs and Line Breaks
A new text paragraph is created whenever two blocks of text are separated by one or more empty lines.
A forced line break can be inserted with a macro:
One paragraph is here.A new paragraph starts now.
A forced line break can be inserted with a macro:
Line 1[[BR]]Line 2Line 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).
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.
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,
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/ 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%29is.
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&apost work (no trailing space) * Other &apos&aposformatting&apos&apos codes &apos&apos&aposare&apos&apos&apos allowed
- 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&aposve seen this before, you&aposre experiencing déjà vu.& amp;eacute; - & amp;agrave;
To put literal brackets into your text [rather than hyperlinks], 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).
Step 9: Macros
There are only four "macros" supported in the I'bles formatter:
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:
- Line Break
- Timestamp
- Image Macro Not Found:
Image
- Video Video
missing movie url...
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
- 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.
- 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&aposs 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.
307 Comments
11 years ago on Introduction
. This iBle was obsoleted by the introduction of the new editor in early 2010. The information here no longer applies at Instructables.
11 years ago on Introduction
~~strikethrough~~
12 years ago on Step 9
^i^ ~~dont~~ know
12 years ago on Introduction
wo^oo^,,oo,^oo^
Reply 12 years ago on Introduction
oops didnt work
12 years ago on Step 2
^superscript^
13 years ago on Step 2
SUPERSCRIPT DOESN'T WORK!
Reply 12 years ago on Step 2
^sure it does!^
12 years ago on Introduction
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
12 years ago on Step 2
''italics'' right! ''italics'
13 years ago on Step 5
Reply 12 years ago on Step 5
I was too, untill someone posted in a comment on how to; I just realized that it was in this instructable.
13 years ago on Step 11
I think this Instructable is Awesome!
No, I was Not experimenting on the comments.
Reply 12 years ago on Introduction
me ~~neither~~ i love that new special character thing!!
Reply 12 years ago on Introduction
what the heck it didnt ~~work~~
Reply 13 years ago on Step 11
areyousureyou
werent?Reply 13 years ago on Introduction
Of corse hewasnt
!Reply 13 years ago on Introduction
orly?
Reply 12 years ago on Introduction
yarly.
Reply 12 years ago on Introduction
nowai