title: $:/plugins/tiddlywiki/markdown/syntax To review standard Markdown syntax, see: [ext[CommonMark quick reference|https://commonmark.org/help/]]. For formal specification, consult the [ext[CommonMark Spec|https://spec.commonmark.org/current/]]. ! Linking to Tiddlers Prepend `#` to tiddler titles to form link addresses. If a tiddler title contains spaces or other special characters, you must either (1) URI-encode the title, or (2) surround the #title with `<` `>` and backslash-escape any `<` or `>` in the title. !! Links <pre><code>[link text](<strong>#</strong><$text text="TiddlerTitle"/> "optional tooltip") [link text](<strong>#</strong>New<strong>%20</strong>Tiddler) [link text](<strong><#</strong>New Tiddler<strong>></strong>) [](<strong><#</strong>How to use <strong>\</strong><$list<strong>\</strong>> widget?<strong>></strong>) </code></pre> You can also use the `<$link>` widget to generate links to tiddlers: ``` <$link to="Tiddler Title">Displayed Link Title</$link> ``` !! Reference Style Links ``` [link text][1] [link text][2] [1]: #New%20Tiddler "optional tooltip" [2]: <#Another Tiddler> ``` !! Images ``` ![alt text](#Motovun%20Jack.jpg "optional tooltip") ![alt text](<#Motovun Jack.jpg>) ``` ! Escaping Special Characters Markdown allows you to escape ASCII punctuation characters with `\`. ! HTML Blocks An [[HTML block|https://spec.commonmark.org/0.30/#html-blocks]] is a group of lines that starts with an HTML tag and is treated as raw HTML. Block-level tags such as `<div>` and `<p>` can interrupt a paragraph. Inline elements such as `<strong>` and `<em>` can start an HTML block if the //complete// tag begins on a new paragraph by itself. In most cases, an HTML block continues until a blank line is reached. A widget tag that begins on a new paragraph will also be treated as an HTML block. Markdown elements are not recognized inside the HTML block. For example: ``` see <$link to="New Tiddler"> _New_ Tiddler </$link> ``` rendered as: ``` <p>see</p> <$link to="New Tiddler"> _New_ Tiddler </$link> ``` A widget tag not preceded by a blank line is an inline element. ``` see <$link to="New Tiddler"> _New_ Tiddler </$link> ``` rendered as: ``` <p>see <$link to="New Tiddler"><em>New</em> Tiddler</$link></p> ``` ! Syntax Extensions !! <$text text=KaTeX/> You need to install the <$text text=KaTeX/> plugin to activate this syntax extension. Surround your math expression with `$` for inline rendering. Whitespace characters cannot immediately follow the opening `$` or precede the closing `$`, and the closing delimiter must not immediately precede a digit. Furthermore, `$` followed by `:/` will not be recognized as a valid opening or closing delimiter either. Here's an example of an inline math expression: ``` $c = \pm\sqrt{a^2 + b^2}$ ``` Use `$$` to center the math in display mode: ``` $$c = \pm\sqrt{a^2 + b^2}$$ ``` !! Superscript and Subscript ``` X^2^ ``` x<sup>2</sup> ``` H~2~O ``` H<sub>2</sub>O !! Marked Text ``` ==marked text== ``` <mark>marked text</mark> !! Strikethrough ``` ~~striked through text~~ ``` <s>striked through text</s> !! Inserted Text ``` ++inserted text++ ``` <ins>inserted text</ins> !! Tables markdown-it supports <$text text="GitHub Flavored Markdown"/> (GFM) [ext[table syntax|https://github.github.com/gfm/#tables-extension-]]. ``` |Left Aligned |Centered |Right Aligned | |:--- | :---: | ---:| |apple |bat |candle | ``` <table> <thead> <tr><th style="text-align:left">Left Aligned</th><th style="text-align:center">Centered</th><th style="text-align:right">Right Aligned</th></tr> </thead> <tbody> <tr><td style="text-align:left">apple</td><td style="text-align:center">bat</td><td style="text-align:right">candle</td></tr> </tbody> </table> !! Definition Lists ``` Term One : Definition with lazy continuation. Term Two : Here is the first defintion. : Here is the second definition. As you can see. A definition can have more than one paragrpah. It can also have And indended code block... ``` <dl> <dt>Term One</dt> <dd><p>Definition with lazy continuation. </p></dd> <dt>Term Two</dt> <dd><p>Here is the first defintion. </p></dd> <dd><p>Here is the second definition.</p><p>As you can see. A definition can have more than one paragrpah. It can also have <pre><code>And indended code block... </code></pre> </p></dd> </dl> !! Footnotes For detailed explanation, see [[Creating Footnotes|https://www.markdownguide.org/extended-syntax/#footnotes]]. ``` Here's a simple footnote,[^1] and here's a longer one.[^bignote] [^1]: This is the first footnote. [^bignote]: Here's one with multiple paragraphs and code. Indent paragraphs to include them in the footnote. `{ my code }` Add as many paragraphs as you like. ``` <div class="markdown"><p>Here’s a simple footnote,<a class="footnote-ref" href="##fn1--doc639182" id="#fnref1--doc639182">[1]</a> and here’s a longer one.<a class="footnote-ref" href="##fn2--doc639182" id="#fnref2--doc639182">[2]</a> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="#fn1--doc639182" class="footnote-item"><p>This is the first footnote. <a href="##fnref1--doc639182" class="footnote-backref">↥︎</a> </p></li> <li id="#fn2--doc639182" class="footnote-item"><p>Here’s one with multiple paragraphs and code.</p><p>Indent paragraphs to include them in the footnote.</p><p><code class="codified">{ my code }</code></p><p>Add as many paragraphs as you like. <a href="##fnref2--doc639182" class="footnote-backref">↥︎</a> </p></li> </ol> </section> </p></div>