safe-mdx 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/parse.d.ts +10 -0
- package/dist/parse.d.ts.map +1 -1
- package/dist/parse.js +1 -1
- package/dist/parse.js.map +1 -1
- package/dist/safe-mdx.test.js +46 -59
- package/dist/safe-mdx.test.js.map +1 -1
- package/package.json +1 -1
- package/src/parse.ts +2 -2
- package/src/safe-mdx.test.tsx +46 -59
package/dist/parse.d.ts
CHANGED
|
@@ -1,3 +1,13 @@
|
|
|
1
1
|
import { Root } from 'mdast';
|
|
2
2
|
export declare function mdxParse(code: string): Root;
|
|
3
|
+
/**
|
|
4
|
+
* https://github.com/mdx-js/mdx/blob/b3351fadcb6f78833a72757b7135dcfb8ab646fe/packages/mdx/lib/plugin/remark-mark-and-unravel.js
|
|
5
|
+
* A tiny plugin that unravels `<p><h1>x</h1></p>` but also
|
|
6
|
+
* `<p><Component /></p>` (so it has no knowledge of "HTML").
|
|
7
|
+
*
|
|
8
|
+
* It also marks JSX as being explicitly JSX, so when a user passes a `h1`
|
|
9
|
+
* component, it is used for `# heading` but not for `<h1>heading</h1>`.
|
|
10
|
+
*
|
|
11
|
+
*/
|
|
12
|
+
export declare function remarkMarkAndUnravel(): (tree: Root) => void;
|
|
3
13
|
//# sourceMappingURL=parse.d.ts.map
|
package/dist/parse.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parse.d.ts","sourceRoot":"","sources":["../src/parse.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAe,MAAM,OAAO,CAAA;AAKzC,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,QAGpC"}
|
|
1
|
+
{"version":3,"file":"parse.d.ts","sourceRoot":"","sources":["../src/parse.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAe,MAAM,OAAO,CAAA;AAKzC,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,QAGpC;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,WACT,IAAI,UAqE9B"}
|
package/dist/parse.js
CHANGED
|
@@ -17,7 +17,7 @@ export function mdxParse(code) {
|
|
|
17
17
|
* component, it is used for `# heading` but not for `<h1>heading</h1>`.
|
|
18
18
|
*
|
|
19
19
|
*/
|
|
20
|
-
function remarkMarkAndUnravel() {
|
|
20
|
+
export function remarkMarkAndUnravel() {
|
|
21
21
|
return function (tree) {
|
|
22
22
|
visit(tree, function (node, index, parent) {
|
|
23
23
|
let offset = -1;
|
package/dist/parse.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parse.js","sourceRoot":"","sources":["../src/parse.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC/B,OAAO,SAAS,MAAM,YAAY,CAAA;AAClC,OAAO,SAAS,MAAM,YAAY,CAAA;AAElC,MAAM,UAAU,QAAQ,CAAC,IAAY;IACjC,MAAM,IAAI,GAAG,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;IAC3C,OAAO,IAAI,CAAC,IAAI,CAAC,GAAW,CAAA;AAChC,CAAC;AAED;;;;;;;;GAQG;AACH,
|
|
1
|
+
{"version":3,"file":"parse.js","sourceRoot":"","sources":["../src/parse.ts"],"names":[],"mappings":"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"}
|
package/dist/safe-mdx.test.js
CHANGED
|
@@ -945,38 +945,7 @@ test('kitchen sink', () => {
|
|
|
945
945
|
|
|
946
946
|
`)).toMatchInlineSnapshot(`
|
|
947
947
|
{
|
|
948
|
-
"errors": [
|
|
949
|
-
{
|
|
950
|
-
"message": "Unsupported language no-highlight",
|
|
951
|
-
},
|
|
952
|
-
{
|
|
953
|
-
"message": "Unsupported language no-highlight",
|
|
954
|
-
},
|
|
955
|
-
{
|
|
956
|
-
"message": "Unsupported language no-highlight",
|
|
957
|
-
},
|
|
958
|
-
{
|
|
959
|
-
"message": "Unsupported language no-highlight",
|
|
960
|
-
},
|
|
961
|
-
{
|
|
962
|
-
"message": "Unsupported language no-highlight",
|
|
963
|
-
},
|
|
964
|
-
{
|
|
965
|
-
"message": "Unsupported language no-highlight",
|
|
966
|
-
},
|
|
967
|
-
{
|
|
968
|
-
"message": "Unsupported language no-highlight",
|
|
969
|
-
},
|
|
970
|
-
{
|
|
971
|
-
"message": "Unsupported language no-highlight",
|
|
972
|
-
},
|
|
973
|
-
{
|
|
974
|
-
"message": "Unsupported language no-highlight",
|
|
975
|
-
},
|
|
976
|
-
{
|
|
977
|
-
"message": "Unsupported language no-highlight",
|
|
978
|
-
},
|
|
979
|
-
],
|
|
948
|
+
"errors": [],
|
|
980
949
|
"html": "<link rel="preload" as="image" href="https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png"/><h1>Markdown Kitchen Sink</h1><p>This file is <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" title="">https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet</a> plus a few fixes and additions. Used by <a href="https://github.com/obedm503/bootmark" title="">obedm503/bootmark</a> to <a href="https://obedm503.github.io/bootmark/docs/markdown-cheatsheet.html" title="">demonstrate</a> it's styling features.</p><p>This is intended as a quick reference and showcase. For more complete info, see <a href="http://daringfireball.net/projects/markdown/" title="">John Gruber's original spec</a> and the <a href="http://github.github.com/github-flavored-markdown/" title="">Github-flavored Markdown info page</a>.</p><p>Note that there is also a <a href="./Markdown-Here-Cheatsheet" title="">Cheatsheet specific to Markdown Here</a> if that's what you're looking for. You can also check out <a href="./Other-Markdown-Tools" title="">more Markdown tools</a>.</p><h5>Table of Contents</h5><p><a href="#headers" title="">Headers</a>
|
|
981
950
|
<a href="#emphasis" title="">Emphasis</a>
|
|
982
951
|
<a href="#lists" title="">Lists</a>
|
|
@@ -988,13 +957,13 @@ test('kitchen sink', () => {
|
|
|
988
957
|
<a href="#html" title="">Inline HTML</a>
|
|
989
958
|
<a href="#hr" title="">Horizontal Rule</a>
|
|
990
959
|
<a href="#lines" title="">Line Breaks</a>
|
|
991
|
-
<a href="#videos" title="">YouTube Videos</a></p><a name="headers"></a><h2>Headers</h2><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1>Alt-H1</h1><h2>Alt-H2</h2><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1>Alt-H1</h1><h2>Alt-H2</h2><a name="emphasis"></a><h2>Emphasis</h2><pre><code>Emphasis, aka italics, with *asterisks* or _underscores_.
|
|
960
|
+
<a href="#videos" title="">YouTube Videos</a></p><a name="headers"></a><h2>Headers</h2><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1>Alt-H1</h1><h2>Alt-H2</h2><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1>Alt-H1</h1><h2>Alt-H2</h2><a name="emphasis"></a><h2>Emphasis</h2><pre><code class="language-no-highlight">Emphasis, aka italics, with *asterisks* or _underscores_.
|
|
992
961
|
|
|
993
962
|
Strong emphasis, aka bold, with **asterisks** or __underscores__.
|
|
994
963
|
|
|
995
964
|
Combined emphasis with **asterisks and _underscores_**.
|
|
996
965
|
|
|
997
|
-
Strikethrough uses two tildes. ~~Scratch this.~~</code></pre><p>Emphasis, aka italics, with <em>asterisks</em> or <em>underscores</em>.</p><p>Strong emphasis, aka bold, with <strong>asterisks</strong> or <strong>underscores</strong>.</p><p>Combined emphasis with <strong>asterisks and <em>underscores</em></strong>.</p><p>Strikethrough uses two tildes. <del>Scratch this.</del></p><a name="lists"></a><h2>Lists</h2><p>(In this example, leading and trailing spaces are shown with with dots: ⋅)</p><pre><code>1. First ordered list item
|
|
966
|
+
Strikethrough uses two tildes. ~~Scratch this.~~</code></pre><p>Emphasis, aka italics, with <em>asterisks</em> or <em>underscores</em>.</p><p>Strong emphasis, aka bold, with <strong>asterisks</strong> or <strong>underscores</strong>.</p><p>Combined emphasis with <strong>asterisks and <em>underscores</em></strong>.</p><p>Strikethrough uses two tildes. <del>Scratch this.</del></p><a name="lists"></a><h2>Lists</h2><p>(In this example, leading and trailing spaces are shown with with dots: ⋅)</p><pre><code class="language-no-highlight">1. First ordered list item
|
|
998
967
|
2. Another item
|
|
999
968
|
⋅⋅* Unordered sub-list.
|
|
1000
969
|
1. Actual numbers don't matter, just that it's a number
|
|
@@ -1011,7 +980,7 @@ test('kitchen sink', () => {
|
|
|
1011
980
|
- Or minuses
|
|
1012
981
|
+ Or pluses</code></pre><ol start="1"><li><p>First ordered list item</p></li><li><p>Another item</p></li></ol><ul><li><p>Unordered sub-list.</p></li></ul><ol start="1"><li><p>Actual numbers don't matter, just that it's a number</p></li><li><p>Ordered sub-list</p></li><li><p>And another item.</p><p>You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).</p><p>To have a line break without a paragraph, you will need to use two trailing spaces.
|
|
1013
982
|
Note that this line is separate, but within the same paragraph.
|
|
1014
|
-
(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)</p></li></ol><ul><li><p>Unordered list can use asterisks</p></li></ul><ul><li><p>Or minuses</p></li></ul><ul><li><p>Or pluses</p></li></ul><a name="links"></a><h2>Links</h2><p>There are two ways to create links.</p><pre><code>[I'm an inline-style link](https://www.google.com)
|
|
983
|
+
(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)</p></li></ol><ul><li><p>Unordered list can use asterisks</p></li></ul><ul><li><p>Or minuses</p></li></ul><ul><li><p>Or pluses</p></li></ul><a name="links"></a><h2>Links</h2><p>There are two ways to create links.</p><pre><code class="language-no-highlight">[I'm an inline-style link](https://www.google.com)
|
|
1015
984
|
|
|
1016
985
|
[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
|
|
1017
986
|
|
|
@@ -1033,7 +1002,7 @@ test('kitchen sink', () => {
|
|
|
1033
1002
|
[1]: http://slashdot.org
|
|
1034
1003
|
[link text itself]: http://www.reddit.com</code></pre><p><a href="https://www.google.com" title="">I'm an inline-style link</a></p><p><a href="https://www.google.com" title="Google's Homepage">I'm an inline-style link with title</a></p><p><a href="https://www.mozilla.org">I'm a reference-style link</a></p><p><a href="../blob/master/LICENSE" title="">I'm a relative reference to a repository file</a></p><p><a href="http://slashdot.org">You can use numbers for reference-style link definitions</a></p><p>Or leave it empty and use the <a href="http://www.reddit.com">link text itself</a>.</p><p>URLs and URLs in angle brackets will automatically get turned into links.
|
|
1035
1004
|
<a href="http://www.example.com" title="">http://www.example.com</a> and sometimes
|
|
1036
|
-
example.com (but not on Github, for example).</p><p>Some text to show that the reference links can follow later.</p><a name="images"></a><h2>Images</h2><pre><code>Here's our logo (hover to see the title text):
|
|
1005
|
+
example.com (but not on Github, for example).</p><p>Some text to show that the reference links can follow later.</p><a name="images"></a><h2>Images</h2><pre><code class="language-no-highlight">Here's our logo (hover to see the title text):
|
|
1037
1006
|
|
|
1038
1007
|
Inline-style:
|
|
1039
1008
|

|
|
@@ -1043,13 +1012,13 @@ test('kitchen sink', () => {
|
|
|
1043
1012
|
|
|
1044
1013
|
[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"</code></pre><p>Here's our logo (hover to see the title text):</p><p>Inline-style:
|
|
1045
1014
|
<img src="https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png" alt="alt text" title="Logo Title Text 1"/></p><p>Reference-style:
|
|
1046
|
-
</p><a name="code"></a><h2>Code and Syntax Highlighting</h2><p>Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and <em>Markdown Here</em> -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. <em>Markdown Here</em> supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the <a href="http://softwaremaniacs.org/media/soft/highlight/test.html" title="">highlight.js demo page</a>.</p><pre><code>Inline \`code\` has \`back-ticks around\` it.</code></pre><p>Inline <code>code</code> has <code>back-ticks around</code> it.</p><p>Blocks of code are either fenced by lines with three back-ticks <code>\`\`\`</code>, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.</p><pre><code class="language-javascript">var s = "JavaScript syntax highlighting";
|
|
1015
|
+
</p><a name="code"></a><h2>Code and Syntax Highlighting</h2><p>Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and <em>Markdown Here</em> -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. <em>Markdown Here</em> supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the <a href="http://softwaremaniacs.org/media/soft/highlight/test.html" title="">highlight.js demo page</a>.</p><pre><code class="language-no-highlight">Inline \`code\` has \`back-ticks around\` it.</code></pre><p>Inline <code>code</code> has <code>back-ticks around</code> it.</p><p>Blocks of code are either fenced by lines with three back-ticks <code>\`\`\`</code>, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.</p><pre><code class="language-javascript">var s = "JavaScript syntax highlighting";
|
|
1047
1016
|
alert(s);</code></pre><pre><code class="language-python">s = "Python syntax highlighting"
|
|
1048
1017
|
print s</code></pre><pre><code>No language indicated, so no syntax highlighting.
|
|
1049
1018
|
But let's throw in a &lt;b&gt;tag&lt;/b&gt;.</code></pre><pre><code class="language-javascript">var s = "JavaScript syntax highlighting";
|
|
1050
1019
|
alert(s);</code></pre><pre><code class="language-python">s = "Python syntax highlighting"
|
|
1051
1020
|
print s</code></pre><pre><code>No language indicated, so no syntax highlighting in Markdown Here (varies on Github).
|
|
1052
|
-
But let's throw in a <b>tag</b>.</code></pre><a name="tables"></a><h2>Tables</h2><p>Tables aren't part of the core Markdown spec, but they are part of GFM and <em>Markdown Here</em> supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.</p><pre><code>Colons can be used to align columns.
|
|
1021
|
+
But let's throw in a <b>tag</b>.</code></pre><a name="tables"></a><h2>Tables</h2><p>Tables aren't part of the core Markdown spec, but they are part of GFM and <em>Markdown Here</em> supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.</p><pre><code class="language-no-highlight">Colons can be used to align columns.
|
|
1053
1022
|
|
|
1054
1023
|
| Tables | Are | Cool |
|
|
1055
1024
|
| ------------- |:-------------:| -----:|
|
|
@@ -1064,13 +1033,13 @@ test('kitchen sink', () => {
|
|
|
1064
1033
|
Markdown | Less | Pretty
|
|
1065
1034
|
--- | --- | ---
|
|
1066
1035
|
*Still* | \`renders\` | **nicely**
|
|
1067
|
-
1 | 2 | 3</code></pre><p>Colons can be used to align columns.</p><table><thead><tr class=""><td class="">Tables</td><td class="">Are</td><td class="">Cool</td></tr></thead><tbody><tr class=""><td class="">col 3 is</td><td class="">right-aligned</td><td class="">$1600</td></tr><tr class=""><td class="">col 2 is</td><td class="">centered</td><td class="">$12</td></tr><tr class=""><td class="">zebra stripes</td><td class="">are neat</td><td class="">$1</td></tr></tbody></table><p>There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.</p><table><thead><tr class=""><td class="">Markdown</td><td class="">Less</td><td class="">Pretty</td></tr></thead><tbody><tr class=""><td class=""><em>Still</em></td><td class=""><code>renders</code></td><td class=""><strong>nicely</strong></td></tr><tr class=""><td class="">1</td><td class="">2</td><td class="">3</td></tr></tbody></table><a name="blockquotes"></a><h2>Blockquotes</h2><pre><code>> Blockquotes are very handy in email to emulate reply text.
|
|
1036
|
+
1 | 2 | 3</code></pre><p>Colons can be used to align columns.</p><table><thead><tr class=""><td class="">Tables</td><td class="">Are</td><td class="">Cool</td></tr></thead><tbody><tr class=""><td class="">col 3 is</td><td class="">right-aligned</td><td class="">$1600</td></tr><tr class=""><td class="">col 2 is</td><td class="">centered</td><td class="">$12</td></tr><tr class=""><td class="">zebra stripes</td><td class="">are neat</td><td class="">$1</td></tr></tbody></table><p>There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.</p><table><thead><tr class=""><td class="">Markdown</td><td class="">Less</td><td class="">Pretty</td></tr></thead><tbody><tr class=""><td class=""><em>Still</em></td><td class=""><code>renders</code></td><td class=""><strong>nicely</strong></td></tr><tr class=""><td class="">1</td><td class="">2</td><td class="">3</td></tr></tbody></table><a name="blockquotes"></a><h2>Blockquotes</h2><pre><code class="language-no-highlight">> Blockquotes are very handy in email to emulate reply text.
|
|
1068
1037
|
> This line is part of the same quote.
|
|
1069
1038
|
|
|
1070
1039
|
Quote break.
|
|
1071
1040
|
|
|
1072
1041
|
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.</code></pre><blockquote><p>Blockquotes are very handy in email to emulate reply text.
|
|
1073
|
-
This line is part of the same quote.</p></blockquote><p>Quote break.</p><blockquote><p>This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can <em>put</em> <strong>Markdown</strong> into a blockquote.</p></blockquote><a name="html"></a><h2>Inline HTML</h2><p>You can also use raw HTML in your Markdown, and it'll mostly work pretty well.</p><pre><code><dl>
|
|
1042
|
+
This line is part of the same quote.</p></blockquote><p>Quote break.</p><blockquote><p>This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can <em>put</em> <strong>Markdown</strong> into a blockquote.</p></blockquote><a name="html"></a><h2>Inline HTML</h2><p>You can also use raw HTML in your Markdown, and it'll mostly work pretty well.</p><pre><code class="language-no-highlight"><dl>
|
|
1074
1043
|
<dt>Definition list</dt>
|
|
1075
1044
|
<dd>Is something people use sometimes.</dd>
|
|
1076
1045
|
|
|
@@ -1094,9 +1063,9 @@ test('kitchen sink', () => {
|
|
|
1094
1063
|
|
|
1095
1064
|
This line is also a separate paragraph, but...
|
|
1096
1065
|
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.</code></pre><p>Here's a line for us to start with.</p><p>This line is separated from the one above by two newlines, so it will be a <em>separate paragraph</em>.</p><p>This line is also begins a separate paragraph, but...
|
|
1097
|
-
This line is only separated by a single newline, so it's a separate line in the <em>same paragraph</em>.</p><p>(Technical note: <em>Markdown Here</em> uses GFM line breaks, so there's no need to use MD's two-space line breaks.)</p><a name="videos"></a><h2>YouTube Videos</h2><p>They can't be added directly but you can add an image with a link to the video like this:</p><pre><code><a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
|
|
1066
|
+
This line is only separated by a single newline, so it's a separate line in the <em>same paragraph</em>.</p><p>(Technical note: <em>Markdown Here</em> uses GFM line breaks, so there's no need to use MD's two-space line breaks.)</p><a name="videos"></a><h2>YouTube Videos</h2><p>They can't be added directly but you can add an image with a link to the video like this:</p><pre><code class="language-no-highlight"><a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
|
|
1098
1067
|
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg"
|
|
1099
|
-
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a></code></pre><p>Or, in pure Markdown, but losing the image sizing and border:</p><pre><code>[](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)</code></pre>",
|
|
1068
|
+
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a></code></pre><p>Or, in pure Markdown, but losing the image sizing and border:</p><pre><code class="language-no-highlight">[](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)</code></pre>",
|
|
1100
1069
|
"result": <React.Fragment>
|
|
1101
1070
|
<h1>
|
|
1102
1071
|
Markdown Kitchen Sink
|
|
@@ -1325,7 +1294,9 @@ test('kitchen sink', () => {
|
|
|
1325
1294
|
Emphasis
|
|
1326
1295
|
</h2>
|
|
1327
1296
|
<pre>
|
|
1328
|
-
<code
|
|
1297
|
+
<code
|
|
1298
|
+
className="language-no-highlight"
|
|
1299
|
+
>
|
|
1329
1300
|
Emphasis, aka italics, with *asterisks* or _underscores_.
|
|
1330
1301
|
|
|
1331
1302
|
Strong emphasis, aka bold, with **asterisks** or __underscores__.
|
|
@@ -1383,7 +1354,9 @@ test('kitchen sink', () => {
|
|
|
1383
1354
|
(In this example, leading and trailing spaces are shown with with dots: ⋅)
|
|
1384
1355
|
</p>
|
|
1385
1356
|
<pre>
|
|
1386
|
-
<code
|
|
1357
|
+
<code
|
|
1358
|
+
className="language-no-highlight"
|
|
1359
|
+
>
|
|
1387
1360
|
1. First ordered list item
|
|
1388
1361
|
2. Another item
|
|
1389
1362
|
⋅⋅* Unordered sub-list.
|
|
@@ -1481,7 +1454,9 @@ test('kitchen sink', () => {
|
|
|
1481
1454
|
There are two ways to create links.
|
|
1482
1455
|
</p>
|
|
1483
1456
|
<pre>
|
|
1484
|
-
<code
|
|
1457
|
+
<code
|
|
1458
|
+
className="language-no-highlight"
|
|
1459
|
+
>
|
|
1485
1460
|
[I'm an inline-style link](https://www.google.com)
|
|
1486
1461
|
|
|
1487
1462
|
[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
|
|
@@ -1574,7 +1549,9 @@ test('kitchen sink', () => {
|
|
|
1574
1549
|
Images
|
|
1575
1550
|
</h2>
|
|
1576
1551
|
<pre>
|
|
1577
|
-
<code
|
|
1552
|
+
<code
|
|
1553
|
+
className="language-no-highlight"
|
|
1554
|
+
>
|
|
1578
1555
|
Here's our logo (hover to see the title text):
|
|
1579
1556
|
|
|
1580
1557
|
Inline-style:
|
|
@@ -1627,7 +1604,9 @@ test('kitchen sink', () => {
|
|
|
1627
1604
|
.
|
|
1628
1605
|
</p>
|
|
1629
1606
|
<pre>
|
|
1630
|
-
<code
|
|
1607
|
+
<code
|
|
1608
|
+
className="language-no-highlight"
|
|
1609
|
+
>
|
|
1631
1610
|
Inline \`code\` has \`back-ticks around\` it.
|
|
1632
1611
|
</code>
|
|
1633
1612
|
</pre>
|
|
@@ -1707,7 +1686,9 @@ test('kitchen sink', () => {
|
|
|
1707
1686
|
supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.
|
|
1708
1687
|
</p>
|
|
1709
1688
|
<pre>
|
|
1710
|
-
<code
|
|
1689
|
+
<code
|
|
1690
|
+
className="language-no-highlight"
|
|
1691
|
+
>
|
|
1711
1692
|
Colons can be used to align columns.
|
|
1712
1693
|
|
|
1713
1694
|
| Tables | Are | Cool |
|
|
@@ -1890,7 +1871,9 @@ test('kitchen sink', () => {
|
|
|
1890
1871
|
Blockquotes
|
|
1891
1872
|
</h2>
|
|
1892
1873
|
<pre>
|
|
1893
|
-
<code
|
|
1874
|
+
<code
|
|
1875
|
+
className="language-no-highlight"
|
|
1876
|
+
>
|
|
1894
1877
|
> Blockquotes are very handy in email to emulate reply text.
|
|
1895
1878
|
> This line is part of the same quote.
|
|
1896
1879
|
|
|
@@ -1931,7 +1914,9 @@ test('kitchen sink', () => {
|
|
|
1931
1914
|
You can also use raw HTML in your Markdown, and it'll mostly work pretty well.
|
|
1932
1915
|
</p>
|
|
1933
1916
|
<pre>
|
|
1934
|
-
<code
|
|
1917
|
+
<code
|
|
1918
|
+
className="language-no-highlight"
|
|
1919
|
+
>
|
|
1935
1920
|
<dl>
|
|
1936
1921
|
<dt>Definition list</dt>
|
|
1937
1922
|
<dd>Is something people use sometimes.</dd>
|
|
@@ -2062,7 +2047,9 @@ test('kitchen sink', () => {
|
|
|
2062
2047
|
They can't be added directly but you can add an image with a link to the video like this:
|
|
2063
2048
|
</p>
|
|
2064
2049
|
<pre>
|
|
2065
|
-
<code
|
|
2050
|
+
<code
|
|
2051
|
+
className="language-no-highlight"
|
|
2052
|
+
>
|
|
2066
2053
|
<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
|
|
2067
2054
|
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg"
|
|
2068
2055
|
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
|
|
@@ -2072,7 +2059,9 @@ test('kitchen sink', () => {
|
|
|
2072
2059
|
Or, in pure Markdown, but losing the image sizing and border:
|
|
2073
2060
|
</p>
|
|
2074
2061
|
<pre>
|
|
2075
|
-
<code
|
|
2062
|
+
<code
|
|
2063
|
+
className="language-no-highlight"
|
|
2064
|
+
>
|
|
2076
2065
|
[](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
|
|
2077
2066
|
</code>
|
|
2078
2067
|
</pre>
|
|
@@ -2093,12 +2082,8 @@ test('code block rendering', () => {
|
|
|
2093
2082
|
\`\`\`
|
|
2094
2083
|
`)).toMatchInlineSnapshot(`
|
|
2095
2084
|
{
|
|
2096
|
-
"errors": [
|
|
2097
|
-
|
|
2098
|
-
"message": "Unsupported language invalid-language",
|
|
2099
|
-
},
|
|
2100
|
-
],
|
|
2101
|
-
"html": "<pre><code class="language-typescript">const x = 1;</code></pre><pre><code>const y = 2;</code></pre>",
|
|
2085
|
+
"errors": [],
|
|
2086
|
+
"html": "<pre><code class="language-typescript">const x = 1;</code></pre><pre><code class="language-invalid-language">const y = 2;</code></pre>",
|
|
2102
2087
|
"result": <React.Fragment>
|
|
2103
2088
|
<pre>
|
|
2104
2089
|
<code
|
|
@@ -2108,7 +2093,9 @@ test('code block rendering', () => {
|
|
|
2108
2093
|
</code>
|
|
2109
2094
|
</pre>
|
|
2110
2095
|
<pre>
|
|
2111
|
-
<code
|
|
2096
|
+
<code
|
|
2097
|
+
className="language-invalid-language"
|
|
2098
|
+
>
|
|
2112
2099
|
const y = 2;
|
|
2113
2100
|
</code>
|
|
2114
2101
|
</pre>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"safe-mdx.test.js","sourceRoot":"","sources":["../src/safe-mdx.test.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"safe-mdx.test.js","sourceRoot":"","sources":["../src/safe-mdx.test.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/parse.ts
CHANGED
|
@@ -20,7 +20,7 @@ export function mdxParse(code: string) {
|
|
|
20
20
|
* component, it is used for `# heading` but not for `<h1>heading</h1>`.
|
|
21
21
|
*
|
|
22
22
|
*/
|
|
23
|
-
function remarkMarkAndUnravel() {
|
|
23
|
+
export function remarkMarkAndUnravel() {
|
|
24
24
|
return function (tree: Root) {
|
|
25
25
|
visit(tree, function (node, index, parent) {
|
|
26
26
|
let offset = -1
|
|
@@ -101,4 +101,4 @@ const mdxProcessor = remark()
|
|
|
101
101
|
return (tree, file) => {
|
|
102
102
|
file.data.ast = tree
|
|
103
103
|
}
|
|
104
|
-
})
|
|
104
|
+
})
|
package/src/safe-mdx.test.tsx
CHANGED
|
@@ -986,38 +986,7 @@ test('kitchen sink', () => {
|
|
|
986
986
|
`),
|
|
987
987
|
).toMatchInlineSnapshot(`
|
|
988
988
|
{
|
|
989
|
-
"errors": [
|
|
990
|
-
{
|
|
991
|
-
"message": "Unsupported language no-highlight",
|
|
992
|
-
},
|
|
993
|
-
{
|
|
994
|
-
"message": "Unsupported language no-highlight",
|
|
995
|
-
},
|
|
996
|
-
{
|
|
997
|
-
"message": "Unsupported language no-highlight",
|
|
998
|
-
},
|
|
999
|
-
{
|
|
1000
|
-
"message": "Unsupported language no-highlight",
|
|
1001
|
-
},
|
|
1002
|
-
{
|
|
1003
|
-
"message": "Unsupported language no-highlight",
|
|
1004
|
-
},
|
|
1005
|
-
{
|
|
1006
|
-
"message": "Unsupported language no-highlight",
|
|
1007
|
-
},
|
|
1008
|
-
{
|
|
1009
|
-
"message": "Unsupported language no-highlight",
|
|
1010
|
-
},
|
|
1011
|
-
{
|
|
1012
|
-
"message": "Unsupported language no-highlight",
|
|
1013
|
-
},
|
|
1014
|
-
{
|
|
1015
|
-
"message": "Unsupported language no-highlight",
|
|
1016
|
-
},
|
|
1017
|
-
{
|
|
1018
|
-
"message": "Unsupported language no-highlight",
|
|
1019
|
-
},
|
|
1020
|
-
],
|
|
989
|
+
"errors": [],
|
|
1021
990
|
"html": "<link rel="preload" as="image" href="https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png"/><h1>Markdown Kitchen Sink</h1><p>This file is <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" title="">https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet</a> plus a few fixes and additions. Used by <a href="https://github.com/obedm503/bootmark" title="">obedm503/bootmark</a> to <a href="https://obedm503.github.io/bootmark/docs/markdown-cheatsheet.html" title="">demonstrate</a> it's styling features.</p><p>This is intended as a quick reference and showcase. For more complete info, see <a href="http://daringfireball.net/projects/markdown/" title="">John Gruber's original spec</a> and the <a href="http://github.github.com/github-flavored-markdown/" title="">Github-flavored Markdown info page</a>.</p><p>Note that there is also a <a href="./Markdown-Here-Cheatsheet" title="">Cheatsheet specific to Markdown Here</a> if that's what you're looking for. You can also check out <a href="./Other-Markdown-Tools" title="">more Markdown tools</a>.</p><h5>Table of Contents</h5><p><a href="#headers" title="">Headers</a>
|
|
1022
991
|
<a href="#emphasis" title="">Emphasis</a>
|
|
1023
992
|
<a href="#lists" title="">Lists</a>
|
|
@@ -1029,13 +998,13 @@ test('kitchen sink', () => {
|
|
|
1029
998
|
<a href="#html" title="">Inline HTML</a>
|
|
1030
999
|
<a href="#hr" title="">Horizontal Rule</a>
|
|
1031
1000
|
<a href="#lines" title="">Line Breaks</a>
|
|
1032
|
-
<a href="#videos" title="">YouTube Videos</a></p><a name="headers"></a><h2>Headers</h2><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1>Alt-H1</h1><h2>Alt-H2</h2><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1>Alt-H1</h1><h2>Alt-H2</h2><a name="emphasis"></a><h2>Emphasis</h2><pre><code>Emphasis, aka italics, with *asterisks* or _underscores_.
|
|
1001
|
+
<a href="#videos" title="">YouTube Videos</a></p><a name="headers"></a><h2>Headers</h2><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1>Alt-H1</h1><h2>Alt-H2</h2><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1>Alt-H1</h1><h2>Alt-H2</h2><a name="emphasis"></a><h2>Emphasis</h2><pre><code class="language-no-highlight">Emphasis, aka italics, with *asterisks* or _underscores_.
|
|
1033
1002
|
|
|
1034
1003
|
Strong emphasis, aka bold, with **asterisks** or __underscores__.
|
|
1035
1004
|
|
|
1036
1005
|
Combined emphasis with **asterisks and _underscores_**.
|
|
1037
1006
|
|
|
1038
|
-
Strikethrough uses two tildes. ~~Scratch this.~~</code></pre><p>Emphasis, aka italics, with <em>asterisks</em> or <em>underscores</em>.</p><p>Strong emphasis, aka bold, with <strong>asterisks</strong> or <strong>underscores</strong>.</p><p>Combined emphasis with <strong>asterisks and <em>underscores</em></strong>.</p><p>Strikethrough uses two tildes. <del>Scratch this.</del></p><a name="lists"></a><h2>Lists</h2><p>(In this example, leading and trailing spaces are shown with with dots: ⋅)</p><pre><code>1. First ordered list item
|
|
1007
|
+
Strikethrough uses two tildes. ~~Scratch this.~~</code></pre><p>Emphasis, aka italics, with <em>asterisks</em> or <em>underscores</em>.</p><p>Strong emphasis, aka bold, with <strong>asterisks</strong> or <strong>underscores</strong>.</p><p>Combined emphasis with <strong>asterisks and <em>underscores</em></strong>.</p><p>Strikethrough uses two tildes. <del>Scratch this.</del></p><a name="lists"></a><h2>Lists</h2><p>(In this example, leading and trailing spaces are shown with with dots: ⋅)</p><pre><code class="language-no-highlight">1. First ordered list item
|
|
1039
1008
|
2. Another item
|
|
1040
1009
|
⋅⋅* Unordered sub-list.
|
|
1041
1010
|
1. Actual numbers don't matter, just that it's a number
|
|
@@ -1052,7 +1021,7 @@ test('kitchen sink', () => {
|
|
|
1052
1021
|
- Or minuses
|
|
1053
1022
|
+ Or pluses</code></pre><ol start="1"><li><p>First ordered list item</p></li><li><p>Another item</p></li></ol><ul><li><p>Unordered sub-list.</p></li></ul><ol start="1"><li><p>Actual numbers don't matter, just that it's a number</p></li><li><p>Ordered sub-list</p></li><li><p>And another item.</p><p>You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).</p><p>To have a line break without a paragraph, you will need to use two trailing spaces.
|
|
1054
1023
|
Note that this line is separate, but within the same paragraph.
|
|
1055
|
-
(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)</p></li></ol><ul><li><p>Unordered list can use asterisks</p></li></ul><ul><li><p>Or minuses</p></li></ul><ul><li><p>Or pluses</p></li></ul><a name="links"></a><h2>Links</h2><p>There are two ways to create links.</p><pre><code>[I'm an inline-style link](https://www.google.com)
|
|
1024
|
+
(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)</p></li></ol><ul><li><p>Unordered list can use asterisks</p></li></ul><ul><li><p>Or minuses</p></li></ul><ul><li><p>Or pluses</p></li></ul><a name="links"></a><h2>Links</h2><p>There are two ways to create links.</p><pre><code class="language-no-highlight">[I'm an inline-style link](https://www.google.com)
|
|
1056
1025
|
|
|
1057
1026
|
[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
|
|
1058
1027
|
|
|
@@ -1074,7 +1043,7 @@ test('kitchen sink', () => {
|
|
|
1074
1043
|
[1]: http://slashdot.org
|
|
1075
1044
|
[link text itself]: http://www.reddit.com</code></pre><p><a href="https://www.google.com" title="">I'm an inline-style link</a></p><p><a href="https://www.google.com" title="Google's Homepage">I'm an inline-style link with title</a></p><p><a href="https://www.mozilla.org">I'm a reference-style link</a></p><p><a href="../blob/master/LICENSE" title="">I'm a relative reference to a repository file</a></p><p><a href="http://slashdot.org">You can use numbers for reference-style link definitions</a></p><p>Or leave it empty and use the <a href="http://www.reddit.com">link text itself</a>.</p><p>URLs and URLs in angle brackets will automatically get turned into links.
|
|
1076
1045
|
<a href="http://www.example.com" title="">http://www.example.com</a> and sometimes
|
|
1077
|
-
example.com (but not on Github, for example).</p><p>Some text to show that the reference links can follow later.</p><a name="images"></a><h2>Images</h2><pre><code>Here's our logo (hover to see the title text):
|
|
1046
|
+
example.com (but not on Github, for example).</p><p>Some text to show that the reference links can follow later.</p><a name="images"></a><h2>Images</h2><pre><code class="language-no-highlight">Here's our logo (hover to see the title text):
|
|
1078
1047
|
|
|
1079
1048
|
Inline-style:
|
|
1080
1049
|

|
|
@@ -1084,13 +1053,13 @@ test('kitchen sink', () => {
|
|
|
1084
1053
|
|
|
1085
1054
|
[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"</code></pre><p>Here's our logo (hover to see the title text):</p><p>Inline-style:
|
|
1086
1055
|
<img src="https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png" alt="alt text" title="Logo Title Text 1"/></p><p>Reference-style:
|
|
1087
|
-
</p><a name="code"></a><h2>Code and Syntax Highlighting</h2><p>Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and <em>Markdown Here</em> -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. <em>Markdown Here</em> supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the <a href="http://softwaremaniacs.org/media/soft/highlight/test.html" title="">highlight.js demo page</a>.</p><pre><code>Inline \`code\` has \`back-ticks around\` it.</code></pre><p>Inline <code>code</code> has <code>back-ticks around</code> it.</p><p>Blocks of code are either fenced by lines with three back-ticks <code>\`\`\`</code>, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.</p><pre><code class="language-javascript">var s = "JavaScript syntax highlighting";
|
|
1056
|
+
</p><a name="code"></a><h2>Code and Syntax Highlighting</h2><p>Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and <em>Markdown Here</em> -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. <em>Markdown Here</em> supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the <a href="http://softwaremaniacs.org/media/soft/highlight/test.html" title="">highlight.js demo page</a>.</p><pre><code class="language-no-highlight">Inline \`code\` has \`back-ticks around\` it.</code></pre><p>Inline <code>code</code> has <code>back-ticks around</code> it.</p><p>Blocks of code are either fenced by lines with three back-ticks <code>\`\`\`</code>, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.</p><pre><code class="language-javascript">var s = "JavaScript syntax highlighting";
|
|
1088
1057
|
alert(s);</code></pre><pre><code class="language-python">s = "Python syntax highlighting"
|
|
1089
1058
|
print s</code></pre><pre><code>No language indicated, so no syntax highlighting.
|
|
1090
1059
|
But let's throw in a &lt;b&gt;tag&lt;/b&gt;.</code></pre><pre><code class="language-javascript">var s = "JavaScript syntax highlighting";
|
|
1091
1060
|
alert(s);</code></pre><pre><code class="language-python">s = "Python syntax highlighting"
|
|
1092
1061
|
print s</code></pre><pre><code>No language indicated, so no syntax highlighting in Markdown Here (varies on Github).
|
|
1093
|
-
But let's throw in a <b>tag</b>.</code></pre><a name="tables"></a><h2>Tables</h2><p>Tables aren't part of the core Markdown spec, but they are part of GFM and <em>Markdown Here</em> supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.</p><pre><code>Colons can be used to align columns.
|
|
1062
|
+
But let's throw in a <b>tag</b>.</code></pre><a name="tables"></a><h2>Tables</h2><p>Tables aren't part of the core Markdown spec, but they are part of GFM and <em>Markdown Here</em> supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.</p><pre><code class="language-no-highlight">Colons can be used to align columns.
|
|
1094
1063
|
|
|
1095
1064
|
| Tables | Are | Cool |
|
|
1096
1065
|
| ------------- |:-------------:| -----:|
|
|
@@ -1105,13 +1074,13 @@ test('kitchen sink', () => {
|
|
|
1105
1074
|
Markdown | Less | Pretty
|
|
1106
1075
|
--- | --- | ---
|
|
1107
1076
|
*Still* | \`renders\` | **nicely**
|
|
1108
|
-
1 | 2 | 3</code></pre><p>Colons can be used to align columns.</p><table><thead><tr class=""><td class="">Tables</td><td class="">Are</td><td class="">Cool</td></tr></thead><tbody><tr class=""><td class="">col 3 is</td><td class="">right-aligned</td><td class="">$1600</td></tr><tr class=""><td class="">col 2 is</td><td class="">centered</td><td class="">$12</td></tr><tr class=""><td class="">zebra stripes</td><td class="">are neat</td><td class="">$1</td></tr></tbody></table><p>There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.</p><table><thead><tr class=""><td class="">Markdown</td><td class="">Less</td><td class="">Pretty</td></tr></thead><tbody><tr class=""><td class=""><em>Still</em></td><td class=""><code>renders</code></td><td class=""><strong>nicely</strong></td></tr><tr class=""><td class="">1</td><td class="">2</td><td class="">3</td></tr></tbody></table><a name="blockquotes"></a><h2>Blockquotes</h2><pre><code>> Blockquotes are very handy in email to emulate reply text.
|
|
1077
|
+
1 | 2 | 3</code></pre><p>Colons can be used to align columns.</p><table><thead><tr class=""><td class="">Tables</td><td class="">Are</td><td class="">Cool</td></tr></thead><tbody><tr class=""><td class="">col 3 is</td><td class="">right-aligned</td><td class="">$1600</td></tr><tr class=""><td class="">col 2 is</td><td class="">centered</td><td class="">$12</td></tr><tr class=""><td class="">zebra stripes</td><td class="">are neat</td><td class="">$1</td></tr></tbody></table><p>There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.</p><table><thead><tr class=""><td class="">Markdown</td><td class="">Less</td><td class="">Pretty</td></tr></thead><tbody><tr class=""><td class=""><em>Still</em></td><td class=""><code>renders</code></td><td class=""><strong>nicely</strong></td></tr><tr class=""><td class="">1</td><td class="">2</td><td class="">3</td></tr></tbody></table><a name="blockquotes"></a><h2>Blockquotes</h2><pre><code class="language-no-highlight">> Blockquotes are very handy in email to emulate reply text.
|
|
1109
1078
|
> This line is part of the same quote.
|
|
1110
1079
|
|
|
1111
1080
|
Quote break.
|
|
1112
1081
|
|
|
1113
1082
|
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.</code></pre><blockquote><p>Blockquotes are very handy in email to emulate reply text.
|
|
1114
|
-
This line is part of the same quote.</p></blockquote><p>Quote break.</p><blockquote><p>This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can <em>put</em> <strong>Markdown</strong> into a blockquote.</p></blockquote><a name="html"></a><h2>Inline HTML</h2><p>You can also use raw HTML in your Markdown, and it'll mostly work pretty well.</p><pre><code><dl>
|
|
1083
|
+
This line is part of the same quote.</p></blockquote><p>Quote break.</p><blockquote><p>This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can <em>put</em> <strong>Markdown</strong> into a blockquote.</p></blockquote><a name="html"></a><h2>Inline HTML</h2><p>You can also use raw HTML in your Markdown, and it'll mostly work pretty well.</p><pre><code class="language-no-highlight"><dl>
|
|
1115
1084
|
<dt>Definition list</dt>
|
|
1116
1085
|
<dd>Is something people use sometimes.</dd>
|
|
1117
1086
|
|
|
@@ -1135,9 +1104,9 @@ test('kitchen sink', () => {
|
|
|
1135
1104
|
|
|
1136
1105
|
This line is also a separate paragraph, but...
|
|
1137
1106
|
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.</code></pre><p>Here's a line for us to start with.</p><p>This line is separated from the one above by two newlines, so it will be a <em>separate paragraph</em>.</p><p>This line is also begins a separate paragraph, but...
|
|
1138
|
-
This line is only separated by a single newline, so it's a separate line in the <em>same paragraph</em>.</p><p>(Technical note: <em>Markdown Here</em> uses GFM line breaks, so there's no need to use MD's two-space line breaks.)</p><a name="videos"></a><h2>YouTube Videos</h2><p>They can't be added directly but you can add an image with a link to the video like this:</p><pre><code><a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
|
|
1107
|
+
This line is only separated by a single newline, so it's a separate line in the <em>same paragraph</em>.</p><p>(Technical note: <em>Markdown Here</em> uses GFM line breaks, so there's no need to use MD's two-space line breaks.)</p><a name="videos"></a><h2>YouTube Videos</h2><p>They can't be added directly but you can add an image with a link to the video like this:</p><pre><code class="language-no-highlight"><a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
|
|
1139
1108
|
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg"
|
|
1140
|
-
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a></code></pre><p>Or, in pure Markdown, but losing the image sizing and border:</p><pre><code>[](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)</code></pre>",
|
|
1109
|
+
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a></code></pre><p>Or, in pure Markdown, but losing the image sizing and border:</p><pre><code class="language-no-highlight">[](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)</code></pre>",
|
|
1141
1110
|
"result": <React.Fragment>
|
|
1142
1111
|
<h1>
|
|
1143
1112
|
Markdown Kitchen Sink
|
|
@@ -1366,7 +1335,9 @@ test('kitchen sink', () => {
|
|
|
1366
1335
|
Emphasis
|
|
1367
1336
|
</h2>
|
|
1368
1337
|
<pre>
|
|
1369
|
-
<code
|
|
1338
|
+
<code
|
|
1339
|
+
className="language-no-highlight"
|
|
1340
|
+
>
|
|
1370
1341
|
Emphasis, aka italics, with *asterisks* or _underscores_.
|
|
1371
1342
|
|
|
1372
1343
|
Strong emphasis, aka bold, with **asterisks** or __underscores__.
|
|
@@ -1424,7 +1395,9 @@ test('kitchen sink', () => {
|
|
|
1424
1395
|
(In this example, leading and trailing spaces are shown with with dots: ⋅)
|
|
1425
1396
|
</p>
|
|
1426
1397
|
<pre>
|
|
1427
|
-
<code
|
|
1398
|
+
<code
|
|
1399
|
+
className="language-no-highlight"
|
|
1400
|
+
>
|
|
1428
1401
|
1. First ordered list item
|
|
1429
1402
|
2. Another item
|
|
1430
1403
|
⋅⋅* Unordered sub-list.
|
|
@@ -1522,7 +1495,9 @@ test('kitchen sink', () => {
|
|
|
1522
1495
|
There are two ways to create links.
|
|
1523
1496
|
</p>
|
|
1524
1497
|
<pre>
|
|
1525
|
-
<code
|
|
1498
|
+
<code
|
|
1499
|
+
className="language-no-highlight"
|
|
1500
|
+
>
|
|
1526
1501
|
[I'm an inline-style link](https://www.google.com)
|
|
1527
1502
|
|
|
1528
1503
|
[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
|
|
@@ -1615,7 +1590,9 @@ test('kitchen sink', () => {
|
|
|
1615
1590
|
Images
|
|
1616
1591
|
</h2>
|
|
1617
1592
|
<pre>
|
|
1618
|
-
<code
|
|
1593
|
+
<code
|
|
1594
|
+
className="language-no-highlight"
|
|
1595
|
+
>
|
|
1619
1596
|
Here's our logo (hover to see the title text):
|
|
1620
1597
|
|
|
1621
1598
|
Inline-style:
|
|
@@ -1668,7 +1645,9 @@ test('kitchen sink', () => {
|
|
|
1668
1645
|
.
|
|
1669
1646
|
</p>
|
|
1670
1647
|
<pre>
|
|
1671
|
-
<code
|
|
1648
|
+
<code
|
|
1649
|
+
className="language-no-highlight"
|
|
1650
|
+
>
|
|
1672
1651
|
Inline \`code\` has \`back-ticks around\` it.
|
|
1673
1652
|
</code>
|
|
1674
1653
|
</pre>
|
|
@@ -1748,7 +1727,9 @@ test('kitchen sink', () => {
|
|
|
1748
1727
|
supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.
|
|
1749
1728
|
</p>
|
|
1750
1729
|
<pre>
|
|
1751
|
-
<code
|
|
1730
|
+
<code
|
|
1731
|
+
className="language-no-highlight"
|
|
1732
|
+
>
|
|
1752
1733
|
Colons can be used to align columns.
|
|
1753
1734
|
|
|
1754
1735
|
| Tables | Are | Cool |
|
|
@@ -1931,7 +1912,9 @@ test('kitchen sink', () => {
|
|
|
1931
1912
|
Blockquotes
|
|
1932
1913
|
</h2>
|
|
1933
1914
|
<pre>
|
|
1934
|
-
<code
|
|
1915
|
+
<code
|
|
1916
|
+
className="language-no-highlight"
|
|
1917
|
+
>
|
|
1935
1918
|
> Blockquotes are very handy in email to emulate reply text.
|
|
1936
1919
|
> This line is part of the same quote.
|
|
1937
1920
|
|
|
@@ -1972,7 +1955,9 @@ test('kitchen sink', () => {
|
|
|
1972
1955
|
You can also use raw HTML in your Markdown, and it'll mostly work pretty well.
|
|
1973
1956
|
</p>
|
|
1974
1957
|
<pre>
|
|
1975
|
-
<code
|
|
1958
|
+
<code
|
|
1959
|
+
className="language-no-highlight"
|
|
1960
|
+
>
|
|
1976
1961
|
<dl>
|
|
1977
1962
|
<dt>Definition list</dt>
|
|
1978
1963
|
<dd>Is something people use sometimes.</dd>
|
|
@@ -2103,7 +2088,9 @@ test('kitchen sink', () => {
|
|
|
2103
2088
|
They can't be added directly but you can add an image with a link to the video like this:
|
|
2104
2089
|
</p>
|
|
2105
2090
|
<pre>
|
|
2106
|
-
<code
|
|
2091
|
+
<code
|
|
2092
|
+
className="language-no-highlight"
|
|
2093
|
+
>
|
|
2107
2094
|
<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
|
|
2108
2095
|
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg"
|
|
2109
2096
|
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
|
|
@@ -2113,7 +2100,9 @@ test('kitchen sink', () => {
|
|
|
2113
2100
|
Or, in pure Markdown, but losing the image sizing and border:
|
|
2114
2101
|
</p>
|
|
2115
2102
|
<pre>
|
|
2116
|
-
<code
|
|
2103
|
+
<code
|
|
2104
|
+
className="language-no-highlight"
|
|
2105
|
+
>
|
|
2117
2106
|
[](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
|
|
2118
2107
|
</code>
|
|
2119
2108
|
</pre>
|
|
@@ -2137,12 +2126,8 @@ test('code block rendering', () => {
|
|
|
2137
2126
|
`),
|
|
2138
2127
|
).toMatchInlineSnapshot(`
|
|
2139
2128
|
{
|
|
2140
|
-
"errors": [
|
|
2141
|
-
|
|
2142
|
-
"message": "Unsupported language invalid-language",
|
|
2143
|
-
},
|
|
2144
|
-
],
|
|
2145
|
-
"html": "<pre><code class="language-typescript">const x = 1;</code></pre><pre><code>const y = 2;</code></pre>",
|
|
2129
|
+
"errors": [],
|
|
2130
|
+
"html": "<pre><code class="language-typescript">const x = 1;</code></pre><pre><code class="language-invalid-language">const y = 2;</code></pre>",
|
|
2146
2131
|
"result": <React.Fragment>
|
|
2147
2132
|
<pre>
|
|
2148
2133
|
<code
|
|
@@ -2152,7 +2137,9 @@ test('code block rendering', () => {
|
|
|
2152
2137
|
</code>
|
|
2153
2138
|
</pre>
|
|
2154
2139
|
<pre>
|
|
2155
|
-
<code
|
|
2140
|
+
<code
|
|
2141
|
+
className="language-invalid-language"
|
|
2142
|
+
>
|
|
2156
2143
|
const y = 2;
|
|
2157
2144
|
</code>
|
|
2158
2145
|
</pre>
|