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