some fixes
This commit is contained in:
parent
f97d48483d
commit
fe2285bbfb
17
README.md
17
README.md
|
|
@ -1,3 +1,16 @@
|
||||||
# markdown-raw
|
# markdown.raw()
|
||||||
|
|
||||||
CSS style to make HTML look like raw markdown
|
> CSS style to make HTML look like raw markdown
|
||||||
|
|
||||||
|
- leading symbols are unshifted
|
||||||
|
- right-to-left support
|
||||||
|
- uses CSS4 [`:is()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:is#Browser_compatibility)
|
||||||
|
- default color theme is monokai
|
||||||
|
- css-code itself is [haskell-styled](https://en.wikipedia.org/wiki/Indentation_style#Haskell_style)
|
||||||
|
- includes some [extended markdown syntax](https://markdownguide.org/extended-syntax/)
|
||||||
|
|
||||||
|
## preview
|
||||||
|
- live: https://dym.sh/markdown-raw/live/
|
||||||
|
- codepen: https://codepen.io/dym-sh/pen/XWKbYVP/left/?editors=1100
|
||||||
|
|
||||||
|
<a href='./preview.png'><img height=600 border=2 alt='preview' src='./preview.png'></a>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,479 @@
|
||||||
|
<!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'>
|
||||||
|
|
||||||
|
|
||||||
|
<table cellpadding=20 cellspacing=20 width=100%>
|
||||||
|
<thead>
|
||||||
|
<th colspan=2>
|
||||||
|
markdown.raw() – CSS style to make HTML look like raw markdown
|
||||||
|
<br><br>uses CSS4 <a href='https://developer.mozilla.org/en-US/docs/Web/CSS/:is#Browser_compatibility'>:is()</a>
|
||||||
|
<br><br>more info on <a href='https://github.com/dym-sh/markdown-raw'>github</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>
|
||||||
|
|
@ -0,0 +1,494 @@
|
||||||
|
:root
|
||||||
|
{ --text : hsl( 60, 36%, 96% )
|
||||||
|
; --bg : hsl( 70, 8%, 15% )
|
||||||
|
; --font-size : 16pt
|
||||||
|
; --line-height : 1.3em
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
* { margin : 0
|
||||||
|
; padding : 0
|
||||||
|
; word-wrap : break-word
|
||||||
|
; text-decoration : none
|
||||||
|
; color : var( --text )
|
||||||
|
; float : none
|
||||||
|
; font-size : var( --font-size )
|
||||||
|
; line-height : var( --line-height )
|
||||||
|
; font-weight : normal
|
||||||
|
; font-style : normal
|
||||||
|
; font-family : 'Consolas'
|
||||||
|
, 'Monaco'
|
||||||
|
, 'DejaVu Sans Mono'
|
||||||
|
, 'PT Mono'
|
||||||
|
, 'Courier New'
|
||||||
|
, monospace
|
||||||
|
}
|
||||||
|
|
||||||
|
body
|
||||||
|
{ background : var( --bg )
|
||||||
|
; min-width : 25em
|
||||||
|
; max-width : 80vw
|
||||||
|
; margin : 0 auto
|
||||||
|
; padding : 2em 10em
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6
|
||||||
|
, blockquote
|
||||||
|
, pre
|
||||||
|
, ol
|
||||||
|
, ul
|
||||||
|
, li
|
||||||
|
, article
|
||||||
|
{ position : relative }
|
||||||
|
|
||||||
|
article + article
|
||||||
|
{ margin-top : 2.5rem }
|
||||||
|
|
||||||
|
:is( h1, h2, h3, h4, h5, h6, blockquote, li, pre )::before
|
||||||
|
, aside
|
||||||
|
{ position : absolute
|
||||||
|
; right : 100%
|
||||||
|
; margin-right : 1em
|
||||||
|
; display : inline-block
|
||||||
|
; text-align : right
|
||||||
|
}
|
||||||
|
|
||||||
|
:is( h1, h2, h3, h4, h5, h6, blockquote, li, pre )[dir=rtl]::before
|
||||||
|
, [dir=rtl] :is( h1, h2, h3, h4, h5, h6, blockquote, li, pre )::before
|
||||||
|
, [dir=rtl] aside, aside[dir=rtl]
|
||||||
|
/*
|
||||||
|
, :is( h1, h2, h3, h4, h5, h6, blockquote, li, pre ):dir(rtl)::before
|
||||||
|
, :dir(rtl) :is( h1, h2, h3, h4, h5, h6, blockquote, li, pre )::before
|
||||||
|
*/
|
||||||
|
{ right : unset
|
||||||
|
; left : 100%
|
||||||
|
; margin-right : unset
|
||||||
|
; margin-left : 1em
|
||||||
|
; text-align : left
|
||||||
|
}
|
||||||
|
h1::before
|
||||||
|
{ content : '#' }
|
||||||
|
h2::before
|
||||||
|
{ content : '##' }
|
||||||
|
h3::before
|
||||||
|
{ content : '###' }
|
||||||
|
h4::before
|
||||||
|
{ content : '####' }
|
||||||
|
h5::before
|
||||||
|
{ content : '#####' }
|
||||||
|
h6::before
|
||||||
|
{ content : '######' }
|
||||||
|
blockquote::before
|
||||||
|
{ content : '>' }
|
||||||
|
ul > li::before
|
||||||
|
{ content : '-' }
|
||||||
|
ul ul > li::before
|
||||||
|
{ content : '-\00a0-' }
|
||||||
|
ul ul ul > li::before
|
||||||
|
{ content : '-\00a0-\00a0-' }
|
||||||
|
pre::before
|
||||||
|
{ content : '```' }
|
||||||
|
|
||||||
|
li
|
||||||
|
{ list-style : none }
|
||||||
|
|
||||||
|
ol
|
||||||
|
{ counter-reset : ol_lvl_1 }
|
||||||
|
ol ol
|
||||||
|
{ counter-reset : ol_lvl_2 }
|
||||||
|
ol ol ol
|
||||||
|
{ counter-reset : ol_lvl_3 }
|
||||||
|
|
||||||
|
ol > li::before
|
||||||
|
{ content : counter( ol_lvl_1 ) '.'
|
||||||
|
; counter-increment : ol_lvl_1
|
||||||
|
}
|
||||||
|
ol > li:has(ol:first-child)::before
|
||||||
|
{ display : none }
|
||||||
|
ol > li > ol:first-child > li::before
|
||||||
|
{ background : var( --bg ) }
|
||||||
|
|
||||||
|
ol ol > li::before
|
||||||
|
{ content : counter( ol_lvl_1 ) '.' counter( ol_lvl_2 ) '.'
|
||||||
|
; counter-increment : ol_lvl_2
|
||||||
|
}
|
||||||
|
[dir=rtl] ol ol > li::before
|
||||||
|
, ol[dir=rtl] ol > li::before
|
||||||
|
, ol ol[dir=rtl] > li::before
|
||||||
|
, ol ol > li[dir=rtl]::before
|
||||||
|
/*, ol ol > li:dir(rtl)::before*/
|
||||||
|
{ content : counter( ol_lvl_2 ) '.' counter( ol_lvl_1 ) '.'
|
||||||
|
}
|
||||||
|
|
||||||
|
ol ol > li:has(ol:first-child)::before
|
||||||
|
{ display : none }
|
||||||
|
ol ol > li > ol:first-child > li::before
|
||||||
|
{ background : var( --bg ) }
|
||||||
|
|
||||||
|
ol ol ol > li::before
|
||||||
|
{ content : counter( ol_lvl_1 ) '.' counter( ol_lvl_2 ) '.' counter( ol_lvl_3 ) '.'
|
||||||
|
; counter-increment : ol_lvl_3
|
||||||
|
}
|
||||||
|
[dir=rtl] ol ol ol > li::before
|
||||||
|
, ol[dir=rtl] ol ol > li::before
|
||||||
|
, ol ol[dir=rtl] ol > li::before
|
||||||
|
, ol ol ol[dir=rtl] > li::before
|
||||||
|
, ol ol ol > li[dir=rtl]::before
|
||||||
|
/*, ol ol ol > li:dir(rtl)::before*/
|
||||||
|
{ content : counter( ol_lvl_3 ) '.' counter( ol_lvl_2 ) '.' counter( ol_lvl_1 ) '.' }
|
||||||
|
|
||||||
|
[title]::after
|
||||||
|
{ content : '/*' attr(title) '*/'
|
||||||
|
; display : inline-block
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6
|
||||||
|
, blockquote
|
||||||
|
, p
|
||||||
|
, ul
|
||||||
|
, ol
|
||||||
|
, pre
|
||||||
|
{ margin-top : var( --line-height )
|
||||||
|
; margin-bottom : var( --line-height )
|
||||||
|
}
|
||||||
|
:is( h1, h2, h3, h4, h5, h6 ):not(:first-child)
|
||||||
|
{ margin-top : calc( 2 * var( --line-height ) ) }
|
||||||
|
|
||||||
|
:is( b, strong )::before
|
||||||
|
, :is( b, strong )::after
|
||||||
|
{ content : '**'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
:is( b, strong )[title]::after
|
||||||
|
{ content : '**/*' attr(title) '*/' }
|
||||||
|
|
||||||
|
:is( i, em )::before
|
||||||
|
, :is( i, em )::after
|
||||||
|
{ content : '_'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
:is( i, em )[title]::after
|
||||||
|
{ content : '_/*' attr(title) '*/' }
|
||||||
|
|
||||||
|
u::before
|
||||||
|
, u::after
|
||||||
|
{ content : '__'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
u[title]::after
|
||||||
|
{ content : '__/*' attr(title) '*/' }
|
||||||
|
|
||||||
|
s::before
|
||||||
|
, s::after
|
||||||
|
{ content : '~~'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
s[title]::after
|
||||||
|
{ content : '~~/*' attr(title) '*/' }
|
||||||
|
|
||||||
|
del::before
|
||||||
|
, del::after
|
||||||
|
{ content : '--'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
del[title]::after
|
||||||
|
{ content : '--/*' attr(title) '*/' }
|
||||||
|
|
||||||
|
ins::before
|
||||||
|
, ins::after
|
||||||
|
{ content : '++'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
ins[title]::after
|
||||||
|
{ content : '++/*' attr(title) '*/' }
|
||||||
|
|
||||||
|
|
||||||
|
a::before
|
||||||
|
{ content : '['
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
a::after
|
||||||
|
{ content : '](' attr(href) ')'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
a[title]::after
|
||||||
|
{ content : '](' attr(href) ')/*' attr(title) '*/'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
aside
|
||||||
|
{ width : 9em }
|
||||||
|
aside::before
|
||||||
|
{ content : '#['
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
aside::after
|
||||||
|
{ content : ']#'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
:is( code, samp )::before
|
||||||
|
, :is( code, samp )::after
|
||||||
|
{ content : '`'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
:is( code, samp )[title]::after
|
||||||
|
{ content : '`/*' attr(title) '*/' }
|
||||||
|
|
||||||
|
abbr::before
|
||||||
|
{ content : '[[' }
|
||||||
|
abbr::after
|
||||||
|
{ content : ']]' }
|
||||||
|
abbr[title]::after
|
||||||
|
{ content : ' | ' attr(title) ']]' }
|
||||||
|
|
||||||
|
kbd::before
|
||||||
|
{ content : '[' }
|
||||||
|
kbd::after
|
||||||
|
{ content : ']' }
|
||||||
|
kbd[title]::after
|
||||||
|
{ content : ']/*' attr(title) '*/' }
|
||||||
|
|
||||||
|
var::before
|
||||||
|
{ content : '{' }
|
||||||
|
var::after
|
||||||
|
{ content : '}' }
|
||||||
|
var[title]::after
|
||||||
|
{ content : '}/*' attr(title) '*/' }
|
||||||
|
|
||||||
|
cite::before
|
||||||
|
{ content : '>>' }
|
||||||
|
cite::after
|
||||||
|
{ content : '<<' }
|
||||||
|
cite[title]::after
|
||||||
|
{ content : '<</*' attr(title) '*/' }
|
||||||
|
|
||||||
|
q::before
|
||||||
|
{ content : '^[' }
|
||||||
|
q::after
|
||||||
|
{ content : ']' }
|
||||||
|
q[cite]::after
|
||||||
|
{ content : '](' attr(cite) ')' }
|
||||||
|
q[cite][title]::after
|
||||||
|
{ content : '](' attr(cite) ')/*' attr(title) '*/' }
|
||||||
|
|
||||||
|
|
||||||
|
pre code::before
|
||||||
|
, pre code::after
|
||||||
|
{ content : none }
|
||||||
|
|
||||||
|
hr
|
||||||
|
{ position : relative
|
||||||
|
; height : var( --line-height )
|
||||||
|
; overflow : hidden
|
||||||
|
; border : 0
|
||||||
|
; margin-top : var( --line-height )
|
||||||
|
; margin-bottom : var( --line-height )
|
||||||
|
}
|
||||||
|
hr::after
|
||||||
|
{ content : '----'
|
||||||
|
; position : absolute
|
||||||
|
; display : inline
|
||||||
|
; top : 0
|
||||||
|
; left : 0
|
||||||
|
}
|
||||||
|
|
||||||
|
sub, sup
|
||||||
|
{ all : unset }
|
||||||
|
sup::before
|
||||||
|
{ content : '^'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
sup::after
|
||||||
|
{ content : '^'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
sub::before
|
||||||
|
{ content : '~'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
sub::after
|
||||||
|
{ content : '~'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
sup[title]::after
|
||||||
|
{ content : '^/*' attr(title) '*/' }
|
||||||
|
sub[title]::after
|
||||||
|
{ content : '~/*' attr(title) '*/' }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
[dir=rtl] hr::after
|
||||||
|
, hr[dir=rtl]::after
|
||||||
|
{ right : 0
|
||||||
|
; left : unset
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
input + label::after
|
||||||
|
{ content : "\a"
|
||||||
|
; white-space : pre
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox]
|
||||||
|
, input[type=radio]
|
||||||
|
{ -webkit-appearance : none !important
|
||||||
|
; -moz-appearance : none !important
|
||||||
|
; -ms-appearance : none !important
|
||||||
|
; -o-appearance : none !important
|
||||||
|
; appearance : none !important
|
||||||
|
}
|
||||||
|
input[type=checkbox]::before
|
||||||
|
, input[type=radio]::before
|
||||||
|
{ content : '[ ]'
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
input[type=checkbox]:checked::before
|
||||||
|
{ content : '[x]' }
|
||||||
|
input[type=radio]::before
|
||||||
|
{ content : '( )' }
|
||||||
|
input[type=radio]:checked::before
|
||||||
|
{ content : '(+)' }
|
||||||
|
|
||||||
|
|
||||||
|
input[type=text]
|
||||||
|
{ background : none
|
||||||
|
; border : none
|
||||||
|
; width : auto
|
||||||
|
; border-bottom : 2px solid var(--text)
|
||||||
|
}
|
||||||
|
|
||||||
|
/* doesnt work b/c input-text is not a regular markup */
|
||||||
|
input[type=text]::before
|
||||||
|
, input[type=text]::after
|
||||||
|
{ display : inline-block
|
||||||
|
; content : '[ '
|
||||||
|
}
|
||||||
|
input[type=text]::after
|
||||||
|
{ content : ' ]' }
|
||||||
|
|
||||||
|
|
||||||
|
/* only works if image doesnt load */
|
||||||
|
img
|
||||||
|
{ display : inline
|
||||||
|
/*; overflow : hidden*/
|
||||||
|
}
|
||||||
|
img::before
|
||||||
|
{ content : ' ')' }
|
||||||
|
img[title]::after
|
||||||
|
{ content : '](' attr(src) ')/*' attr(title) '*/' }
|
||||||
|
|
||||||
|
|
||||||
|
/* colors */
|
||||||
|
:root
|
||||||
|
{ --red : hsl( 0, 93%, 59% )
|
||||||
|
; --dark-red : hsl( 0, 93%, 39% )
|
||||||
|
|
||||||
|
; --orange : hsl( 32, 98%, 56% )
|
||||||
|
; --light-orange : hsl( 47, 100%, 79% )
|
||||||
|
; --dark-orange : hsl( 30, 83%, 34% )
|
||||||
|
|
||||||
|
; --yellow : hsl( 54, 70%, 68% )
|
||||||
|
; --dark-yellow : hsla( 54, 70%, 68%, 35% )
|
||||||
|
|
||||||
|
; --green : hsl( 80, 76%, 53% )
|
||||||
|
|
||||||
|
; --blue : hsl( 190, 81%, 67% )
|
||||||
|
; --dark-blue : hsl( 190, 81%, 67%, 20% )
|
||||||
|
|
||||||
|
; --purple : hsl( 261, 100%, 75% )
|
||||||
|
; --rose : hsl( 338, 95%, 56% )
|
||||||
|
|
||||||
|
; --gray : hsl( 50, 11%, 41% )
|
||||||
|
; --light-gray : hsl( 50, 11%, 81% )
|
||||||
|
; --dark-gray : hsl( 50, 11%, 21% )
|
||||||
|
}
|
||||||
|
|
||||||
|
[title]::after
|
||||||
|
{ color : var( --gray ) }
|
||||||
|
a[title]::after
|
||||||
|
{ color : var( --rose ) }
|
||||||
|
a:any-link
|
||||||
|
, img::before
|
||||||
|
, img::after
|
||||||
|
{ color : var( --rose ) }
|
||||||
|
|
||||||
|
abbr, abbr[title]::after
|
||||||
|
{ color : var( --light-orange ) }
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6
|
||||||
|
{ color : var( --orange ) }
|
||||||
|
|
||||||
|
blockquote, cite
|
||||||
|
{ color : var( --green ) }
|
||||||
|
pre, code, samp
|
||||||
|
{ background : var( --dark-gray ) }
|
||||||
|
pre::before
|
||||||
|
{ color : var( --gray ) }
|
||||||
|
|
||||||
|
ul > li::before
|
||||||
|
{ color : var( --red ) }
|
||||||
|
ol > li::before
|
||||||
|
{ color : var( --purple ) }
|
||||||
|
|
||||||
|
b, strong
|
||||||
|
{ color : var( --red ) }
|
||||||
|
i, em
|
||||||
|
{ color : var( --blue ) }
|
||||||
|
u
|
||||||
|
{ color : var( --blue )
|
||||||
|
; background : var( --dark-blue )
|
||||||
|
}
|
||||||
|
s
|
||||||
|
{ color : var( --light-gray )
|
||||||
|
; background : var( --dark-gray )
|
||||||
|
}
|
||||||
|
|
||||||
|
ins
|
||||||
|
{ color : var( --bg )
|
||||||
|
; background : var( --green )
|
||||||
|
}
|
||||||
|
del
|
||||||
|
{ color : var( --bg )
|
||||||
|
; background : var( --red )
|
||||||
|
}
|
||||||
|
del[title]::after
|
||||||
|
{ color : var( --dark-gray ) }
|
||||||
|
|
||||||
|
mark
|
||||||
|
{ color : var( --bg )
|
||||||
|
; background : var( --yellow )
|
||||||
|
}
|
||||||
|
mark::before
|
||||||
|
, mark::after
|
||||||
|
{ content : '=='
|
||||||
|
; display : inline
|
||||||
|
}
|
||||||
|
mark::after
|
||||||
|
{ content : '==' }
|
||||||
|
mark[title]::after
|
||||||
|
{ content : '==/*' attr(title) '*/'
|
||||||
|
; color : var( --dark-gray )
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
q, q[title]::after
|
||||||
|
{ color : var( --green ) }
|
||||||
|
|
||||||
|
:is( kbd, var )::before
|
||||||
|
, :is( kbd, var )::after
|
||||||
|
{ color : var( --gray ) }
|
||||||
|
|
||||||
|
:is( sup, sub )::before
|
||||||
|
, :is( sup, sub )::after
|
||||||
|
{ color : var( --gray ) }
|
||||||
|
|
||||||
|
aside
|
||||||
|
{ color : var( --yellow ) }
|
||||||
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
title "markdown-raw"
|
||||||
|
description "CSS style to make HTML look like raw markdown"
|
||||||
|
media-type "webpage"
|
||||||
|
tags "code" "css" "markdown"
|
||||||
|
license "AGPL"
|
||||||
|
homepage "https://dym.sh/markdown-raw"
|
||||||
|
source "https://source.garden/dym/markdown-raw"
|
||||||
|
|
||||||
|
mirrors {
|
||||||
|
codepen "https://codepen.io/dym-sh/pen/XWKbYVP/left/?editors=1100"
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Loading…
Reference in New Issue