diff --git a/README.md b/README.md index 41dfc63..d6dba3c 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,16 @@ -# markdown-raw +# markdown.raw() -CSS style to make HTML look like raw markdown \ No newline at end of file +> 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 + +preview diff --git a/index.html b/index.html new file mode 100644 index 0000000..3a2d123 --- /dev/null +++ b/index.html @@ -0,0 +1,479 @@ + + +markdown.raw() + + + + + + + + + + + + + + + +
+ markdown.raw() – CSS style to make HTML look like raw markdown +

uses CSS4 :is() +

more info on github +

+
left-to-right + right-to-left +
+

h1 – blockquote, abbr

+
+ blockquote +
second line +
+
+ + CSS +
+ +

h2 – a, abbr, img

+

link

+

link with a "title" attribute

+

this is alt text

+

alt_text

+ +

h3 – code, b, i, u, s, del, ins

+ 
multi_lined( ) {
+  code;
+  block;
+}
+

some text around inline code; and inline code

+

bold bold

+

italics italics

+

uinderlined uinderlined

+

striked striked

+

inserted inserted

+

deleted deleted

+ +

h4 – lists

+
    +
  • unordered list item
    • +
  • another one
    • +
  • now list iside a list: +
      +
    • unordered list item
      • +
    • another one
      • +
    • lvl 3: +
        +
      • unordered list item
        • +
      • another one
        • +
      • just one more
        • +
      +
      • +
    • back to lvl 2
      • +
    +
    • +
  • back to lvl 1
    • +
+ +
    +
  1. ordered list item at lvl 1
    2. +
  2. many numbers
    3. +
  3. many numbers
    4. +
  4. many numbers
    5. +
  5. many numbers
    6. +
  6. many numbers
    7. +
  7. many numbers
    8. +
  8. many numbers
    9. +
  9. another one
    10. +
  10. next is lvl 2 +
      +
    1. ordered list inside an ordered list
      2. +
    2. many numbers
      3. +
    3. many numbers
      4. +
    4. many numbers
      5. +
    5. many numbers
      6. +
    6. many numbers
      7. +
    7. many numbers
      8. +
    8. many numbers
      9. +
    9. many numbers
      10. +
    10. many numbers
      11. +
    11. next is lvl 3 +
        +
      1. ol_level_3
        2. +
      2. many numbers
        3. +
      3. many numbers
        4. +
      4. many numbers
        5. +
      5. many numbers
        6. +
      6. many numbers
        7. +
      7. many numbers
        8. +
      8. many numbers
        9. +
      9. many numbers
        10. +
      10. many numbers
        11. +
      11. many numbers
        12. +
      12. too deep?
        13. +
      +
      12. +
    12. one back to lvl 2
      13. +
    13. +
        +
      1. lvl 3 w/o introductory text
        2. +
      +
      14. +
    +
    11. +
  11. one back to lvl 1
    12. +
  12. +
      +
    1. lvl 2 w/o introductory text
      2. +
    +
    13. +
+ +
h5 – inputs, labels, other form-elements
+ +
+ +
+ +
+ + + + +
+ +
+ + + + + +
+ + +
+ +
+ I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I? + A keyboard. +
+
+ +
h6 – aside, and the rest
+ +
+ +

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.

+
+ +
+ +

some inline citation, not a blockquote

+
+ +
+ +

+ Mini Ketchup, + Jumbo Ketchup, + Mega Jumbo Ketchup +

+
+ +
+ +

validator

+
+ +
+ +

Ctrl+Shift+R

+
+ +
+ +

Several species of salamander inhabit the temperate rainforest of the Pacific Northwest.

+
+ +
+ +

I'm sorry, Dave. I'm afraid I can't do that.

+
+ +
+ +

明日 (Ashita)

+
+ +
+ +

Fernstraßenbauprivatfinanzierungsgesetz

+
+ +
+ +

The volume of a box is l × w × h, where l represents the length, w the width and h the height of the box.

+
+ +
+ + text above hr +
+ text below hr +
+ +
+ +

a2 + b2 = c2

+
+ +
+ +

