Markdown was originally conceived as an easier way to write prose and technical material for online presentation. Smartdown embraces and extends that philosophy, best expressed by the original mind behind Markdown, John Gruber:
Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions. While Markdown's syntax has been influenced by several existing text-to-HTML filters -- including Setext, atx, Textile, reStructuredText, Grutatext, and EtText -- the single biggest source of inspiration for Markdown's syntax is the format of plain text email. To this end, Markdown's syntax is comprised entirely of punctuation characters, which punctuation characters have been carefully chosen so as to look like what they mean. E.g., asterisks around a word actually look like *emphasis*. Markdown lists look like, well, lists. Even blockquotes look like quoted passages of text, assuming you've ever used email.
Although there are several variants and extensions of Markdown, the ubiquity of the core Markdown syntax makes it a worthwhile and minimal investment to learn. Smartdown is based primarily upon GitHub-flavored Markdown, which is supported widely on GitHub, and also by many other Markdown tools and sites.
Some resources that may help:
- John Gruber's Markdown from 2004
- GitHub's Mastering Markdown
- A Formal Spec for GitHub Markdown
- GitHub-flavored Markdown Spec
Smartdown is Markdown, and any Markdown document can be viewed within a Smartdown-enabled viewer. A Smartdown-enabled viewer is able to interpret certain valid Markdown constructs in a way that enables the document to be more interactive than as a static Markdown document. Smartdown takes advantage of two features of Markdown, and extends their interpretation to enable Smartdown's interactivity. Specifically, Smartdown uses Markdown's link syntax to embed input, output and calculationcells into a document, and uses Markdown's code block syntax to embed more complex content as playables.
In each of the examples below, the Markdown source will be shown, followed by its rendered appearance.
# Level 1 header [Link Test](https://en.wikipedia.org/wiki/Markdown)
## Level 2 header $E=mc^2$
### Level 3 header
#### Level 4 header
##### Level 5 header $E=mc^2$
###### Level 6 header [Link Test](https://en.wikipedia.org/wiki/Markdown)Level 1 header Link Test
Level 6 header Link Test
*This text will be italic*
_This will also be italic_
**This text will be bold**
__This will also be bold__
~~This text will be strikethru~~
_You **can** combine styles_This text will be italic This will also be italic
This text will be bold This will also be bold
This text will be strikethru
You can combine styles easily
- Item 1
- Item 2
- Item 2a
- Item 2b
* Item 1
* Item 2
* Item 2a
* Item 2b
1. Item 1
1. Item 2
1. Item 3
1. Item 3a
1. Item 3b- Item 1
- Item 2
- Item 2a
- Item 2b
- Item 1
- Item 2
- Item 2a
- Item 2b
- Item 1
- Item 2
- Item 3
- Item 3a
- Item 3b
Inline: `const a = b + "foo" + 300; // comment`
Inline Longer: `const myVariable = yourVariable + "existential" + space + 'threat'; // A multiple word comment`Inline: const a = b + "foo" + 300; // comment
Inline Longer: const myVariable = yourVariable + "existential" + space + 'threat'; // A multiple word comment
```
# This is a shell script
set a="Hello" # A comment
echo `ls -l` > /tmp/foo
```# This is a shell script
set a="Hello" # A comment
echo `ls -l` > /tmp/foo
```
# This is a shell script
set a="Hello" # A comment
echo `ls -l` > /tmp/foo
```# This is a shell script
set a="Hello" # A comment
echo `ls -l` > /tmp/foo
Link name with code: [`var a = 5;`](https://www.example.com)Link name with code: [`var a = 5;`](https://www.example.com)
> **The Road Not Taken**
> Two roads diverged in a yellow wood,
And sorry I could not travel both
And be one traveler, long I stood
And looked down one as far as I could
To where it bent in the undergrowth;
> Then took the other, as just as fair,
And having perhaps the better claim,
Because it was grassy and wanted wear;
Though as for that the passing there
Had worn them really about the same,
> And both that morning equally lay
In leaves no step had trodden black.
Oh, I kept the first for another day!
Yet knowing how way leads on to way,
I doubted if I should ever come back.
> I shall be telling this with a sigh
Somewhere ages and ages hence:
Two roads diverged in a wood, and I—
I took the one less traveled by,
And that has made all the difference.
> **Robert Frost**The Road Not Taken
Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth;
Then took the other, as just as fair, And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same,
And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back.
I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I— I took the one less traveled by, And that has made all the difference.
Robert Frost
See Intra-page Links below.
- https://en.wikipedia.org/wiki/Raven
- [Markdown Philosophy](https://daringfireball.net/projects/markdown/syntax#philosophy)
- 
- 
- The source for this page is [`gallery/Markdown.md`](gallery/Markdown.md)- https://en.wikipedia.org/wiki/Raven
- Markdown Philosophy
- The source for this page is
gallery/Markdown.md - Here is a CSS file
lib/fonts.css
Notes on experimental behavior with respect to intra-page links
- Current behavior is to use
##footo link to an element with idfooin the current page. - Current behavior is to use
#Card#footo link to an element with idfooafter loading the content fromCard.
See Philosophy far above - [Philosophy](##philosophy)
See Hyperlinks above. - [Hyperlinks](##hyperlinks)
Or, visit an internal link on a different card. Like Home - Basic Features.
HTML links can be declared to either open in the current browser window, or to open in a new browser window, by using the target="_blank" qualifier on the <a> element. Smartdown attempts to apply the following reasonable defaults:
- A link to an absolute URL will open in a new window
- A link to a relative URL will open in the current window.
Smartdown provides an optional syntax on its Markdown link declarations to force a relative link to open in a new window. The current syntax for this is to append ##blank to the URL.
README.mdis relative, so opens in same window./README.mdis relative, so opens in same window../README.mdis relative, so opens in same window.README.md#-blankis relative, but opens in new window./README.md#-blankis relative, but opens in new window../README.md#-blankis relative, but opens in new window.https://example.comin new window is absolute, so opens in new window.https://example.comin current window is absolute, so opens in new window.
The Markdown specification and the marked.js implementation that Smartown uses provide a feature called autolinking, which means that things that look linkable are rendered as clickable links. There are some current issues with how email addresses are rendered with marked.js, so Smartdown has disabled the autolinking of email addresses for now.
Here are some examples of autolinking, mostly for test purposes:
- https://example.com
https://example.com- dan@example.com
dan@example.com- dan@example.com
https://gist.github.com/DrBud/0d86d77875826743680a0d0a1cbe75ed
| Left | Center | Right |
|---|---|---|
left |
center |
right |
| Left | Center | Right |
Type Smartdown into the input cell below and see the result rendered as Smartdown.
Markdown here ...
... is rendered below as:
Examples to start with:
I am **bold**Einstein said: $E=mc^2$I am a [hyperlink](https://en.wikipedia.org/wiki/Hyperlink)[What is your name](:?NAME) [Pleased to meet you, ](:!NAME)
Smartdown now incorporates support for Emoji, as is conventional in many Markdown implementations, including GitHub-flavored Markdown's Emoji conventions.
For example, we can do a Smiley emoji with the syntax:
plain: :smiley: *italic* *:smiley:* **bold** **:smiley:**which should render as:
plain: 😃 italic 😃 bold 😃
Other examples of Emoji (e.g., :cherry_blossom: turns into 🌸) can be found at: Emoji Cheat Sheet 🚀
Back to Home