487 lines
13 KiB
HTML
487 lines
13 KiB
HTML
<!doctype html>
|
||
<meta charset=utf-8>
|
||
<title>markdown.raw()</title>
|
||
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||
<link href='markdown.css' rel='stylesheet'>
|
||
<meta name="og:title" content="markdown.raw()">
|
||
<meta name="og:site_name" content="markdown.raw()">
|
||
<meta name="description" content="CSS style to make HTML look like raw markdown">
|
||
<meta name="og:description" content="CSS style to make HTML look like raw markdown">
|
||
<meta name="og:type" content="website">
|
||
<meta name="og:url" content="https://dym.sh/markdown-raw/">
|
||
<meta name="og:image" content="https://dym.sh/markdown-raw/th.png">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
|
||
<table cellpadding=20 cellspacing=20 width=100%>
|
||
<thead>
|
||
<th colspan=2>
|
||
markdown.raw() – CSS style to make HTML look like raw markdown
|
||
<br><br>by <a href='https://dym.sh'>Dym Sohin</a>
|
||
<br><br>code <a href='https://source.garden/styles/markdown-raw/'>repo</a>
|
||
<br><br>
|
||
</th>
|
||
</thead>
|
||
|
||
<tr>
|
||
<td align=left dir=ltr>left-to-right</th>
|
||
<td align=right dir=rtl>right-to-left</th>
|
||
</tr>
|
||
|
||
<tr><td dir=ltr>
|
||
<h1>h1 – blockquote, abbr</h1>
|
||
<blockquote>
|
||
blockquote
|
||
<br>second line
|
||
</blockquote>
|
||
<article>
|
||
<aside>abbr with a title</aside>
|
||
<abbr title='resonance VS avalanche'>CSS</abbr>
|
||
</article>
|
||
|
||
<h2>h2 – a, abbr, img</h2>
|
||
<p><a href='https://just.link'>link</a></p>
|
||
<p><a href='https://markdown.md' title='site about markdown'>link with a "title" attribute</a></p>
|
||
<p><img src='./img.png' alt='this is alt text' width=24 height=24></p>
|
||
<p><img src='./img.png' alt='alt_text' title='img_title' width=24 height=24></p>
|
||
|
||
<h3>h3 – code, b, i, u, s, del, ins</h3>
|
||
<pre><code>multi_lined( ) {
|
||
code;
|
||
block;
|
||
}</code></pre>
|
||
<p>some text around <code>inline code</code>; and <code title='some title'>inline code</code></p>
|
||
<p><b>bold</b> <b title='some title'>bold</b></p>
|
||
<p><i>italics</i> <i title='some title'>italics</i></p>
|
||
<p><u>uinderlined</u> <u title='some title'>uinderlined</u></p>
|
||
<p><s>striked</s> <s title='some title'>striked</s></p>
|
||
<p><ins>inserted</ins> <ins title='some title'>inserted</ins></p>
|
||
<p><del>deleted</del> <del title='some title'>deleted</del></p>
|
||
|
||
<h4>h4 – lists</h4>
|
||
<ul>
|
||
<li>unordered list item</li>
|
||
<li>another one</li>
|
||
<li>now list iside a list:
|
||
<ul>
|
||
<li>unordered list item</li>
|
||
<li>another one</li>
|
||
<li>lvl 3:
|
||
<ul>
|
||
<li>unordered list item</li>
|
||
<li>another one</li>
|
||
<li>just one more</li>
|
||
</ul>
|
||
</li>
|
||
<li>back to lvl 2</li>
|
||
</ul>
|
||
</li>
|
||
<li>back to lvl 1</li>
|
||
</ul>
|
||
|
||
<ol>
|
||
<li>ordered list item at lvl 1</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>another one</li>
|
||
<li>next is lvl 2
|
||
<ol>
|
||
<li>ordered list inside an ordered list</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>next is lvl 3
|
||
<ol>
|
||
<li>ol_level_3</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>too deep?</li>
|
||
</ol>
|
||
</li>
|
||
<li>one back to lvl 2</li>
|
||
<li>
|
||
<ol>
|
||
<li>lvl 3 w/o introductory text</li>
|
||
</ol>
|
||
</li>
|
||
</ol>
|
||
</li>
|
||
<li>one back to lvl 1</li>
|
||
<li>
|
||
<ol>
|
||
<li>lvl 2 w/o introductory text</li>
|
||
</ol>
|
||
</li>
|
||
</ol>
|
||
|
||
<h5>h5 – inputs, labels, other form-elements</h5>
|
||
|
||
<article>
|
||
<input type="text" value="input type text" />
|
||
</article>
|
||
|
||
<article>
|
||
<input type="checkbox"
|
||
name="chk_1"
|
||
id="chk_1"
|
||
value="1"
|
||
checked
|
||
/>
|
||
<label for="chk_1">checkbox with label [1/2]</label>
|
||
<input type="checkbox"
|
||
name="chk_2"
|
||
id="chk_2"
|
||
value="1"
|
||
/>
|
||
<label for="chk_2">checkbox with label [2/2]</label>
|
||
</article>
|
||
|
||
<article>
|
||
<input type="radio"
|
||
name="radio"
|
||
id="radio-1"
|
||
value="1"
|
||
checked
|
||
/>
|
||
<label for="radio-1">radio with label (1/2)</label>
|
||
|
||
<input type="radio"
|
||
name="radio"
|
||
id="radio-2"
|
||
value="2"
|
||
/>
|
||
<label for="radio-2">radio with label (2/2)</label>
|
||
</article>
|
||
|
||
|
||
<article>
|
||
<aside>details and summary</aside>
|
||
<details>
|
||
<summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary>
|
||
A keyboard.
|
||
</details>
|
||
</article>
|
||
|
||
<h6>h6 – aside, and the rest</h6>
|
||
|
||
<article>
|
||
<aside>this is aside with a somewhat long paragrath</aside>
|
||
<p>long random text The HTML aside element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.</p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>cite</aside>
|
||
<p>some <cite>inline citation</cite>, not a blockquote</p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>data</aside>
|
||
<p>
|
||
<data value="398">Mini Ketchup</data>,
|
||
<data value="399">Jumbo Ketchup</data>,
|
||
<data value="400">Mega Jumbo Ketchup</data>
|
||
</p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>dfn</aside>
|
||
<p><dfn id="def-validator">validator</dfn></p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>kbd</aside>
|
||
<p><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>R</kbd></p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>mark</aside>
|
||
<p>Several species of <mark>salamander</mark> inhabit the temperate rainforest of the Pacific Northwest.</p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>q</aside>
|
||
<p><q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921" title='copypasted from MDN'>I'm sorry, Dave. I'm afraid I can't do that.</q></p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>ruby &co</aside>
|
||
<p><ruby>明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp></ruby></p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>wbr</aside>
|
||
<p>Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz</p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>var</aside>
|
||
<p>The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length, <var>w</var> the width and <var>h</var> the height of the box.</p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>hr</aside>
|
||
text above hr
|
||
<hr>
|
||
text below hr
|
||
</article>
|
||
|
||
<article>
|
||
<aside>sup</aside>
|
||
<p><var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var></p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>sub</aside>
|
||
<p>Almost every developer's favorite molecule is
|
||
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, also known as "caffeine."</p>
|
||
</article>
|
||
|
||
</td>
|
||
|
||
|
||
<td dir=rtl>
|
||
<h1>h1 – blockquote, abbr</h1>
|
||
<blockquote>
|
||
blockquote
|
||
<br>second line
|
||
</blockquote>
|
||
<article>
|
||
<aside>abbr with a title</aside>
|
||
<abbr title='resonance VS avalanche'>CSS</abbr>
|
||
</article>
|
||
|
||
<h2>h2 – a, abbr, img</h2>
|
||
<p><a href='https://just.link'>link</a></p>
|
||
<p><a href='https://markdown.md' title='site about markdown'>link with a "title" attribute</a></p>
|
||
<p><img src='./img.png' alt='this is alt text' width=24 height=24></p>
|
||
<p><img src='./img.png' alt='alt_text' title='img_title' width=24 height=24></p>
|
||
|
||
<h3>h3 – code, b, i, u, s, del, ins</h3>
|
||
<pre><code>multi_lined( ) {
|
||
code;
|
||
block;
|
||
}</code></pre>
|
||
<p>some text around <code>inline code</code>; and <code title='some title'>inline code</code></p>
|
||
<p><b>bold</b> <b title='some title'>bold</b></p>
|
||
<p><i>italics</i> <i title='some title'>italics</i></p>
|
||
<p><u>uinderlined</u> <u title='some title'>uinderlined</u></p>
|
||
<p><s>striked</s> <s title='some title'>striked</s></p>
|
||
<p><ins>inserted</ins> <ins title='some title'>inserted</ins></p>
|
||
<p><del>deleted</del> <del title='some title'>deleted</del></p>
|
||
|
||
<h4>h4 – lists</h4>
|
||
<ul>
|
||
<li>unordered list item</li>
|
||
<li>another one</li>
|
||
<li>now list iside a list:
|
||
<ul>
|
||
<li>unordered list item</li>
|
||
<li>another one</li>
|
||
<li>lvl 3:
|
||
<ul>
|
||
<li>unordered list item</li>
|
||
<li>another one</li>
|
||
<li>just one more</li>
|
||
</ul>
|
||
</li>
|
||
<li>back to lvl 2</li>
|
||
</ul>
|
||
</li>
|
||
<li>back to lvl 1</li>
|
||
</ul>
|
||
|
||
<ol>
|
||
<li>ordered list item at lvl 1</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>another one</li>
|
||
<li>next is lvl 2
|
||
<ol>
|
||
<li>ordered list inside an ordered list</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>next is lvl 3
|
||
<ol>
|
||
<li>ol_level_3</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>many numbers</li>
|
||
<li>too deep?</li>
|
||
</ol>
|
||
</li>
|
||
<li>one back to lvl 2</li>
|
||
<li>
|
||
<ol>
|
||
<li>lvl 3 w/o introductory text</li>
|
||
</ol>
|
||
</li>
|
||
</ol>
|
||
</li>
|
||
<li>one back to lvl 1</li>
|
||
<li>
|
||
<ol>
|
||
<li>lvl 2 w/o introductory text</li>
|
||
</ol>
|
||
</li>
|
||
</ol>
|
||
|
||
<h5>h5 – inputs, labels, other form-elements</h5>
|
||
|
||
<article>
|
||
<input type="text" value="input type text" />
|
||
</article>
|
||
|
||
<article>
|
||
<input type="checkbox"
|
||
name="chk_1_rtl"
|
||
id="chk_1_rtl"
|
||
value="1"
|
||
checked
|
||
/>
|
||
<label for="chk_1_rtl">checkbox with label [1/2]</label>
|
||
<input type="checkbox"
|
||
name="chk_2_rtl"
|
||
id="chk_2_rtl"
|
||
value="1"
|
||
/>
|
||
<label for="chk_2_rtl">checkbox with label [2/2]</label>
|
||
</article>
|
||
|
||
<article>
|
||
<input type="radio"
|
||
name="radio_rtl"
|
||
id="radio_rtl-1"
|
||
value="1"
|
||
checked
|
||
/>
|
||
<label for="radio_rtl-1">radio with label (1/2)</label>
|
||
|
||
<input type="radio"
|
||
name="radio_rtl"
|
||
id="radio_rtl-2"
|
||
value="2"
|
||
/>
|
||
<label for="radio_rtl-2">radio with label (2/2)</label>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>details and summary</aside>
|
||
<details>
|
||
<summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary>
|
||
A keyboard.
|
||
</details>
|
||
</article>
|
||
|
||
<h6>h6 – aside, and the rest</h6>
|
||
|
||
<article>
|
||
<aside>this is aside with a somewhat long paragrath</aside>
|
||
<p>long random text The HTML aside element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.</p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>cite</aside>
|
||
<p>some <cite>inline citation</cite>, not a blockquote</p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>data</aside>
|
||
<p>
|
||
<data value="398">Mini Ketchup</data>,
|
||
<data value="399">Jumbo Ketchup</data>,
|
||
<data value="400">Mega Jumbo Ketchup</data>
|
||
</p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>dfn</aside>
|
||
<p><dfn id="def-validator">validator</dfn></p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>kbd</aside>
|
||
<p><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>R</kbd></p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>mark</aside>
|
||
<p>Several species of <mark>salamander</mark> inhabit the temperate rainforest of the Pacific Northwest.</p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>q</aside>
|
||
<p><q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921" title='copypasted from MDN'>I'm sorry, Dave. I'm afraid I can't do that.</q></p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>ruby &co</aside>
|
||
<p><ruby>明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp></ruby></p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>wbr</aside>
|
||
<p>Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz</p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>var</aside>
|
||
<p>The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length, <var>w</var> the width and <var>h</var> the height of the box.</p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>hr</aside>
|
||
text above hr
|
||
<hr>
|
||
text below hr
|
||
</article>
|
||
|
||
<article>
|
||
<aside>sup</aside>
|
||
<p><var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var></p>
|
||
</article>
|
||
|
||
<article>
|
||
<aside>sub</aside>
|
||
<p>Almost every developer's favorite molecule is
|
||
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, also known as "caffeine."</p>
|
||
</article>
|
||
|
||
</table>
|