Almost every developer's favorite molecule is + C8H10N4O2, also known as "caffeine."

+
+ +		 +

h1 – blockquote, abbr

+
+ blockquote +
second line +
+
+ + CSS +
+ +

h2 – a, abbr, img

+

link

+

link with a "title" attribute

+

this is alt text

+

alt_text

+ +

h3 – code, b, i, u, s, del, ins

+ 
multi_lined( ) {
+  code;
+  block;
+}
+

some text around inline code; and inline code

+

bold bold

+

italics italics

+

uinderlined uinderlined

+

striked striked

+

inserted inserted

+

deleted deleted

+ +

h4 – lists

+
    +
  • unordered list item
    • +
  • another one
    • +
  • now list iside a list: +
      +
    • unordered list item
      • +
    • another one
      • +
    • lvl 3: +
        +
      • unordered list item
        • +
      • another one
        • +
      • just one more
        • +
      +
      • +
    • back to lvl 2
      • +
    +
    • +
  • back to lvl 1
    • +
+ +
    +
  1. ordered list item at lvl 1
    2. +
  2. many numbers
    3. +
  3. many numbers
    4. +
  4. many numbers
    5. +
  5. many numbers
    6. +
  6. many numbers
    7. +
  7. many numbers
    8. +
  8. many numbers
    9. +
  9. another one
    10. +
  10. next is lvl 2 +
      +
    1. ordered list inside an ordered list
      2. +
    2. many numbers
      3. +
    3. many numbers
      4. +
    4. many numbers
      5. +
    5. many numbers
      6. +
    6. many numbers
      7. +
    7. many numbers
      8. +
    8. many numbers
      9. +
    9. many numbers
      10. +
    10. many numbers
      11. +
    11. next is lvl 3 +
        +
      1. ol_level_3
        2. +
      2. many numbers
        3. +
      3. many numbers
        4. +
      4. many numbers
        5. +
      5. many numbers
        6. +
      6. many numbers
        7. +
      7. many numbers
        8. +
      8. many numbers
        9. +
      9. many numbers
        10. +
      10. many numbers
        11. +
      11. many numbers
        12. +
      12. too deep?
        13. +
      +
      12. +
    12. one back to lvl 2
      13. +
    13. +
        +
      1. lvl 3 w/o introductory text
        2. +
      +
      14. +
    +
    11. +
  11. one back to lvl 1
    12. +
  12. +
      +
    1. lvl 2 w/o introductory text
      2. +
    +
    13. +
+ +
h5 – inputs, labels, other form-elements
+ +
+ +
+ +
+ + + + +
+ +
+ + + + + +
+ +
+ +
+ I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I? + A keyboard. +
+
+ +
h6 – aside, and the rest
+ +
+ +

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.

+
+ +
+ +

some inline citation, not a blockquote

+
+ +
+ +

+ Mini Ketchup, + Jumbo Ketchup, + Mega Jumbo Ketchup +

+
+ +
+ +

validator

+
+ +
+ +

Ctrl+Shift+R

+
+ +
+ +

Several species of salamander inhabit the temperate rainforest of the Pacific Northwest.

+
+ +
+ +

I'm sorry, Dave. I'm afraid I can't do that.

+
+ +
+ +

明日 (Ashita)

+
+ +
+ +

Fernstraßenbauprivatfinanzierungsgesetz

+
+ +
+ +

The volume of a box is l × w × h, where l represents the length, w the width and h the height of the box.

+
+ +
+ + text above hr +
+ text below hr +
+ +
+ +

a2 + b2 = c2

+
+ +
+ +

Almost every developer's favorite molecule is + C8H10N4O2, also known as "caffeine."

+
+ +
diff --git a/markdown.css b/markdown.css new file mode 100644 index 0000000..932e2fc --- /dev/null +++ b/markdown.css @@ -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 : '< 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 ) } + diff --git a/meta.kdl b/meta.kdl new file mode 100644 index 0000000..2832186 --- /dev/null +++ b/meta.kdl @@ -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" +} diff --git a/preview.png b/preview.png new file mode 100644 index 0000000..4200e34 Binary files /dev/null and b/preview.png differ