not managed since not in Markdown) // Option: quote-gt @mixin rmd-output-quote { - @include __rmd_selector { - blockquote { - margin: __rmd-margin("blockquote", "top") - __rmd-indent("blockquote", "right") __rmd-margin("blockquote", "bottom") - __rmd-indent("blockquote", "left"); - padding: 0; - } - } - @include __rmd_selector("quote-gt") { - blockquote { - position: relative; - } - blockquote::before { - position: absolute; - top: 0; - left: -2ch; - bottom: 0; - width: 1ch; - overflow: hidden; - white-space: pre; - content: __rmd_repeat(">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A", 20); - cursor: default; - } - } + @include __rmd_selector { + blockquote { + margin: __rmd-margin("blockquote", "top") __rmd-indent("blockquote", "right") + __rmd-margin("blockquote", "bottom") __rmd-indent("blockquote", "left"); + padding: 0; + } + } + @include __rmd_selector("quote-gt") { + blockquote { + position: relative; + } + blockquote::before { + position: absolute; + top: 0; + left: -2ch; + bottom: 0; + width: 1ch; + overflow: hidden; + white-space: pre; + content: __rmd_repeat(">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A", 20); + cursor: default; + } + } } // DEL // Option: del-gfm @mixin rmd-output-del { - @include __rmd_selector("del-gfm") { - del { - text-decoration: none; - } - del::before, - del::after { - content: "~~"; - } - } + @include __rmd_selector("del-gfm") { + del { + text-decoration: none; + } + del::before, + del::after { + content: "~~"; + } + } } // Tables // Option: table-marker @mixin rmd-output-table { - @include __rmd_selector("table-marker") { - table { - margin-top: __rmd-margin("table", "top"); - margin-bottom: __rmd-margin("table", "bottom"); - border-collapse: collapse; - } - tr > * { - min-width: 3ch; - position: relative; - padding: 0; - text-align: inherit; - vertical-align: top; - font-weight: normal; - border: none; - } - tr > * + * { - padding-left: 3ch; - } - tr:first-child > th:not([scope="row"]) { - padding-bottom: $__rmd-line; - } - tr:first-child > th:not([scope="row"])::after { - content: __rmd_repeat("-----------", 10); - position: absolute; - bottom: 0; - left: 0; - right: 0; - overflow: hidden; - word-break: break-all; - height: $__rmd-line; - } - tr:first-child > * + th:not([scope="row"])::after { - left: 3ch; - } - tr > * + *::before { - content: __rmd_repeat("|\A", 10); - position: absolute; - overflow: hidden; - left: 1ch; - top: 0; - bottom: 0; - white-space: pre; - } - } + @include __rmd_selector("table-marker") { + table { + margin-top: __rmd-margin("table", "top"); + margin-bottom: __rmd-margin("table", "bottom"); + border-collapse: collapse; + } + tr > * { + min-width: 3ch; + position: relative; + padding: 0; + text-align: inherit; + vertical-align: top; + font-weight: normal; + border: none; + } + tr > * + * { + padding-left: 3ch; + } + tr:first-child > th:not([scope="row"]) { + padding-bottom: $__rmd-line; + } + tr:first-child > th:not([scope="row"])::after { + content: __rmd_repeat("-----------", 10); + position: absolute; + bottom: 0; + left: 0; + right: 0; + overflow: hidden; + word-break: break-all; + height: $__rmd-line; + } + tr:first-child > * + th:not([scope="row"])::after { + left: 3ch; + } + tr > * + *::before { + content: __rmd_repeat("|\A", 10); + position: absolute; + overflow: hidden; + left: 1ch; + top: 0; + bottom: 0; + white-space: pre; + } + } } diff --git a/src/_toolkit.scss b/src/_toolkit.scss index 8e545d6..1c41b57 100644 --- a/src/_toolkit.scss +++ b/src/_toolkit.scss @@ -6,22 +6,22 @@ $__rmd-version: "3.1.0"; $__rmd-line: $rmd-line-ratio * 1em; @if ($rmd-prefer-rem) { - $__rmd-line: $rmd-line-ratio * 1rem; + $__rmd-line: $rmd-line-ratio * 1rem; } @mixin rmd-header($title: "") { - $included: "all styles"; - $list: $rmd-defaults; - @if not $rmd-output-all-styles { - $included: "defaults only"; - } - @if not $list or $list == "" or length($list) == 0 { - $list: "none"; - } - @if $title { - /*! #{__rmd_replace($title, "%v", $__rmd-version)} */ - /* includes: #{$included}; defaults: #{$list}; */ - } + $included: "all styles"; + $list: $rmd-defaults; + @if not $rmd-output-all-styles { + $included: "defaults only"; + } + @if not $list or $list == "" or length($list) == 0 { + $list: "none"; + } + @if $title { + /*! #{__rmd_replace($title, "%v", $__rmd-version)} */ + /* includes: #{$included}; defaults: #{$list}; */ + } } // Wrap content in a selector including the option name, depending on @@ -30,60 +30,60 @@ $__rmd-line: $rmd-line-ratio * 1em; // $rmd-output-all-styles is false and the option is not in // $rmd-defaults, which drops the entire block from the output. @mixin __rmd_selector($option: null) { - @if $option == null or index($rmd-defaults, $option) { - #{__rmd_selector_syntax()} { - @content; - } - } @else if $rmd-output-all-styles { - #{__rmd_selector_syntax($option)} { - @content; - } - } + @if $option == null or index($rmd-defaults, $option) { + #{__rmd_selector_syntax()} { + @content; + } + } @else if $rmd-output-all-styles { + #{__rmd_selector_syntax($option)} { + @content; + } + } } // Generate the general selector (if $name is null) // or an option-specific selector @function __rmd_selector_syntax($option: null) { - @if $option == null { - @return $rmd-selector-base; - } @else { - @return __rmd_replace($rmd-selector-option, "%o", $option); - } + @if $option == null { + @return $rmd-selector-base; + } @else { + @return __rmd_replace($rmd-selector-option, "%o", $option); + } } // Get a margin value in em from $rmd-margins. // If not set, returns a value of 1 line. @function __rmd-margin($element, $direction: "top") { - $config: map-get($rmd-margins, $element); - @if $config != null { - $num: map-get($config, $direction); - @if $num != null { - @return $__rmd-line * $num; - } - } - @return $__rmd-line * 1; + $config: map-get($rmd-margins, $element); + @if $config != null { + $num: map-get($config, $direction); + @if $num != null { + @return $__rmd-line * $num; + } + } + @return $__rmd-line * 1; } // Get a horizontal margin (indent) value for an element. // If not set, returns a value of 0. @function __rmd-indent($element, $direction: "left") { - $config: map-get($rmd-indents, $element); - @if $config != null { - $num: map-get($config, $direction); - @if $num != null { - @return 1ch * $num; - } - } - @return 0; + $config: map-get($rmd-indents, $element); + @if $config != null { + $num: map-get($config, $direction); + @if $num != null { + @return 1ch * $num; + } + } + @return 0; } // Small utility to repeat a string @function __rmd_repeat($string, $times) { - $result: ""; - @for $i from 1 through $times { - $result: $result + $string; - } - @return $result; + $result: ""; + @for $i from 1 through $times { + $result: $result + $string; + } + @return $result; } /// Replace `$search` with `$replace` in `$string` @@ -93,14 +93,10 @@ $__rmd-line: $rmd-line-ratio * 1em; /// @param {String} $replace ('') - New value /// @return {String} - Updated string @function __rmd_replace($string, $search, $replace: "") { - $index: str-index($string, $search); - @if $index { - @return str-slice($string, 1, $index - 1) + $replace + - __rmd_replace( - str-slice($string, $index + str-length($search)), - $search, - $replace - ); - } - @return $string; + $index: str-index($string, $search); + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + + __rmd_replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + @return $string; } diff --git a/src/build.js b/src/build.js index 125cf5f..aa458d6 100644 --- a/src/build.js +++ b/src/build.js @@ -1,39 +1,39 @@ -const fs = require('fs') -const path = require('path') -const sass = require('sass') -const prettier = require('prettier') +const fs = require("fs") +const path = require("path") +const sass = require("sass") +const prettier = require("prettier") const root = path.dirname(__dirname) const sources = [ - ['src/remarkdown.scss', 'dist/remarkdown.css'], - ['src/remarkdown.attr.scss', 'dist/remarkdown.attr.css'], - ['src/remarkdown-zero.scss', 'dist/remarkdown-zero.css'], - ['src/remarkdown-zero.attr.scss', 'dist/remarkdown-zero.attr.css'], - ['src/remarkdown-custom.scss', 'dist/remarkdown-custom.css'], - ['docs/demo.scss', 'docs/demo.css'], + ["src/remarkdown.scss", "dist/remarkdown.css"], + ["src/remarkdown.attr.scss", "dist/remarkdown.attr.css"], + ["src/remarkdown-zero.scss", "dist/remarkdown-zero.css"], + ["src/remarkdown-zero.attr.scss", "dist/remarkdown-zero.attr.css"], + ["src/remarkdown-custom.scss", "dist/remarkdown-custom.css"], + ["docs/demo.scss", "docs/demo.css"], ] sources.forEach(buildStylesheet) function buildStylesheet([sourceFilename, outFilename]) { - const sourceFile = path.join(root, sourceFilename) - const outFile = path.join(root, outFilename) - if (fs.existsSync(sourceFile) === false) { - return - } + const sourceFile = path.join(root, sourceFilename) + const outFile = path.join(root, outFilename) + if (fs.existsSync(sourceFile) === false) { + return + } - console.log('Compiling ' + sourceFile) - sass.render({ file: sourceFile, outputStyle: 'expanded' }, (err, result) => { - if (err) throw err - const css = result.css.toString('utf8') - const prettified = prettier.format(css, { - parser: 'css', - singleQuote: false, - }) - fs.writeFile(outFile, prettified, (err) => { - if (err) throw err - console.log(`Writing ${outFile} (${prettified.length} bytes)`) - }) - }) + console.log("Compiling " + sourceFile) + sass.render({ file: sourceFile, outputStyle: "expanded" }, (err, result) => { + if (err) throw err + const css = result.css.toString("utf8") + const prettified = prettier.format(css, { + parser: "css", + singleQuote: false, + }) + fs.writeFile(outFile, prettified, (err) => { + if (err) throw err + console.log(`Writing ${outFile} (${prettified.length} bytes)`) + }) + }) } diff --git a/src/remarkdown-custom.scss b/src/remarkdown-custom.scss index a8b2c95..9b32dfa 100644 --- a/src/remarkdown-custom.scss +++ b/src/remarkdown-custom.scss @@ -49,26 +49,24 @@ $rmd-defaults: // Horizontal indents (as number of characters) $rmd-indents: ( - ul: ( - left: 6, - right: 4, - ), - ol: ( - left: 6, - right: 4, - ), - pre: ( - left: 2, - right: 2, - ), - blockquote: ( - left: 2, - right: 2, - ), + ul: ( + left: 6, + right: 4, + ), + ol: ( + left: 6, + right: 4, + ), + pre: ( + left: 2, + right: 2, + ), + blockquote: ( + left: 2, + right: 2, + ), ); @import "src/_imports.scss"; -@include rmd-header( - "ReMarkdown %v (MIT) Custom Build https://fvsch.github.io/remarkdown/" -); +@include rmd-header("ReMarkdown %v (MIT) Custom Build https://fvsch.github.io/remarkdown/"); @include rmd-output(); From ac5759258e422ecf52624c6f5c67c7c30e3120b3 Mon Sep 17 00:00:00 2001 From: Florens Verschelde <243601+fvsch@users.noreply.github.com> Date: Fri, 23 Jan 2026 12:30:04 +0100 Subject: [PATCH 2/4] chore: use servitsy instead of serve --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index e826749..2c5e693 100644 --- a/package.json +++ b/package.json @@ -11,11 +11,11 @@ "scripts": { "build": "node src/build.js", "format": "prettier --write src", - "start": "serve docs" + "start": "servitsy docs" }, "devDependencies": { "prettier": "^3.8.1", "sass": "^1.26.11", - "serve": "^11.3.2" + "servitsy": "^0.5.0" } } From ac6c183e130dd220154e9a0037a55b5ca2d7c4d3 Mon Sep 17 00:00:00 2001 From: Florens Verschelde <243601+fvsch@users.noreply.github.com> Date: Fri, 23 Jan 2026 12:46:21 +0100 Subject: [PATCH 3/4] fix: migrate sass built-in functions --- package.json | 2 +- src/_toolkit.scss | 22 +++++++++++++--------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 2c5e693..9db8c9e 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ }, "devDependencies": { "prettier": "^3.8.1", - "sass": "^1.26.11", + "sass": "^1.97.3", "servitsy": "^0.5.0" } } diff --git a/src/_toolkit.scss b/src/_toolkit.scss index 1c41b57..f417d3a 100644 --- a/src/_toolkit.scss +++ b/src/_toolkit.scss @@ -1,3 +1,7 @@ +@use "sass:list"; +@use "sass:map"; +@use "sass:string"; + // ------------------------ // Utilities for ReMarkdown // ------------------------ @@ -15,7 +19,7 @@ $__rmd-line: $rmd-line-ratio * 1em; @if not $rmd-output-all-styles { $included: "defaults only"; } - @if not $list or $list == "" or length($list) == 0 { + @if not $list or $list == "" or list.length($list) == 0 { $list: "none"; } @if $title { @@ -30,7 +34,7 @@ $__rmd-line: $rmd-line-ratio * 1em; // $rmd-output-all-styles is false and the option is not in // $rmd-defaults, which drops the entire block from the output. @mixin __rmd_selector($option: null) { - @if $option == null or index($rmd-defaults, $option) { + @if $option == null or list.index($rmd-defaults, $option) { #{__rmd_selector_syntax()} { @content; } @@ -54,9 +58,9 @@ $__rmd-line: $rmd-line-ratio * 1em; // Get a margin value in em from $rmd-margins. // If not set, returns a value of 1 line. @function __rmd-margin($element, $direction: "top") { - $config: map-get($rmd-margins, $element); + $config: map.get($rmd-margins, $element); @if $config != null { - $num: map-get($config, $direction); + $num: map.get($config, $direction); @if $num != null { @return $__rmd-line * $num; } @@ -67,9 +71,9 @@ $__rmd-line: $rmd-line-ratio * 1em; // Get a horizontal margin (indent) value for an element. // If not set, returns a value of 0. @function __rmd-indent($element, $direction: "left") { - $config: map-get($rmd-indents, $element); + $config: map.get($rmd-indents, $element); @if $config != null { - $num: map-get($config, $direction); + $num: map.get($config, $direction); @if $num != null { @return 1ch * $num; } @@ -93,10 +97,10 @@ $__rmd-line: $rmd-line-ratio * 1em; /// @param {String} $replace ('') - New value /// @return {String} - Updated string @function __rmd_replace($string, $search, $replace: "") { - $index: str-index($string, $search); + $index: string.index($string, $search); @if $index { - @return str-slice($string, 1, $index - 1) + $replace + - __rmd_replace(str-slice($string, $index + str-length($search)), $search, $replace); + @return string.slice($string, 1, $index - 1) + $replace + + __rmd_replace(string.slice($string, $index + string.length($search)), $search, $replace); } @return $string; } From 583c7ebb6d9dc9f0ba43504d14a1333622a237f1 Mon Sep 17 00:00:00 2001 From: Florens Verschelde <243601+fvsch@users.noreply.github.com> Date: Sun, 1 Feb 2026 22:26:54 +0100 Subject: [PATCH 4/4] feat: move to use sass modules --- .gitattributes | 4 - .gitignore | 4 +- .npmignore | 6 - LICENSE | 2 +- README.md | 24 +- build.js | 33 + dist/remarkdown-zero.attr.css | 138 ++- dist/remarkdown-zero.css | 138 ++- dist/remarkdown.attr.css | 138 ++- dist/remarkdown.css | 138 ++- docs/demo.css | 1083 +++++++++++++++-------- docs/demo.scss | 159 ++-- docs/styles.html | 1 - lib/_config.scss | 39 + src/_options.scss => lib/_defaults.scss | 160 ++-- lib/remarkdown.scss | 47 + lib/styles/_all.scss | 14 + lib/styles/_base.scss | 17 + lib/styles/_code.scss | 17 + lib/styles/_del.scss | 16 + lib/styles/_em.scss | 28 + lib/styles/_hn.scss | 72 ++ lib/styles/_hr.scss | 34 + lib/styles/_link.scss | 24 + lib/styles/_ol.scss | 54 ++ lib/styles/_para.scss | 16 + lib/styles/_pre.scss | 53 ++ lib/styles/_quote.scss | 34 + lib/styles/_strong.scss | 28 + lib/styles/_table.scss | 50 ++ lib/styles/_ul.scss | 40 + lib/utils/_selector.scss | 35 + lib/utils/_spacing.scss | 48 + lib/utils/_str.scss | 31 + package-lock.json | 480 ++++++++++ package.json | 21 +- preset/remarkdown-zero.attr.scss | 12 + preset/remarkdown-zero.scss | 12 + preset/remarkdown.attr.scss | 10 + preset/remarkdown.scss | 7 + src/_imports.scss | 20 - src/_styles.scss | 461 ---------- src/_toolkit.scss | 106 --- src/build.js | 39 - src/remarkdown-custom.scss | 72 -- src/remarkdown-zero.attr.scss | 10 - src/remarkdown-zero.scss | 10 - src/remarkdown.attr.scss | 8 - src/remarkdown.scss | 8 - 49 files changed, 2419 insertions(+), 1582 deletions(-) delete mode 100644 .gitattributes delete mode 100644 .npmignore create mode 100644 build.js create mode 100644 lib/_config.scss rename src/_options.scss => lib/_defaults.scss (51%) create mode 100644 lib/remarkdown.scss create mode 100644 lib/styles/_all.scss create mode 100644 lib/styles/_base.scss create mode 100644 lib/styles/_code.scss create mode 100644 lib/styles/_del.scss create mode 100644 lib/styles/_em.scss create mode 100644 lib/styles/_hn.scss create mode 100644 lib/styles/_hr.scss create mode 100644 lib/styles/_link.scss create mode 100644 lib/styles/_ol.scss create mode 100644 lib/styles/_para.scss create mode 100644 lib/styles/_pre.scss create mode 100644 lib/styles/_quote.scss create mode 100644 lib/styles/_strong.scss create mode 100644 lib/styles/_table.scss create mode 100644 lib/styles/_ul.scss create mode 100644 lib/utils/_selector.scss create mode 100644 lib/utils/_spacing.scss create mode 100644 lib/utils/_str.scss create mode 100644 package-lock.json create mode 100644 preset/remarkdown-zero.attr.scss create mode 100644 preset/remarkdown-zero.scss create mode 100644 preset/remarkdown.attr.scss create mode 100644 preset/remarkdown.scss delete mode 100644 src/_imports.scss delete mode 100644 src/_styles.scss delete mode 100644 src/_toolkit.scss delete mode 100644 src/build.js delete mode 100644 src/remarkdown-custom.scss delete mode 100644 src/remarkdown-zero.attr.scss delete mode 100644 src/remarkdown-zero.scss delete mode 100644 src/remarkdown.attr.scss delete mode 100644 src/remarkdown.scss diff --git a/.gitattributes b/.gitattributes deleted file mode 100644 index 36d0206..0000000 --- a/.gitattributes +++ /dev/null @@ -1,4 +0,0 @@ -.gitattributes export-ignore -.gitignore export-ignore -.npmignore export-ignore -/docs export-ignore diff --git a/.gitignore b/.gitignore index 06d7e4a..9e406a5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,2 @@ node_modules -package-lock.json -dist/remarkdown-custom.css -*.tgz \ No newline at end of file +*.tgz diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 2a74ed0..0000000 --- a/.npmignore +++ /dev/null @@ -1,6 +0,0 @@ -.gitattributes -.gitignore -.npmignore -/dist/remarkdown-custom.css -/docs -*.tgz \ No newline at end of file diff --git a/LICENSE b/LICENSE index 402365b..466b096 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright © 2011–2020 Florens Verschelde +Copyright © 2011–2026 Florens Verschelde Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index cbe257a..23575e7 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,23 @@ - # ReMarkdown -ReMarkdown is a stylesheet that makes HTML look like raw Markdown text. -Take a look at the [online demo and documentation](https://fvsch.github.io/remarkdown/). +ReMarkdown styles HTML to look like plain Markdown text. + +- [online demo and docs][docs] +- [npm: remarkdown.css][npm] -Markdown is [a plain-text syntax by John Gruber](https://daringfireball.net/projects/markdown/). This project also takes inspiration from variants such as PHP Markdown Extra and GitHub Flavored Markdown. +Markdown is [a plain-text syntax by John Gruber][markdown]. Some styles are inspired by [PHP Markdown Extra][md-extra] and [GitHub Flavored Markdown][md-gfm]. ## Documentation -- [Using ReMarkdown](https://fvsch.github.io/remarkdown/) -- [Available styles](https://fvsch.github.io/remarkdown/styles.html) -- [Customizing ReMarkdown](https://fvsch.github.io/remarkdown/customize.html) +- [Using ReMarkdown][docs] +- [Available styles][styles] +- [Customizing ReMarkdown][customize] + + +[npm]: https://www.npmjs.com/package/remarkdown.css +[docs]: https://fvsch.github.io/remarkdown/ +[styles]: https://fvsch.github.io/remarkdown/styles.html +[customize]: https://fvsch.github.io/remarkdown/customize.html +[markdown]: https://daringfireball.net/projects/markdown/ +[md-extra]: https://michelf.ca/projects/php-markdown/extra/ +[md-gfm]: https://github.github.com/gfm/ diff --git a/build.js b/build.js new file mode 100644 index 0000000..546cef8 --- /dev/null +++ b/build.js @@ -0,0 +1,33 @@ +import { access, constants, writeFile } from "node:fs/promises" +import { join } from "node:path" +import * as prettier from "prettier" +import * as sass from "sass" + +const sources = [ + ["preset/remarkdown.scss", "dist/remarkdown.css"], + ["preset/remarkdown.attr.scss", "dist/remarkdown.attr.css"], + ["preset/remarkdown-zero.scss", "dist/remarkdown-zero.css"], + ["preset/remarkdown-zero.attr.scss", "dist/remarkdown-zero.attr.css"], + ["docs/demo.scss", "docs/demo.css"], +] + +sources.forEach(buildStylesheet) + +async function buildStylesheet([sourceFilename, outFilename]) { + const sourceFile = join(import.meta.dirname, sourceFilename) + const outFile = join(import.meta.dirname, outFilename) + + try { + await access(sourceFile, constants.R_OK) + } catch { + console.error(`Missing file ${sourceFile}`) + return + } + + const compiled = await sass.compileAsync(sourceFile) + const prettified = await prettier.format(compiled.css, { + parser: "css", + }) + await writeFile(outFile, prettified) + console.log(`${sourceFilename} -> ${outFilename} (${prettified.length} B)`) +} diff --git a/dist/remarkdown-zero.attr.css b/dist/remarkdown-zero.attr.css index 516b06c..2b9f91a 100644 --- a/dist/remarkdown-zero.attr.css +++ b/dist/remarkdown-zero.attr.css @@ -1,36 +1,27 @@ -/*! ReMarkdown-zero 3.1.0 [attr] (MIT) https://fvsch.github.io/remarkdown/ */ +/*! ReMarkdown-zero 4.0.0-alpha.1 [attr] (MIT) https://fvsch.github.io/remarkdown/ */ /* includes: all styles; defaults: none; */ [data-remarkdown] { - line-height: 1.5; font-family: monospace, monospace; + line-height: 1.5; } -[data-remarkdown] pre, -[data-remarkdown] code, -[data-remarkdown] kbd, -[data-remarkdown] samp { +[data-remarkdown] :is(pre, code, kbd, samp) { font-family: inherit; } [data-remarkdown~="hn-reset"] h1 { font-size: inherit; font-weight: inherit; - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; } [data-remarkdown~="hn-reset"] h2 { font-size: inherit; font-weight: inherit; - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; } -[data-remarkdown~="hn-reset"] h3, -[data-remarkdown~="hn-reset"] h4, -[data-remarkdown~="hn-reset"] h5, -[data-remarkdown~="hn-reset"] h6 { +[data-remarkdown~="hn-reset"] :is(h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; } [data-remarkdown~="hn-hash"] h1::before { @@ -57,7 +48,7 @@ display: table; overflow: hidden; position: relative; - padding-bottom: 1.5em; + padding-bottom: 1lh; } [data-remarkdown~="h2-underline"] h2::before, [data-remarkdown~="h1-underline"] h1::before { @@ -67,8 +58,8 @@ [data-remarkdown~="h1-underline"] h1::after { position: absolute; bottom: 0; - left: 0; - height: 1.5em; + inset-inline: 0; + height: 1lh; width: 100%; overflow: hidden; word-break: break-all; @@ -84,17 +75,18 @@ } [data-remarkdown] p { - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; } [data-remarkdown] figure { - margin: 1.5em 0 1.5em; + margin-block: 1lh; + margin-inline: 0; } [data-remarkdown] hr { - height: 1.5em; - line-height: 1.5em; - margin: 1.5em 0 1.5em; + height: 1lh; + line-height: 1lh; + margin-block: 1lh; + margin-inline: 0; border: none; color: inherit; } @@ -112,22 +104,22 @@ } [data-remarkdown] ul { - margin: 1.5em 0ch 1.5em 4ch; + margin-block: 1lh; + margin-inline: 0ch; padding: 0; } [data-remarkdown] li ul { - margin-top: 0; - margin-bottom: 0; + margin-block: 0; } [data-remarkdown~="ul-plus"] ul { list-style: none; } [data-remarkdown~="ul-plus"] ul > li::before { - float: left; + float: inline-start; width: 1ch; - margin-left: -4ch; - margin-right: 1ch; + margin-inline-start: 0ch; + margin-inline-end: 1ch; content: "+"; } @@ -135,10 +127,10 @@ list-style: none; } [data-remarkdown~="ul-star"] ul > li::before { - float: left; + float: inline-start; width: 1ch; - margin-left: -4ch; - margin-right: 1ch; + margin-inline-start: 0ch; + margin-inline-end: 1ch; content: "*"; } @@ -146,20 +138,20 @@ list-style: none; } [data-remarkdown~="ul-hyphen"] ul > li::before { - float: left; + float: inline-start; width: 1ch; - margin-left: -4ch; - margin-right: 1ch; + margin-inline-start: 0ch; + margin-inline-end: 1ch; content: "-"; } [data-remarkdown] ol { - margin: 1.5em 0ch 1.5em 4ch; + margin-block: 1lh; + margin-inline: 0ch; padding: 0; } [data-remarkdown] li ol { - margin-top: 0; - margin-bottom: 0; + margin-block: 0; } [data-remarkdown~="ol-decimal"] ol { @@ -170,9 +162,9 @@ counter-increment: rmd-ol; } [data-remarkdown~="ol-decimal"] ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; + float: inline-start; + margin-inline-start: 0ch; + margin-inline-end: 1ch; min-width: 2ch; content: counter(rmd-ol) "."; } @@ -181,9 +173,9 @@ list-style: none; } [data-remarkdown~="ol-zero"] ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; + float: inline-start; + margin-inline-start: 0ch; + margin-inline-end: 1ch; min-width: 2ch; content: "0."; } @@ -196,9 +188,9 @@ counter-increment: rmd-ol; } [data-remarkdown~="ol-alpha"] ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; + float: inline-start; + margin-inline-start: 0ch; + margin-inline-end: 1ch; min-width: 2ch; content: counter(rmd-ol, lower-alpha) "."; } @@ -218,8 +210,7 @@ word-break: break-all; } -[data-remarkdown] em, -[data-remarkdown] strong { +[data-remarkdown] em { font-style: normal; font-weight: normal; } @@ -234,6 +225,11 @@ content: "_"; } +[data-remarkdown] strong { + font-style: normal; + font-weight: normal; +} + [data-remarkdown~="strong-star"] strong::before, [data-remarkdown~="strong-star"] strong::after { content: "**"; @@ -250,18 +246,16 @@ } [data-remarkdown~="code-tick"] pre code::before, [data-remarkdown~="code-tick"] pre code::after { - display: none; + content: none; } [data-remarkdown] pre { - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; tab-size: 4; } [data-remarkdown~="pre-indent"] pre { - margin-left: 4ch; - margin-right: 0ch; + margin-inline: 0ch; } [data-remarkdown~="pre-tilde-full"] pre::before, @@ -272,7 +266,7 @@ [data-remarkdown~="pre-tick"] pre::after { display: block; width: 100%; - height: 1.5em; + height: 1lh; cursor: default; } @@ -298,7 +292,8 @@ } [data-remarkdown] blockquote { - margin: 1.5em 2ch 1.5em 2ch; + margin-block: 1lh; + margin-inline: 0ch; padding: 0; } @@ -307,15 +302,17 @@ } [data-remarkdown~="quote-gt"] blockquote::before { position: absolute; - top: 0; - left: -2ch; - bottom: 0; + inset-block: 0; + inset-inline-start: -2ch; width: 1ch; overflow: hidden; white-space: pre; content: ">\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a"; cursor: default; } +[data-remarkdown~="quote-gt"] blockquote:dir(rtl)::before { + content: "<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a"; +} [data-remarkdown~="del-gfm"] del { text-decoration: none; @@ -326,8 +323,7 @@ } [data-remarkdown~="table-marker"] table { - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; border-collapse: collapse; } [data-remarkdown~="table-marker"] tr > * { @@ -340,10 +336,10 @@ border: none; } [data-remarkdown~="table-marker"] tr > * + * { - padding-left: 3ch; + padding-inline-start: 3ch; } [data-remarkdown~="table-marker"] tr:first-child > th:not([scope="row"]) { - padding-bottom: 1.5em; + padding-bottom: 1lh; } [data-remarkdown~="table-marker"] tr:first-child @@ -351,24 +347,22 @@ content: "--------------------------------------------------------------------------------------------------------------"; position: absolute; bottom: 0; - left: 0; - right: 0; + inset-inline: 0; overflow: hidden; word-break: break-all; - height: 1.5em; + height: 1lh; } [data-remarkdown~="table-marker"] tr:first-child > * + th:not([scope="row"])::after { - left: 3ch; + inset-inline-start: 3ch; } [data-remarkdown~="table-marker"] tr > * + *::before { content: "|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a"; position: absolute; + inset-block: 0; + inset-inline-start: 1ch; overflow: hidden; - left: 1ch; - top: 0; - bottom: 0; white-space: pre; } diff --git a/dist/remarkdown-zero.css b/dist/remarkdown-zero.css index 135296f..73d327b 100644 --- a/dist/remarkdown-zero.css +++ b/dist/remarkdown-zero.css @@ -1,36 +1,27 @@ -/*! ReMarkdown-zero 3.1.0 (MIT) https://fvsch.github.io/remarkdown/ */ +/*! ReMarkdown-zero 4.0.0-alpha.1 (MIT) https://fvsch.github.io/remarkdown/ */ /* includes: all styles; defaults: none; */ .remarkdown { - line-height: 1.5; font-family: monospace, monospace; + line-height: 1.5; } -.remarkdown pre, -.remarkdown code, -.remarkdown kbd, -.remarkdown samp { +.remarkdown :is(pre, code, kbd, samp) { font-family: inherit; } .remarkdown.hn-reset h1 { font-size: inherit; font-weight: inherit; - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; } .remarkdown.hn-reset h2 { font-size: inherit; font-weight: inherit; - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; } -.remarkdown.hn-reset h3, -.remarkdown.hn-reset h4, -.remarkdown.hn-reset h5, -.remarkdown.hn-reset h6 { +.remarkdown.hn-reset :is(h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; } .remarkdown.hn-hash h1::before { @@ -57,7 +48,7 @@ display: table; overflow: hidden; position: relative; - padding-bottom: 1.5em; + padding-bottom: 1lh; } .remarkdown.h2-underline h2::before, .remarkdown.h1-underline h1::before { @@ -67,8 +58,8 @@ .remarkdown.h1-underline h1::after { position: absolute; bottom: 0; - left: 0; - height: 1.5em; + inset-inline: 0; + height: 1lh; width: 100%; overflow: hidden; word-break: break-all; @@ -84,17 +75,18 @@ } .remarkdown p { - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; } .remarkdown figure { - margin: 1.5em 0 1.5em; + margin-block: 1lh; + margin-inline: 0; } .remarkdown hr { - height: 1.5em; - line-height: 1.5em; - margin: 1.5em 0 1.5em; + height: 1lh; + line-height: 1lh; + margin-block: 1lh; + margin-inline: 0; border: none; color: inherit; } @@ -112,22 +104,22 @@ } .remarkdown ul { - margin: 1.5em 0ch 1.5em 4ch; + margin-block: 1lh; + margin-inline: 0ch; padding: 0; } .remarkdown li ul { - margin-top: 0; - margin-bottom: 0; + margin-block: 0; } .remarkdown.ul-plus ul { list-style: none; } .remarkdown.ul-plus ul > li::before { - float: left; + float: inline-start; width: 1ch; - margin-left: -4ch; - margin-right: 1ch; + margin-inline-start: 0ch; + margin-inline-end: 1ch; content: "+"; } @@ -135,10 +127,10 @@ list-style: none; } .remarkdown.ul-star ul > li::before { - float: left; + float: inline-start; width: 1ch; - margin-left: -4ch; - margin-right: 1ch; + margin-inline-start: 0ch; + margin-inline-end: 1ch; content: "*"; } @@ -146,20 +138,20 @@ list-style: none; } .remarkdown.ul-hyphen ul > li::before { - float: left; + float: inline-start; width: 1ch; - margin-left: -4ch; - margin-right: 1ch; + margin-inline-start: 0ch; + margin-inline-end: 1ch; content: "-"; } .remarkdown ol { - margin: 1.5em 0ch 1.5em 4ch; + margin-block: 1lh; + margin-inline: 0ch; padding: 0; } .remarkdown li ol { - margin-top: 0; - margin-bottom: 0; + margin-block: 0; } .remarkdown.ol-decimal ol { @@ -170,9 +162,9 @@ counter-increment: rmd-ol; } .remarkdown.ol-decimal ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; + float: inline-start; + margin-inline-start: 0ch; + margin-inline-end: 1ch; min-width: 2ch; content: counter(rmd-ol) "."; } @@ -181,9 +173,9 @@ list-style: none; } .remarkdown.ol-zero ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; + float: inline-start; + margin-inline-start: 0ch; + margin-inline-end: 1ch; min-width: 2ch; content: "0."; } @@ -196,9 +188,9 @@ counter-increment: rmd-ol; } .remarkdown.ol-alpha ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; + float: inline-start; + margin-inline-start: 0ch; + margin-inline-end: 1ch; min-width: 2ch; content: counter(rmd-ol, lower-alpha) "."; } @@ -218,8 +210,7 @@ word-break: break-all; } -.remarkdown em, -.remarkdown strong { +.remarkdown em { font-style: normal; font-weight: normal; } @@ -234,6 +225,11 @@ content: "_"; } +.remarkdown strong { + font-style: normal; + font-weight: normal; +} + .remarkdown.strong-star strong::before, .remarkdown.strong-star strong::after { content: "**"; @@ -250,18 +246,16 @@ } .remarkdown.code-tick pre code::before, .remarkdown.code-tick pre code::after { - display: none; + content: none; } .remarkdown pre { - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; tab-size: 4; } .remarkdown.pre-indent pre { - margin-left: 4ch; - margin-right: 0ch; + margin-inline: 0ch; } .remarkdown.pre-tilde-full pre::before, @@ -272,7 +266,7 @@ .remarkdown.pre-tick pre::after { display: block; width: 100%; - height: 1.5em; + height: 1lh; cursor: default; } @@ -298,7 +292,8 @@ } .remarkdown blockquote { - margin: 1.5em 2ch 1.5em 2ch; + margin-block: 1lh; + margin-inline: 0ch; padding: 0; } @@ -307,15 +302,17 @@ } .remarkdown.quote-gt blockquote::before { position: absolute; - top: 0; - left: -2ch; - bottom: 0; + inset-block: 0; + inset-inline-start: -2ch; width: 1ch; overflow: hidden; white-space: pre; content: ">\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a"; cursor: default; } +.remarkdown.quote-gt blockquote:dir(rtl)::before { + content: "<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a"; +} .remarkdown.del-gfm del { text-decoration: none; @@ -326,8 +323,7 @@ } .remarkdown.table-marker table { - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; border-collapse: collapse; } .remarkdown.table-marker tr > * { @@ -340,30 +336,28 @@ border: none; } .remarkdown.table-marker tr > * + * { - padding-left: 3ch; + padding-inline-start: 3ch; } .remarkdown.table-marker tr:first-child > th:not([scope="row"]) { - padding-bottom: 1.5em; + padding-bottom: 1lh; } .remarkdown.table-marker tr:first-child > th:not([scope="row"])::after { content: "--------------------------------------------------------------------------------------------------------------"; position: absolute; bottom: 0; - left: 0; - right: 0; + inset-inline: 0; overflow: hidden; word-break: break-all; - height: 1.5em; + height: 1lh; } .remarkdown.table-marker tr:first-child > * + th:not([scope="row"])::after { - left: 3ch; + inset-inline-start: 3ch; } .remarkdown.table-marker tr > * + *::before { content: "|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a"; position: absolute; + inset-block: 0; + inset-inline-start: 1ch; overflow: hidden; - left: 1ch; - top: 0; - bottom: 0; white-space: pre; } diff --git a/dist/remarkdown.attr.css b/dist/remarkdown.attr.css index 70c4ada..5809fab 100644 --- a/dist/remarkdown.attr.css +++ b/dist/remarkdown.attr.css @@ -1,36 +1,27 @@ -/*! ReMarkdown 3.1.0 [attr] (MIT) https://fvsch.github.io/remarkdown/ */ +/*! ReMarkdown 4.0.0-alpha.1 [attr] (MIT) https://fvsch.github.io/remarkdown/ */ /* includes: all styles; defaults: hn-reset hn-hash ul-hyphen ol-decimal quote-gt em-star strong-star a-bracket code-tick pre-indent hr-star; */ [data-remarkdown] { - line-height: 1.5; font-family: monospace, monospace; + line-height: 1.5; } -[data-remarkdown] pre, -[data-remarkdown] code, -[data-remarkdown] kbd, -[data-remarkdown] samp { +[data-remarkdown] :is(pre, code, kbd, samp) { font-family: inherit; } [data-remarkdown] h1 { font-size: inherit; font-weight: inherit; - margin-top: 2.25em; - margin-bottom: 1.5em; + margin-block: 1.5lh 1lh; } [data-remarkdown] h2 { font-size: inherit; font-weight: inherit; - margin-top: 2.25em; - margin-bottom: 1.5em; + margin-block: 1.5lh 1lh; } -[data-remarkdown] h3, -[data-remarkdown] h4, -[data-remarkdown] h5, -[data-remarkdown] h6 { +[data-remarkdown] :is(h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; } [data-remarkdown] h1::before { @@ -57,7 +48,7 @@ display: table; overflow: hidden; position: relative; - padding-bottom: 1.5em; + padding-bottom: 1lh; } [data-remarkdown~="h2-underline"] h2::before, [data-remarkdown~="h1-underline"] h1::before { @@ -67,8 +58,8 @@ [data-remarkdown~="h1-underline"] h1::after { position: absolute; bottom: 0; - left: 0; - height: 1.5em; + inset-inline: 0; + height: 1lh; width: 100%; overflow: hidden; word-break: break-all; @@ -84,17 +75,18 @@ } [data-remarkdown] p { - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; } [data-remarkdown] figure { - margin: 1.5em 0 1.5em; + margin-block: 1lh; + margin-inline: 0; } [data-remarkdown] hr { - height: 1.5em; - line-height: 1.5em; - margin: 1.5em 0 1.5em; + height: 1lh; + line-height: 1lh; + margin-block: 1lh; + margin-inline: 0; border: none; color: inherit; } @@ -112,22 +104,22 @@ } [data-remarkdown] ul { - margin: 1.5em 0ch 1.5em 4ch; + margin-block: 1lh; + margin-inline: 4ch 0ch; padding: 0; } [data-remarkdown] li ul { - margin-top: 0; - margin-bottom: 0; + margin-block: 0; } [data-remarkdown~="ul-plus"] ul { list-style: none; } [data-remarkdown~="ul-plus"] ul > li::before { - float: left; + float: inline-start; width: 1ch; - margin-left: -4ch; - margin-right: 1ch; + margin-inline-start: -4ch; + margin-inline-end: 1ch; content: "+"; } @@ -135,10 +127,10 @@ list-style: none; } [data-remarkdown~="ul-star"] ul > li::before { - float: left; + float: inline-start; width: 1ch; - margin-left: -4ch; - margin-right: 1ch; + margin-inline-start: -4ch; + margin-inline-end: 1ch; content: "*"; } @@ -146,20 +138,20 @@ list-style: none; } [data-remarkdown] ul > li::before { - float: left; + float: inline-start; width: 1ch; - margin-left: -4ch; - margin-right: 1ch; + margin-inline-start: -4ch; + margin-inline-end: 1ch; content: "-"; } [data-remarkdown] ol { - margin: 1.5em 0ch 1.5em 4ch; + margin-block: 1lh; + margin-inline: 4ch 0ch; padding: 0; } [data-remarkdown] li ol { - margin-top: 0; - margin-bottom: 0; + margin-block: 0; } [data-remarkdown] ol { @@ -170,9 +162,9 @@ counter-increment: rmd-ol; } [data-remarkdown] ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; + float: inline-start; + margin-inline-start: -4ch; + margin-inline-end: 1ch; min-width: 2ch; content: counter(rmd-ol) "."; } @@ -181,9 +173,9 @@ list-style: none; } [data-remarkdown~="ol-zero"] ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; + float: inline-start; + margin-inline-start: -4ch; + margin-inline-end: 1ch; min-width: 2ch; content: "0."; } @@ -196,9 +188,9 @@ counter-increment: rmd-ol; } [data-remarkdown~="ol-alpha"] ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; + float: inline-start; + margin-inline-start: -4ch; + margin-inline-end: 1ch; min-width: 2ch; content: counter(rmd-ol, lower-alpha) "."; } @@ -218,8 +210,7 @@ word-break: break-all; } -[data-remarkdown] em, -[data-remarkdown] strong { +[data-remarkdown] em { font-style: normal; font-weight: normal; } @@ -234,6 +225,11 @@ content: "_"; } +[data-remarkdown] strong { + font-style: normal; + font-weight: normal; +} + [data-remarkdown] strong::before, [data-remarkdown] strong::after { content: "**"; @@ -250,18 +246,16 @@ } [data-remarkdown] pre code::before, [data-remarkdown] pre code::after { - display: none; + content: none; } [data-remarkdown] pre { - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; tab-size: 4; } [data-remarkdown] pre { - margin-left: 4ch; - margin-right: 0ch; + margin-inline: 4ch 0ch; } [data-remarkdown~="pre-tilde-full"] pre::before, @@ -272,7 +266,7 @@ [data-remarkdown~="pre-tick"] pre::after { display: block; width: 100%; - height: 1.5em; + height: 1lh; cursor: default; } @@ -298,7 +292,8 @@ } [data-remarkdown] blockquote { - margin: 1.5em 2ch 1.5em 2ch; + margin-block: 1lh; + margin-inline: 2ch; padding: 0; } @@ -307,15 +302,17 @@ } [data-remarkdown] blockquote::before { position: absolute; - top: 0; - left: -2ch; - bottom: 0; + inset-block: 0; + inset-inline-start: -2ch; width: 1ch; overflow: hidden; white-space: pre; content: ">\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a"; cursor: default; } +[data-remarkdown] blockquote:dir(rtl)::before { + content: "<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a"; +} [data-remarkdown~="del-gfm"] del { text-decoration: none; @@ -326,8 +323,7 @@ } [data-remarkdown~="table-marker"] table { - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; border-collapse: collapse; } [data-remarkdown~="table-marker"] tr > * { @@ -340,10 +336,10 @@ border: none; } [data-remarkdown~="table-marker"] tr > * + * { - padding-left: 3ch; + padding-inline-start: 3ch; } [data-remarkdown~="table-marker"] tr:first-child > th:not([scope="row"]) { - padding-bottom: 1.5em; + padding-bottom: 1lh; } [data-remarkdown~="table-marker"] tr:first-child @@ -351,24 +347,22 @@ content: "--------------------------------------------------------------------------------------------------------------"; position: absolute; bottom: 0; - left: 0; - right: 0; + inset-inline: 0; overflow: hidden; word-break: break-all; - height: 1.5em; + height: 1lh; } [data-remarkdown~="table-marker"] tr:first-child > * + th:not([scope="row"])::after { - left: 3ch; + inset-inline-start: 3ch; } [data-remarkdown~="table-marker"] tr > * + *::before { content: "|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a"; position: absolute; + inset-block: 0; + inset-inline-start: 1ch; overflow: hidden; - left: 1ch; - top: 0; - bottom: 0; white-space: pre; } diff --git a/dist/remarkdown.css b/dist/remarkdown.css index ff06ce0..a5eea47 100644 --- a/dist/remarkdown.css +++ b/dist/remarkdown.css @@ -1,36 +1,27 @@ -/*! ReMarkdown 3.1.0 (MIT) https://fvsch.github.io/remarkdown/ */ +/*! ReMarkdown 4.0.0-alpha.1 (MIT) https://fvsch.github.io/remarkdown/ */ /* includes: all styles; defaults: hn-reset hn-hash ul-hyphen ol-decimal quote-gt em-star strong-star a-bracket code-tick pre-indent hr-star; */ .remarkdown { - line-height: 1.5; font-family: monospace, monospace; + line-height: 1.5; } -.remarkdown pre, -.remarkdown code, -.remarkdown kbd, -.remarkdown samp { +.remarkdown :is(pre, code, kbd, samp) { font-family: inherit; } .remarkdown h1 { font-size: inherit; font-weight: inherit; - margin-top: 2.25em; - margin-bottom: 1.5em; + margin-block: 1.5lh 1lh; } .remarkdown h2 { font-size: inherit; font-weight: inherit; - margin-top: 2.25em; - margin-bottom: 1.5em; + margin-block: 1.5lh 1lh; } -.remarkdown h3, -.remarkdown h4, -.remarkdown h5, -.remarkdown h6 { +.remarkdown :is(h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; } .remarkdown h1::before { @@ -57,7 +48,7 @@ display: table; overflow: hidden; position: relative; - padding-bottom: 1.5em; + padding-bottom: 1lh; } .remarkdown.h2-underline h2::before, .remarkdown.h1-underline h1::before { @@ -67,8 +58,8 @@ .remarkdown.h1-underline h1::after { position: absolute; bottom: 0; - left: 0; - height: 1.5em; + inset-inline: 0; + height: 1lh; width: 100%; overflow: hidden; word-break: break-all; @@ -84,17 +75,18 @@ } .remarkdown p { - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; } .remarkdown figure { - margin: 1.5em 0 1.5em; + margin-block: 1lh; + margin-inline: 0; } .remarkdown hr { - height: 1.5em; - line-height: 1.5em; - margin: 1.5em 0 1.5em; + height: 1lh; + line-height: 1lh; + margin-block: 1lh; + margin-inline: 0; border: none; color: inherit; } @@ -112,22 +104,22 @@ } .remarkdown ul { - margin: 1.5em 0ch 1.5em 4ch; + margin-block: 1lh; + margin-inline: 4ch 0ch; padding: 0; } .remarkdown li ul { - margin-top: 0; - margin-bottom: 0; + margin-block: 0; } .remarkdown.ul-plus ul { list-style: none; } .remarkdown.ul-plus ul > li::before { - float: left; + float: inline-start; width: 1ch; - margin-left: -4ch; - margin-right: 1ch; + margin-inline-start: -4ch; + margin-inline-end: 1ch; content: "+"; } @@ -135,10 +127,10 @@ list-style: none; } .remarkdown.ul-star ul > li::before { - float: left; + float: inline-start; width: 1ch; - margin-left: -4ch; - margin-right: 1ch; + margin-inline-start: -4ch; + margin-inline-end: 1ch; content: "*"; } @@ -146,20 +138,20 @@ list-style: none; } .remarkdown ul > li::before { - float: left; + float: inline-start; width: 1ch; - margin-left: -4ch; - margin-right: 1ch; + margin-inline-start: -4ch; + margin-inline-end: 1ch; content: "-"; } .remarkdown ol { - margin: 1.5em 0ch 1.5em 4ch; + margin-block: 1lh; + margin-inline: 4ch 0ch; padding: 0; } .remarkdown li ol { - margin-top: 0; - margin-bottom: 0; + margin-block: 0; } .remarkdown ol { @@ -170,9 +162,9 @@ counter-increment: rmd-ol; } .remarkdown ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; + float: inline-start; + margin-inline-start: -4ch; + margin-inline-end: 1ch; min-width: 2ch; content: counter(rmd-ol) "."; } @@ -181,9 +173,9 @@ list-style: none; } .remarkdown.ol-zero ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; + float: inline-start; + margin-inline-start: -4ch; + margin-inline-end: 1ch; min-width: 2ch; content: "0."; } @@ -196,9 +188,9 @@ counter-increment: rmd-ol; } .remarkdown.ol-alpha ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; + float: inline-start; + margin-inline-start: -4ch; + margin-inline-end: 1ch; min-width: 2ch; content: counter(rmd-ol, lower-alpha) "."; } @@ -218,8 +210,7 @@ word-break: break-all; } -.remarkdown em, -.remarkdown strong { +.remarkdown em { font-style: normal; font-weight: normal; } @@ -234,6 +225,11 @@ content: "_"; } +.remarkdown strong { + font-style: normal; + font-weight: normal; +} + .remarkdown strong::before, .remarkdown strong::after { content: "**"; @@ -250,18 +246,16 @@ } .remarkdown pre code::before, .remarkdown pre code::after { - display: none; + content: none; } .remarkdown pre { - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; tab-size: 4; } .remarkdown pre { - margin-left: 4ch; - margin-right: 0ch; + margin-inline: 4ch 0ch; } .remarkdown.pre-tilde-full pre::before, @@ -272,7 +266,7 @@ .remarkdown.pre-tick pre::after { display: block; width: 100%; - height: 1.5em; + height: 1lh; cursor: default; } @@ -298,7 +292,8 @@ } .remarkdown blockquote { - margin: 1.5em 2ch 1.5em 2ch; + margin-block: 1lh; + margin-inline: 2ch; padding: 0; } @@ -307,15 +302,17 @@ } .remarkdown blockquote::before { position: absolute; - top: 0; - left: -2ch; - bottom: 0; + inset-block: 0; + inset-inline-start: -2ch; width: 1ch; overflow: hidden; white-space: pre; content: ">\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a"; cursor: default; } +.remarkdown blockquote:dir(rtl)::before { + content: "<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a"; +} .remarkdown.del-gfm del { text-decoration: none; @@ -326,8 +323,7 @@ } .remarkdown.table-marker table { - margin-top: 1.5em; - margin-bottom: 1.5em; + margin-block: 1lh; border-collapse: collapse; } .remarkdown.table-marker tr > * { @@ -340,30 +336,28 @@ border: none; } .remarkdown.table-marker tr > * + * { - padding-left: 3ch; + padding-inline-start: 3ch; } .remarkdown.table-marker tr:first-child > th:not([scope="row"]) { - padding-bottom: 1.5em; + padding-bottom: 1lh; } .remarkdown.table-marker tr:first-child > th:not([scope="row"])::after { content: "--------------------------------------------------------------------------------------------------------------"; position: absolute; bottom: 0; - left: 0; - right: 0; + inset-inline: 0; overflow: hidden; word-break: break-all; - height: 1.5em; + height: 1lh; } .remarkdown.table-marker tr:first-child > * + th:not([scope="row"])::after { - left: 3ch; + inset-inline-start: 3ch; } .remarkdown.table-marker tr > * + *::before { content: "|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a"; position: absolute; + inset-block: 0; + inset-inline-start: 1ch; overflow: hidden; - left: 1ch; - top: 0; - bottom: 0; white-space: pre; } diff --git a/docs/demo.css b/docs/demo.css index 21a42eb..396b4f0 100644 --- a/docs/demo.css +++ b/docs/demo.css @@ -1,390 +1,708 @@ /** * Styles for ReMarkdown demo pages */ -/*! ReMarkdown 3.1.0 (MIT) https://fvsch.github.io/remarkdown/ */ -/* includes: all styles; defaults: hn-reset hn-hash ul-hyphen ol-decimal quote-gt em-star strong-star a-bracket code-tick pre-indent hr-star; */ -.remarkdown { - line-height: 1.5; - font-family: monospace, monospace; -} -.remarkdown pre, -.remarkdown code, -.remarkdown kbd, -.remarkdown samp { - font-family: inherit; -} - -.remarkdown h1 { - font-size: inherit; - font-weight: inherit; - margin-top: 2.25em; - margin-bottom: 1.5em; -} -.remarkdown h2 { - font-size: inherit; - font-weight: inherit; - margin-top: 2.25em; - margin-bottom: 1.5em; -} -.remarkdown h3, -.remarkdown h4, -.remarkdown h5, -.remarkdown h6 { - font-size: inherit; - font-weight: inherit; - margin-top: 1.5em; - margin-bottom: 1.5em; -} - -.remarkdown h1::before { - content: "# "; -} -.remarkdown h2::before { - content: "## "; -} -.remarkdown h3::before { - content: "### "; -} -.remarkdown h4::before { - content: "#### "; -} -.remarkdown h5::before { - content: "##### "; -} -.remarkdown h6::before { - content: "###### "; -} - -.remarkdown.h2-underline h2, -.remarkdown.h1-underline h1 { - display: table; - overflow: hidden; - position: relative; - padding-bottom: 1.5em; -} -.remarkdown.h2-underline h2::before, -.remarkdown.h1-underline h1::before { - content: none; -} -.remarkdown.h2-underline h2::after, -.remarkdown.h1-underline h1::after { - position: absolute; - bottom: 0; - left: 0; - height: 1.5em; - width: 100%; - overflow: hidden; - word-break: break-all; - cursor: default; -} - -.remarkdown.h1-underline h1::after { - content: "========================================================================================================================"; -} - -.remarkdown.h2-underline h2::after { - content: "------------------------------------------------------------------------------------------------------------------------"; -} - -.remarkdown p { - margin-top: 1.5em; - margin-bottom: 1.5em; -} -.remarkdown figure { - margin: 1.5em 0 1.5em; -} - -.remarkdown hr { - height: 1.5em; - line-height: 1.5em; - margin: 1.5em 0 1.5em; - border: none; - color: inherit; -} - -.remarkdown.hr-center hr { - text-align: center; -} - -.remarkdown hr::before { - content: "* * * *"; -} - -.remarkdown.hr-hyphen hr::before { - content: "-------"; -} - -.remarkdown ul { - margin: 1.5em 0ch 1.5em 4ch; - padding: 0; -} -.remarkdown li ul { - margin-top: 0; - margin-bottom: 0; -} - -.remarkdown.ul-plus ul { - list-style: none; -} -.remarkdown.ul-plus ul > li::before { - float: left; - width: 1ch; - margin-left: -4ch; - margin-right: 1ch; - content: "+"; -} - -.remarkdown.ul-star ul { - list-style: none; -} -.remarkdown.ul-star ul > li::before { - float: left; - width: 1ch; - margin-left: -4ch; - margin-right: 1ch; - content: "*"; -} - -.remarkdown ul { - list-style: none; -} -.remarkdown ul > li::before { - float: left; - width: 1ch; - margin-left: -4ch; - margin-right: 1ch; - content: "-"; -} - -.remarkdown ol { - margin: 1.5em 0ch 1.5em 4ch; - padding: 0; -} -.remarkdown li ol { - margin-top: 0; - margin-bottom: 0; -} - -.remarkdown ol { - list-style: none; - counter-reset: rmd-ol; -} -.remarkdown ol > li { - counter-increment: rmd-ol; -} -.remarkdown ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; - min-width: 2ch; - content: counter(rmd-ol) "."; -} - -.remarkdown.ol-zero ol { - list-style: none; -} -.remarkdown.ol-zero ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; - min-width: 2ch; - content: "0."; -} - -.remarkdown.ol-alpha ol { - list-style: none; - counter-reset: rmd-ol; -} -.remarkdown.ol-alpha ol > li { - counter-increment: rmd-ol; -} -.remarkdown.ol-alpha ol > li::before { - float: left; - margin-left: -4ch; - margin-right: 1ch; - min-width: 2ch; - content: counter(rmd-ol, lower-alpha) "."; -} - -.remarkdown a::before { - content: "["; -} -.remarkdown a::after { - content: "]"; -} - -.remarkdown.a-showurl a[href]::before { - content: "["; -} -.remarkdown.a-showurl a[href]::after { - content: "](" attr(href) ")"; - word-break: break-all; -} - -.remarkdown em, -.remarkdown strong { - font-style: normal; - font-weight: normal; -} - -.remarkdown em::before, -.remarkdown em::after { - content: "*"; -} - -.remarkdown.em-underscore em::before, -.remarkdown.em-underscore em::after { - content: "_"; -} - -.remarkdown strong::before, -.remarkdown strong::after { - content: "**"; -} - -.remarkdown.strong-underscore strong::before, -.remarkdown.strong-underscore strong::after { - content: "__"; -} - -.remarkdown code::before, -.remarkdown code::after { - content: "`"; -} -.remarkdown pre code::before, -.remarkdown pre code::after { - display: none; -} - -.remarkdown pre { - margin-top: 1.5em; - margin-bottom: 1.5em; - tab-size: 4; -} - -.remarkdown pre { - margin-left: 4ch; - margin-right: 0ch; -} - -.remarkdown.pre-tilde-full pre::before, -.remarkdown.pre-tilde-full pre::after, -.remarkdown.pre-tilde pre::before, -.remarkdown.pre-tilde pre::after, -.remarkdown.pre-tick pre::before, -.remarkdown.pre-tick pre::after { - display: block; - width: 100%; - height: 1.5em; - cursor: default; -} - -.remarkdown.pre-tick pre::before, -.remarkdown.pre-tick pre::after { - content: "```"; - position: relative; - top: 0.25em; -} - -.remarkdown.pre-tilde pre::before, -.remarkdown.pre-tilde pre::after { - content: "~~~"; - overflow: hidden; - word-break: break-all; -} - -.remarkdown.pre-tilde-full pre::before, -.remarkdown.pre-tilde-full pre::after { - content: "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"; - overflow: hidden; - word-break: break-all; -} - -.remarkdown blockquote { - margin: 1.5em 2ch 1.5em 2ch; - padding: 0; -} - -.remarkdown blockquote { - position: relative; -} -.remarkdown blockquote::before { - position: absolute; - top: 0; - left: -2ch; - bottom: 0; - width: 1ch; - overflow: hidden; - white-space: pre; - content: ">\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a"; - cursor: default; -} - -.remarkdown.del-gfm del { - text-decoration: none; -} -.remarkdown.del-gfm del::before, -.remarkdown.del-gfm del::after { - content: "~~"; -} - -.remarkdown.table-marker table { - margin-top: 1.5em; - margin-bottom: 1.5em; - border-collapse: collapse; -} -.remarkdown.table-marker tr > * { - min-width: 3ch; - position: relative; - padding: 0; - text-align: inherit; - vertical-align: top; - font-weight: normal; - border: none; -} -.remarkdown.table-marker tr > * + * { - padding-left: 3ch; -} -.remarkdown.table-marker tr:first-child > th:not([scope="row"]) { - padding-bottom: 1.5em; -} -.remarkdown.table-marker tr:first-child > th:not([scope="row"])::after { - content: "--------------------------------------------------------------------------------------------------------------"; - position: absolute; - bottom: 0; - left: 0; - right: 0; - overflow: hidden; - word-break: break-all; - height: 1.5em; -} -.remarkdown.table-marker tr:first-child > * + th:not([scope="row"])::after { - left: 3ch; +@layer remarkdown, remarkdown-zero-attr; +@layer remarkdown { + /*! ReMarkdown 4.0.0-alpha.1 (MIT) https://fvsch.github.io/remarkdown/ */ + /* includes: all styles; defaults: hn-reset hn-hash ul-hyphen ol-decimal quote-gt em-star strong-star a-bracket code-tick pre-indent hr-star; */ + .remarkdown { + font-family: Menlo, Monaco, "DejaVu Sans Mono", Consolas, monospace; + line-height: 1.5; + } + .remarkdown :is(pre, code, kbd, samp) { + font-family: inherit; + } + .remarkdown h1 { + font-size: inherit; + font-weight: inherit; + margin-block: 1.5lh 1lh; + } + .remarkdown h2 { + font-size: inherit; + font-weight: inherit; + margin-block: 1.5lh 1lh; + } + .remarkdown :is(h3, h4, h5, h6) { + font-size: inherit; + font-weight: inherit; + margin-block: 1lh; + } + .remarkdown h1::before { + content: "# "; + } + .remarkdown h2::before { + content: "## "; + } + .remarkdown h3::before { + content: "### "; + } + .remarkdown h4::before { + content: "#### "; + } + .remarkdown h5::before { + content: "##### "; + } + .remarkdown h6::before { + content: "###### "; + } + [data-remarkdown~="h2-underline"] h2, + [data-remarkdown~="h1-underline"] h1, + .remarkdown.h2-underline h2, + .remarkdown.h1-underline h1 { + display: table; + overflow: hidden; + position: relative; + padding-bottom: 1lh; + } + [data-remarkdown~="h2-underline"] h2::before, + [data-remarkdown~="h1-underline"] h1::before, + .remarkdown.h2-underline h2::before, + .remarkdown.h1-underline h1::before { + content: none; + } + [data-remarkdown~="h2-underline"] h2::after, + [data-remarkdown~="h1-underline"] h1::after, + .remarkdown.h2-underline h2::after, + .remarkdown.h1-underline h1::after { + position: absolute; + bottom: 0; + inset-inline: 0; + height: 1lh; + width: 100%; + overflow: hidden; + word-break: break-all; + cursor: default; + } + .remarkdown.h1-underline h1::after { + content: "========================================================================================================================"; + } + .remarkdown.h2-underline h2::after { + content: "------------------------------------------------------------------------------------------------------------------------"; + } + .remarkdown p { + margin-block: 1lh; + } + .remarkdown figure { + margin-block: 1lh; + margin-inline: 0; + } + .remarkdown hr { + height: 1lh; + line-height: 1lh; + margin-block: 1lh; + margin-inline: 0; + border: none; + color: inherit; + } + .remarkdown.hr-center hr { + text-align: center; + } + .remarkdown hr::before { + content: "* * * *"; + } + .remarkdown.hr-hyphen hr::before { + content: "-------"; + } + .remarkdown ul { + margin-block: 1lh; + margin-inline: 4ch 0ch; + padding: 0; + } + .remarkdown li ul { + margin-block: 0; + } + .remarkdown.ul-plus ul { + list-style: none; + } + .remarkdown.ul-plus ul > li::before { + float: inline-start; + width: 1ch; + margin-inline-start: -4ch; + margin-inline-end: 1ch; + content: "+"; + } + .remarkdown.ul-star ul { + list-style: none; + } + .remarkdown.ul-star ul > li::before { + float: inline-start; + width: 1ch; + margin-inline-start: -4ch; + margin-inline-end: 1ch; + content: "*"; + } + .remarkdown ul { + list-style: none; + } + .remarkdown ul > li::before { + float: inline-start; + width: 1ch; + margin-inline-start: -4ch; + margin-inline-end: 1ch; + content: "-"; + } + .remarkdown ol { + margin-block: 1lh; + margin-inline: 4ch 0ch; + padding: 0; + } + .remarkdown li ol { + margin-block: 0; + } + .remarkdown ol { + list-style: none; + counter-reset: rmd-ol; + } + .remarkdown ol > li { + counter-increment: rmd-ol; + } + .remarkdown ol > li::before { + float: inline-start; + margin-inline-start: -4ch; + margin-inline-end: 1ch; + min-width: 2ch; + content: counter(rmd-ol) "."; + } + .remarkdown.ol-zero ol { + list-style: none; + } + .remarkdown.ol-zero ol > li::before { + float: inline-start; + margin-inline-start: -4ch; + margin-inline-end: 1ch; + min-width: 2ch; + content: "0."; + } + .remarkdown.ol-alpha ol { + list-style: none; + counter-reset: rmd-ol; + } + .remarkdown.ol-alpha ol > li { + counter-increment: rmd-ol; + } + .remarkdown.ol-alpha ol > li::before { + float: inline-start; + margin-inline-start: -4ch; + margin-inline-end: 1ch; + min-width: 2ch; + content: counter(rmd-ol, lower-alpha) "."; + } + .remarkdown a::before { + content: "["; + } + .remarkdown a::after { + content: "]"; + } + .remarkdown.a-showurl a[href]::before { + content: "["; + } + .remarkdown.a-showurl a[href]::after { + content: "](" attr(href) ")"; + word-break: break-all; + } + .remarkdown em { + font-style: normal; + font-weight: normal; + } + .remarkdown em::before, + .remarkdown em::after { + content: "*"; + } + .remarkdown.em-underscore em::before, + .remarkdown.em-underscore em::after { + content: "_"; + } + .remarkdown strong { + font-style: normal; + font-weight: normal; + } + .remarkdown strong::before, + .remarkdown strong::after { + content: "**"; + } + .remarkdown.strong-underscore strong::before, + .remarkdown.strong-underscore strong::after { + content: "__"; + } + .remarkdown code::before, + .remarkdown code::after { + content: "`"; + } + .remarkdown pre code::before, + .remarkdown pre code::after { + content: none; + } + .remarkdown pre { + margin-block: 1lh; + tab-size: 4; + } + .remarkdown pre { + margin-inline: 4ch 0ch; + } + [data-remarkdown~="pre-tilde-full"] pre::before, + [data-remarkdown~="pre-tilde-full"] pre::after, + [data-remarkdown~="pre-tilde"] pre::before, + [data-remarkdown~="pre-tilde"] pre::after, + [data-remarkdown~="pre-tick"] pre::before, + [data-remarkdown~="pre-tick"] pre::after, + .remarkdown.pre-tilde-full pre::before, + .remarkdown.pre-tilde-full pre::after, + .remarkdown.pre-tilde pre::before, + .remarkdown.pre-tilde pre::after, + .remarkdown.pre-tick pre::before, + .remarkdown.pre-tick pre::after { + display: block; + width: 100%; + height: 1lh; + cursor: default; + } + .remarkdown.pre-tick pre::before, + .remarkdown.pre-tick pre::after { + content: "```"; + position: relative; + top: 0.25em; + } + .remarkdown.pre-tilde pre::before, + .remarkdown.pre-tilde pre::after { + content: "~~~"; + overflow: hidden; + word-break: break-all; + } + .remarkdown.pre-tilde-full pre::before, + .remarkdown.pre-tilde-full pre::after { + content: "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"; + overflow: hidden; + word-break: break-all; + } + .remarkdown blockquote { + margin-block: 1lh; + margin-inline: 2ch; + padding: 0; + } + .remarkdown blockquote { + position: relative; + } + .remarkdown blockquote::before { + position: absolute; + inset-block: 0; + inset-inline-start: -2ch; + width: 1ch; + overflow: hidden; + white-space: pre; + content: ">\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a"; + cursor: default; + } + .remarkdown blockquote:dir(rtl)::before { + content: "<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a"; + } + .remarkdown.del-gfm del { + text-decoration: none; + } + .remarkdown.del-gfm del::before, + .remarkdown.del-gfm del::after { + content: "~~"; + } + .remarkdown.table-marker table { + margin-block: 1lh; + border-collapse: collapse; + } + .remarkdown.table-marker tr > * { + min-width: 3ch; + position: relative; + padding: 0; + text-align: inherit; + vertical-align: top; + font-weight: normal; + border: none; + } + .remarkdown.table-marker tr > * + * { + padding-inline-start: 3ch; + } + .remarkdown.table-marker tr:first-child > th:not([scope="row"]) { + padding-bottom: 1lh; + } + .remarkdown.table-marker tr:first-child > th:not([scope="row"])::after { + content: "--------------------------------------------------------------------------------------------------------------"; + position: absolute; + bottom: 0; + inset-inline: 0; + overflow: hidden; + word-break: break-all; + height: 1lh; + } + .remarkdown.table-marker tr:first-child > * + th:not([scope="row"])::after { + inset-inline-start: 3ch; + } + .remarkdown.table-marker tr > * + *::before { + content: "|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a"; + position: absolute; + inset-block: 0; + inset-inline-start: 1ch; + overflow: hidden; + white-space: pre; + } } -.remarkdown.table-marker tr > * + *::before { - content: "|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a"; - position: absolute; - overflow: hidden; - left: 1ch; - top: 0; - bottom: 0; - white-space: pre; +@layer remarkdown-zero-attr { + /*! ReMarkdown-zero 4.0.0-alpha.1 [attr] (MIT) https://fvsch.github.io/remarkdown/ */ + /* includes: all styles; defaults: none; */ + [data-remarkdown] { + font-family: monospace, monospace; + line-height: 1.5; + } + [data-remarkdown] :is(pre, code, kbd, samp) { + font-family: inherit; + } + [data-remarkdown~="hn-reset"] h1 { + font-size: inherit; + font-weight: inherit; + margin-block: 1lh; + } + [data-remarkdown~="hn-reset"] h2 { + font-size: inherit; + font-weight: inherit; + margin-block: 1lh; + } + [data-remarkdown~="hn-reset"] :is(h3, h4, h5, h6) { + font-size: inherit; + font-weight: inherit; + margin-block: 1lh; + } + [data-remarkdown~="hn-hash"] h1::before { + content: "# "; + } + [data-remarkdown~="hn-hash"] h2::before { + content: "## "; + } + [data-remarkdown~="hn-hash"] h3::before { + content: "### "; + } + [data-remarkdown~="hn-hash"] h4::before { + content: "#### "; + } + [data-remarkdown~="hn-hash"] h5::before { + content: "##### "; + } + [data-remarkdown~="hn-hash"] h6::before { + content: "###### "; + } + [data-remarkdown~="h2-underline"] h2, + [data-remarkdown~="h1-underline"] h1, + .remarkdown.h1-underline h1, + .remarkdown.h2-underline h2 { + display: table; + overflow: hidden; + position: relative; + padding-bottom: 1lh; + } + [data-remarkdown~="h2-underline"] h2::before, + [data-remarkdown~="h1-underline"] h1::before, + .remarkdown.h1-underline h1::before, + .remarkdown.h2-underline h2::before { + content: none; + } + [data-remarkdown~="h2-underline"] h2::after, + [data-remarkdown~="h1-underline"] h1::after, + .remarkdown.h1-underline h1::after, + .remarkdown.h2-underline h2::after { + position: absolute; + bottom: 0; + inset-inline: 0; + height: 1lh; + width: 100%; + overflow: hidden; + word-break: break-all; + cursor: default; + } + [data-remarkdown~="h1-underline"] h1::after { + content: "========================================================================================================================"; + } + [data-remarkdown~="h2-underline"] h2::after { + content: "------------------------------------------------------------------------------------------------------------------------"; + } + [data-remarkdown] p { + margin-block: 1lh; + } + [data-remarkdown] figure { + margin-block: 1lh; + margin-inline: 0; + } + [data-remarkdown] hr { + height: 1lh; + line-height: 1lh; + margin-block: 1lh; + margin-inline: 0; + border: none; + color: inherit; + } + [data-remarkdown~="hr-center"] hr { + text-align: center; + } + [data-remarkdown~="hr-star"] hr::before { + content: "* * * *"; + } + [data-remarkdown~="hr-hyphen"] hr::before { + content: "-------"; + } + [data-remarkdown] ul { + margin-block: 1lh; + margin-inline: 0ch; + padding: 0; + } + [data-remarkdown] li ul { + margin-block: 0; + } + [data-remarkdown~="ul-plus"] ul { + list-style: none; + } + [data-remarkdown~="ul-plus"] ul > li::before { + float: inline-start; + width: 1ch; + margin-inline-start: 0ch; + margin-inline-end: 1ch; + content: "+"; + } + [data-remarkdown~="ul-star"] ul { + list-style: none; + } + [data-remarkdown~="ul-star"] ul > li::before { + float: inline-start; + width: 1ch; + margin-inline-start: 0ch; + margin-inline-end: 1ch; + content: "*"; + } + [data-remarkdown~="ul-hyphen"] ul { + list-style: none; + } + [data-remarkdown~="ul-hyphen"] ul > li::before { + float: inline-start; + width: 1ch; + margin-inline-start: 0ch; + margin-inline-end: 1ch; + content: "-"; + } + [data-remarkdown] ol { + margin-block: 1lh; + margin-inline: 0ch; + padding: 0; + } + [data-remarkdown] li ol { + margin-block: 0; + } + [data-remarkdown~="ol-decimal"] ol { + list-style: none; + counter-reset: rmd-ol; + } + [data-remarkdown~="ol-decimal"] ol > li { + counter-increment: rmd-ol; + } + [data-remarkdown~="ol-decimal"] ol > li::before { + float: inline-start; + margin-inline-start: 0ch; + margin-inline-end: 1ch; + min-width: 2ch; + content: counter(rmd-ol) "."; + } + [data-remarkdown~="ol-zero"] ol { + list-style: none; + } + [data-remarkdown~="ol-zero"] ol > li::before { + float: inline-start; + margin-inline-start: 0ch; + margin-inline-end: 1ch; + min-width: 2ch; + content: "0."; + } + [data-remarkdown~="ol-alpha"] ol { + list-style: none; + counter-reset: rmd-ol; + } + [data-remarkdown~="ol-alpha"] ol > li { + counter-increment: rmd-ol; + } + [data-remarkdown~="ol-alpha"] ol > li::before { + float: inline-start; + margin-inline-start: 0ch; + margin-inline-end: 1ch; + min-width: 2ch; + content: counter(rmd-ol, lower-alpha) "."; + } + [data-remarkdown~="a-bracket"] a::before { + content: "["; + } + [data-remarkdown~="a-bracket"] a::after { + content: "]"; + } + [data-remarkdown~="a-showurl"] a[href]::before { + content: "["; + } + [data-remarkdown~="a-showurl"] a[href]::after { + content: "](" attr(href) ")"; + word-break: break-all; + } + [data-remarkdown] em { + font-style: normal; + font-weight: normal; + } + [data-remarkdown~="em-star"] em::before, + [data-remarkdown~="em-star"] em::after { + content: "*"; + } + [data-remarkdown~="em-underscore"] em::before, + [data-remarkdown~="em-underscore"] em::after { + content: "_"; + } + [data-remarkdown] strong { + font-style: normal; + font-weight: normal; + } + [data-remarkdown~="strong-star"] strong::before, + [data-remarkdown~="strong-star"] strong::after { + content: "**"; + } + [data-remarkdown~="strong-underscore"] strong::before, + [data-remarkdown~="strong-underscore"] strong::after { + content: "__"; + } + [data-remarkdown~="code-tick"] code::before, + [data-remarkdown~="code-tick"] code::after { + content: "`"; + } + [data-remarkdown~="code-tick"] pre code::before, + [data-remarkdown~="code-tick"] pre code::after { + content: none; + } + [data-remarkdown] pre { + margin-block: 1lh; + tab-size: 4; + } + [data-remarkdown~="pre-indent"] pre { + margin-inline: 0ch; + } + [data-remarkdown~="pre-tilde-full"] pre::before, + [data-remarkdown~="pre-tilde-full"] pre::after, + [data-remarkdown~="pre-tilde"] pre::before, + [data-remarkdown~="pre-tilde"] pre::after, + [data-remarkdown~="pre-tick"] pre::before, + [data-remarkdown~="pre-tick"] pre::after, + .remarkdown.pre-tick pre::before, + .remarkdown.pre-tick pre::after, + .remarkdown.pre-tilde pre::before, + .remarkdown.pre-tilde pre::after, + .remarkdown.pre-tilde-full pre::before, + .remarkdown.pre-tilde-full pre::after { + display: block; + width: 100%; + height: 1lh; + cursor: default; + } + [data-remarkdown~="pre-tick"] pre::before, + [data-remarkdown~="pre-tick"] pre::after { + content: "```"; + position: relative; + top: 0.25em; + } + [data-remarkdown~="pre-tilde"] pre::before, + [data-remarkdown~="pre-tilde"] pre::after { + content: "~~~"; + overflow: hidden; + word-break: break-all; + } + [data-remarkdown~="pre-tilde-full"] pre::before, + [data-remarkdown~="pre-tilde-full"] pre::after { + content: "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"; + overflow: hidden; + word-break: break-all; + } + [data-remarkdown] blockquote { + margin-block: 1lh; + margin-inline: 0ch; + padding: 0; + } + [data-remarkdown~="quote-gt"] blockquote { + position: relative; + } + [data-remarkdown~="quote-gt"] blockquote::before { + position: absolute; + inset-block: 0; + inset-inline-start: -2ch; + width: 1ch; + overflow: hidden; + white-space: pre; + content: ">\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a"; + cursor: default; + } + [data-remarkdown~="quote-gt"] blockquote:dir(rtl)::before { + content: "<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a<\a"; + } + [data-remarkdown~="del-gfm"] del { + text-decoration: none; + } + [data-remarkdown~="del-gfm"] del::before, + [data-remarkdown~="del-gfm"] del::after { + content: "~~"; + } + [data-remarkdown~="table-marker"] table { + margin-block: 1lh; + border-collapse: collapse; + } + [data-remarkdown~="table-marker"] tr > * { + min-width: 3ch; + position: relative; + padding: 0; + text-align: inherit; + vertical-align: top; + font-weight: normal; + border: none; + } + [data-remarkdown~="table-marker"] tr > * + * { + padding-inline-start: 3ch; + } + [data-remarkdown~="table-marker"] tr:first-child > th:not([scope="row"]) { + padding-bottom: 1lh; + } + [data-remarkdown~="table-marker"] + tr:first-child + > th:not([scope="row"])::after { + content: "--------------------------------------------------------------------------------------------------------------"; + position: absolute; + bottom: 0; + inset-inline: 0; + overflow: hidden; + word-break: break-all; + height: 1lh; + } + [data-remarkdown~="table-marker"] + tr:first-child + > * + + th:not([scope="row"])::after { + inset-inline-start: 3ch; + } + [data-remarkdown~="table-marker"] tr > * + *::before { + content: "|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a"; + position: absolute; + inset-block: 0; + inset-inline-start: 1ch; + overflow: hidden; + white-space: pre; + } } - /* Demo layout and page styles */ +html { + background-color: white; +} @media (min-width: 900px) { html { background-color: #eee; } } + body { max-width: 660px; padding: 30px; margin: 0 auto; color: #202020; - background-color: white; } - @media (min-width: 900px) { body { margin: 30px auto; @@ -394,6 +712,7 @@ body { box-shadow: 3px 3px 3px -2px #ddd; } } + a { color: #f02050; text-decoration: none; @@ -413,21 +732,19 @@ nav { margin: 0 0 4em; text-align: right; } - nav > br { display: none; } - nav > span { float: left; } - @media (max-width: 900px) { nav > * { display: block; padding-bottom: 0.4em; } } + .example { margin: 1.5em -30px; padding: 0.5em 30px; @@ -439,6 +756,11 @@ nav > span { white-space: nowrap; } +/* Our own font-family. Also setting one for code elements */ +.remarkdown { + font-family: Menlo, Monaco, "DejaVu Sans Mono", Consolas, monospace; +} + /* Make the Markdown-like markers look cool */ .remarkdown ::before, .remarkdown ::after { @@ -446,9 +768,8 @@ nav > span { color: #205080; } -/* Our own font-family. Also setting one for code elements */ -.remarkdown { - font-family: Menlo, Monaco, "DejaVu Sans Mono", Consolas, monospace; +.remarkdown code { + color: #802020; } .remarkdown pre { @@ -456,17 +777,13 @@ nav > span { color: #802020; font-family: Courier, "Courier New", monospace; } - -.remarkdown code { - color: #802020; -} - @media (max-width: 700px) { .remarkdown pre { - margin-left: 0 !important; + margin-inline-start: 0 !important; } } + .remarkdown table { - margin: 2.5em 0; + margin-block: 2.5em; font-size: 95%; } diff --git a/docs/demo.scss b/docs/demo.scss index 3f87b59..adf1c2b 100644 --- a/docs/demo.scss +++ b/docs/demo.scss @@ -1,109 +1,134 @@ +@use "../lib/remarkdown" as rmd; + /** * Styles for ReMarkdown demo pages */ -// Class-based build of ReMarkdown using default styles - -$rmd-selector-base: ".remarkdown"; -$rmd-selector-option: ".remarkdown.%o"; - -@import "../src/_imports.scss"; -@include rmd-header("ReMarkdown %v (MIT) https://fvsch.github.io/remarkdown/"); -@include rmd-output(); +@layer remarkdown, remarkdown-zero-attr; + +/// Class-based build of ReMarkdown using default styles +@layer remarkdown { + @include rmd.configure( + $selector-base: ".remarkdown", + $selector-option: ".remarkdown.%o", + $primary-font: ( + Menlo, + Monaco, + "DejaVu Sans Mono", + Consolas, + monospace, + ) + ); + @include rmd.header("ReMarkdown %v (MIT) https://fvsch.github.io/remarkdown/"); + @include rmd.output(); +} + +/// Attribute-based build of ReMarkdown with no default styles +@layer remarkdown-zero-attr { + @include rmd.configure( + $selector-base: "[data-remarkdown]", + $selector-option: '[data-remarkdown~="%o"]', + $default-styles: (), + $margins: () + ); + @include rmd.header("ReMarkdown-zero %v [attr] (MIT) https://fvsch.github.io/remarkdown/"); + @include rmd.output(); +} /* Demo layout and page styles */ -@media (min-width: 900px) { - html { - background-color: #EEE; - } +html { + background-color: white; + @media (min-width: 900px) { + background-color: #eee; + } } body { - max-width: 660px; - padding: 30px; - margin: 0 auto; - color: #202020; - background-color: white; -} - -@media (min-width: 900px) { - body { - margin: 30px auto; - padding: 40px 80px; - border: 1px solid #DDD; - background-color: white; - box-shadow: 3px 3px 3px -2px #DDD; - } + max-width: 660px; + padding: 30px; + margin: 0 auto; + color: #202020; + + @media (min-width: 900px) { + margin: 30px auto; + padding: 40px 80px; + border: 1px solid #ddd; + background-color: white; + box-shadow: 3px 3px 3px -2px #ddd; + } } a { - color: #F02050; - text-decoration: none; + color: #f02050; + text-decoration: none; } a:hover { - border-bottom: 1px solid; + border-bottom: 1px solid; } -a:focus, a:active { - color: white; - background-color: #F02050; +a:focus, +a:active { + color: white; + background-color: #f02050; } nav { - margin: 0 0 4em; - text-align: right; -} -nav > br { - display: none; -} -nav > span { - float: left; -} -@media (max-width: 900px) { - nav > * { display: block; padding-bottom: .4em; } + margin: 0 0 4em; + text-align: right; + + & > br { + display: none; + } + & > span { + float: left; + } + @media (max-width: 900px) { + & > * { + display: block; + padding-bottom: 0.4em; + } + } } .example { - margin: 1.5em -30px; - padding: .5em 30px; - background: #EEF; + margin: 1.5em -30px; + padding: 0.5em 30px; + background: #eef; } /* Styles page */ #style-list tr > * { - white-space: nowrap; + white-space: nowrap; +} + +/* Our own font-family. Also setting one for code elements */ +.remarkdown { + font-family: Menlo, Monaco, "DejaVu Sans Mono", Consolas, monospace; } /* Make the Markdown-like markers look cool */ .remarkdown ::before, .remarkdown ::after { - opacity: .6; - color: #205080; + opacity: 0.6; + color: #205080; } -/* Our own font-family. Also setting one for code elements */ -.remarkdown { - font-family: Menlo, Monaco, "DejaVu Sans Mono", Consolas, monospace; +.remarkdown code { + color: #802020; } .remarkdown pre { - white-space: pre-wrap; - color: #802020; - font-family: Courier, "Courier New", monospace; -} - -.remarkdown code { - color: #802020; -} + white-space: pre-wrap; + color: #802020; + font-family: Courier, "Courier New", monospace; -@media (max-width: 700px) { - .remarkdown pre { - margin-left: 0 !important; - } + @media (max-width: 700px) { + margin-inline-start: 0 !important; + } } .remarkdown table { - margin: 2.5em 0; - font-size: 95%; + margin-block: 2.5em; + font-size: 95%; } diff --git a/docs/styles.html b/docs/styles.html index 8d7fee1..e564288 100644 --- a/docs/styles.html +++ b/docs/styles.html @@ -5,7 +5,6 @@ReMarkdown — Available styles - diff --git a/lib/_config.scss b/lib/_config.scss new file mode 100644 index 0000000..6465509 --- /dev/null +++ b/lib/_config.scss @@ -0,0 +1,39 @@ +@use "sass:list"; +@use "sass:map"; +@use "sass:meta"; + +@use "./defaults"; +@use "./utils/str"; + +$-defaults: meta.module-variables("defaults"); +$-state: $-defaults; + +@mixin configure($args...) { + $options: meta.keywords($args); + @each $name, $value in $options { + @if map.has-key($-defaults, $name) == false { + $list: map.keys($-defaults); + @error "Unknown option #{$name}, expected one of: #{$list}."; + } + } + $-state: map.merge($-defaults, $options) !global; +} + +@function get($keys, $type: null) { + $value: null; + @if meta.type-of($keys) == string { + $value: map.get($-state, $keys); + } @else { + $value: map.get($-state, $keys...); + } + @if $type != null and $type != meta.type-of($value) { + $path: str.join($keys, "."); + @error "Config value for #{$path} has type #{meta.type-of($value)}, expected #{$type}"; + } + @return $value; +} + +@function is-default($name) { + $list: get("default-styles", list); + @return list.index($list, $name) != null; +} diff --git a/src/_options.scss b/lib/_defaults.scss similarity index 51% rename from src/_options.scss rename to lib/_defaults.scss index e44a82b..0634e18 100644 --- a/src/_options.scss +++ b/lib/_defaults.scss @@ -1,24 +1,14 @@ -// ------------------------ -// ReMarkdown build options -// ------------------------ - // Selectors for the ReMarkdown container and options // (%o will be replaced with the option name) -$rmd-selector-base: ".remarkdown" !default; -$rmd-selector-option: ".remarkdown.%o" !default; - -// Whether we should include styles for ALL alternative styles (true), -// or only for styles listed in $rmd-defaults (false). -// If false, the CSS build will be smaller, but setting options -// in HTML with classes or attribute values will be impossible. -$rmd-output-all-styles: true !default; +$selector-base: ".remarkdown"; +$selector-option: ".remarkdown.%o"; // Default style variations. // Separate values with whitespace. Remove or comment out options you // don't want. Note that all option names are singular: // e.g. "hr-hyphen" even if we use several hyphens to display a
. // prettier-ignore -$rmd-defaults: +$default-styles: hn-reset hn-hash // h1-underline @@ -46,106 +36,106 @@ $rmd-defaults: // hr-hyphen // del-gfm // table-marker -!default; +; + +// Whether we should include styles for ALL alternative styles (true), +// or only for styles listed in $default-styles (false). +// If false, the CSS build will be smaller, but setting options +// in HTML with classes or attribute values will be impossible. +$output-all-styles: true; // Should ReMarkdown try to define a font-family, and reset font sizes, styles // and weights? It's generally useful but if you want to define your fonts // styles separately, set this to false. -// If false, $rmd-primary-font and $rmd-code-font are ignored. -$rmd-set-font-styles: true !default; +// If false, $primary-font, $code-font and $line-height are ignored. +$set-font-styles: true; // Font stack to use. // AVOID using "monospace" only, or browsers might use a default small // text size (13px). Always define one or more font families before the // final ", monospace". -$rmd-primary-font: monospace, monospace !default; +$primary-font: monospace, monospace; // For elements that are traditionnaly monospace, use a different font? -$rmd-code-font: inherit !default; +$code-font: inherit; -// Height of a line (as a unit-less ratio, e.g. 1.5) -$rmd-line-ratio: 1.5 !default; +// Base line-height (as a unit-less ratio, e.g. 1.5) +$line-height: 1.5; -// Vertical margins for titles and more (as number of lines) +// Width of one step of vertical margin. +// Typically, the height of an empty text line. +$margin-block-base: 1lh; + +// Width of one step of horizontal margin. +// Typically, the width of one space character. +$margin-inline-base: 1ch; + +// Vertical and horizontal margins for elements, as unitless numbers: +// - vertical margins ("top" and "bottom") are multiples of the base line-height. +// - horizontal margind ("inline-start" and "inline-end") // By default we use one line for everything, but you can specify more here: -$rmd-margins: ( - h1: ( - top: 1.5, - bottom: 1, - ), - h2: ( - top: 1.5, - bottom: 1, - ), - hn: ( - top: 1, - bottom: 1, +$margins: ( + "h1": ( + "top": 1.5, + "bottom": 1, ), - hr: ( - top: 1, - bottom: 1, + "h2": ( + "top": 1.5, + "bottom": 1, ), - p: ( - top: 1, - bottom: 1, + "hn": ( + "top": 1, + "bottom": 1, ), - pre: ( - top: 1, - bottom: 1, + "hr": ( + "top": 1, + "bottom": 1, ), - ol: ( - top: 1, - bottom: 1, + "p": ( + "top": 1, + "bottom": 1, ), - ul: ( - top: 1, - bottom: 1, + "pre": ( + "top": 1, + "bottom": 1, + "inline-start": 4, + "inline-end": 0, ), - figure: ( - top: 1, - bottom: 1, + "ol": ( + "top": 1, + "bottom": 1, + "inline-start": 4, + "inline-end": 0, ), - blockquote: ( - top: 1, - bottom: 1, + "ul": ( + "top": 1, + "bottom": 1, + "inline-start": 4, + "inline-end": 0, ), - table: ( - top: 1, - bottom: 1, + "figure": ( + "top": 1, + "bottom": 1, ), -) !default; - -// Horizontal indents (as number of characters) for a few elements -$rmd-indents: ( - ul: ( - left: 4, - right: 0, - ), - ol: ( - left: 4, - right: 0, + "blockquote": ( + "top": 1, + "bottom": 1, + "inline-start": 2, + "inline-end": 2, ), - pre: ( - left: 4, - right: 0, + "table": ( + "top": 1, + "bottom": 1, ), - blockquote: ( - left: 2, - right: 2, - ), -) !default; - -// By default we use the `em` unit for vertical spacing. -// This low-level option allows using `rem` instead. -$rmd-prefer-rem: false !default; +); // HR patterns -$rmd-hr-stars: "* * * *" !default; -$rmd-hr-hyphens: "-------" !default; +$hr-stars: "* * * *"; +$hr-hyphens: "-------"; // Character used for simple headings -$rmd-heading-sign: "#" !default; +$heading-sign: "#"; // Characters used for underlined headings -$rmd-h1-underline: "==========" !default; -$rmd-h2-underline: "----------" !default; +$h1-underline: "=========="; +$h2-underline: "----------"; diff --git a/lib/remarkdown.scss b/lib/remarkdown.scss new file mode 100644 index 0000000..cc92f6e --- /dev/null +++ b/lib/remarkdown.scss @@ -0,0 +1,47 @@ +$-version: "4.0.0-alpha.1"; + +@use "sass:list"; +@use "sass:meta"; + +@forward "./config" show configure; +@forward "./styles/all" show output-base, output-code, output-del, output-em, output-hn, output-hr, + output-link, output-ol, output-para, output-pre, output-quote, output-strong, output-table, + output-ul; + +@use "./config"; +@use "./styles/all" as *; +@use "./utils/str"; + +@mixin header($title: "ReMarkdown %v") { + $included: "all styles"; + @if config.get("output-all-styles") != true { + $included: "default-styles only"; + } + + $list: config.get("default-styles", list); + @if list.length($list) == 0 { + $list: "none"; + } + @if $title { + $title: str.replace($title, "%v", $-version); + /*! #{$title} */ + /* includes: #{$included}; defaults: #{$list}; */ + } +} + +@mixin output { + @include output-base; + @include output-hn; + @include output-para; + @include output-hr; + @include output-ul; + @include output-ol; + @include output-a; + @include output-em; + @include output-strong; + @include output-code; + @include output-pre; + @include output-quote; + @include output-del; + @include output-table; +} diff --git a/lib/styles/_all.scss b/lib/styles/_all.scss new file mode 100644 index 0000000..3b4f5a6 --- /dev/null +++ b/lib/styles/_all.scss @@ -0,0 +1,14 @@ +@forward "./base"; +@forward "./code"; +@forward "./del"; +@forward "./em"; +@forward "./hn"; +@forward "./hr"; +@forward "./link"; +@forward "./ol"; +@forward "./para"; +@forward "./pre"; +@forward "./quote"; +@forward "./strong"; +@forward "./table"; +@forward "./ul"; diff --git a/lib/styles/_base.scss b/lib/styles/_base.scss new file mode 100644 index 0000000..32392b8 --- /dev/null +++ b/lib/styles/_base.scss @@ -0,0 +1,17 @@ +// Base + +@use "../config"; +@use "../utils/selector"; + +@mixin output-base { + @if config.get("set-font-styles", bool) { + @include selector.base { + font-family: config.get("primary-font"); + line-height: config.get("line-height", number); + + :is(pre, code, kbd, samp) { + font-family: config.get("code-font", string); + } + } + } +} diff --git a/lib/styles/_code.scss b/lib/styles/_code.scss new file mode 100644 index 0000000..79f435c --- /dev/null +++ b/lib/styles/_code.scss @@ -0,0 +1,17 @@ +//+// Options: code-tick + +@use "../utils/selector"; + +@mixin output-code { + @include selector.option("code-tick") { + code::before, + code::after { + content: "`"; + } + pre code::before, + pre code::after { + content: none; + } + } +} diff --git a/lib/styles/_del.scss b/lib/styles/_del.scss new file mode 100644 index 0000000..c0be2c7 --- /dev/null +++ b/lib/styles/_del.scss @@ -0,0 +1,16 @@ +//+// Option: del-gfm + +@use "../utils/selector"; + +@mixin output-del { + @include selector.option("del-gfm") { + del { + text-decoration: none; + } + del::before, + del::after { + content: "~~"; + } + } +} diff --git a/lib/styles/_em.scss b/lib/styles/_em.scss new file mode 100644 index 0000000..09e8e1c --- /dev/null +++ b/lib/styles/_em.scss @@ -0,0 +1,28 @@ +// +// Options: em-star, em-underscore + +@use "../config"; +@use "../utils/selector"; + +@mixin output-em { + @if config.get("set-font-styles", bool) { + @include selector.base { + em { + font-style: normal; + font-weight: normal; + } + } + } + @include selector.option("em-star") { + em::before, + em::after { + content: "*"; + } + } + @include selector.option("em-underscore") { + em::before, + em::after { + content: "_"; + } + } +} diff --git a/lib/styles/_hn.scss b/lib/styles/_hn.scss new file mode 100644 index 0000000..38d241f --- /dev/null +++ b/lib/styles/_hn.scss @@ -0,0 +1,72 @@ +// Headings +// Options: hn-hash, h1-underline, h2-undelrine + +@use "../config"; +@use "../utils/selector"; +@use "../utils/spacing"; +@use "../utils/str"; + +@mixin output-hn { + @include selector.option("hn-reset") { + h1 { + font-size: inherit; + font-weight: inherit; + margin-block: spacing.margins("h1"); + } + h2 { + font-size: inherit; + font-weight: inherit; + margin-block: spacing.margins("h2"); + } + :is(h3, h4, h5, h6) { + font-size: inherit; + font-weight: inherit; + margin-block: spacing.margins("hn"); + } + } + @include selector.option("hn-hash") { + $sign: config.get("heading-sign", string); + @for $i from 1 through 6 { + h#{$i}::before { + content: str.repeat($sign, $i) + " "; + } + } + } + %-hn-underline-common { + display: table; + overflow: hidden; + position: relative; + padding-bottom: spacing.line(); + &::before { + content: none; + } + &::after { + position: absolute; + bottom: 0; + inset-inline: 0; + height: spacing.line(); + width: 100%; + overflow: hidden; + word-break: break-all; + cursor: default; + } + } + @include selector.option("h1-underline") { + $chars: config.get("h1-underline"); + h1 { + @extend %-hn-underline-common; + &::after { + content: str.repeat($chars, 12); + } + } + } + @include selector.option("h2-underline") { + $chars: config.get("h2-underline"); + h2 { + @extend %-hn-underline-common; + &::after { + content: str.repeat($chars, 12); + } + } + } +} diff --git a/lib/styles/_hr.scss b/lib/styles/_hr.scss new file mode 100644 index 0000000..4c0f635 --- /dev/null +++ b/lib/styles/_hr.scss @@ -0,0 +1,34 @@ +// Horizontal rules +// Options: hr-center, hr-star, hr-hyphen + +@use "../config"; +@use "../utils/selector"; +@use "../utils/spacing"; + +@mixin output-hr { + @include selector.base { + hr { + height: spacing.line(); + line-height: spacing.line(); + margin-block: spacing.margins("hr"); + margin-inline: 0; + border: none; + color: inherit; + } + } + @include selector.option("hr-center") { + hr { + text-align: center; + } + } + @include selector.option("hr-star") { + hr::before { + content: config.get("hr-stars", string); + } + } + @include selector.option("hr-hyphen") { + hr::before { + content: config.get("hr-hyphens", string); + } + } +} diff --git a/lib/styles/_link.scss b/lib/styles/_link.scss new file mode 100644 index 0000000..bb733af --- /dev/null +++ b/lib/styles/_link.scss @@ -0,0 +1,24 @@ +// Links +// Options: a-bracket, a-showurl + +@use "../utils/selector"; + +@mixin output-a { + @include selector.option("a-bracket") { + a::before { + content: "["; + } + a::after { + content: "]"; + } + } + @include selector.option("a-showurl") { + a[href]::before { + content: "["; + } + a[href]::after { + content: "](" attr(href) ")"; + word-break: break-all; + } + } +} diff --git a/lib/styles/_ol.scss b/lib/styles/_ol.scss new file mode 100644 index 0000000..cfdcc82 --- /dev/null +++ b/lib/styles/_ol.scss @@ -0,0 +1,54 @@ +//+// Options: ol-decimal, ol-zero, ol-alpha + +@use "../utils/selector"; +@use "../utils/spacing"; + +@mixin output-ol { + @include selector.base() { + ol { + margin-block: spacing.margins("ol"); + margin-inline: spacing.indents("ol"); + padding: 0; + } + li ol { + margin-block: 0; + } + } + @include selector.option("ol-decimal") { + @include -ol-li-before("decimal"); + } + @include selector.option("ol-zero") { + @include -ol-li-before("zero"); + } + @include selector.option("ol-alpha") { + @include -ol-li-before("alpha"); + } +} + +@mixin -ol-li-before($type) { + ol { + list-style: none; + @if $type != "zero" { + counter-reset: rmd-ol; + } + } + @if $type != "zero" { + ol > li { + counter-increment: rmd-ol; + } + } + ol > li::before { + float: inline-start; + margin-inline-start: spacing.indent("ol", "start") * -1; + margin-inline-end: 1ch; + min-width: 2ch; + @if $type == "zero" { + content: "0."; + } @else if $type == "alpha" { + content: counter(rmd-ol, lower-alpha) "."; + } @else { + content: counter(rmd-ol) "."; + } + } +} diff --git a/lib/styles/_para.scss b/lib/styles/_para.scss new file mode 100644 index 0000000..f5dc632 --- /dev/null +++ b/lib/styles/_para.scss @@ -0,0 +1,16 @@ +// Paragraphs + +@use "../utils/selector"; +@use "../utils/spacing"; + +@mixin output-para { + @include selector.base { + p { + margin-block: spacing.margins("p"); + } + figure { + margin-block: spacing.margins("figure"); + margin-inline: 0; + } + } +} diff --git a/lib/styles/_pre.scss b/lib/styles/_pre.scss new file mode 100644 index 0000000..98fd201 --- /dev/null +++ b/lib/styles/_pre.scss @@ -0,0 +1,53 @@ +//
+// Options: pre-indent, pre-tick, pre-tilde, pre-tilde-full + +@use "../utils/selector"; +@use "../utils/spacing"; +@use "../utils/str"; + +@mixin output-pre { + @include selector.base { + pre { + margin-block: spacing.margins("pre"); + tab-size: 4; + } + } + @include selector.option("pre-indent") { + pre { + margin-inline: spacing.indents("pre"); + } + } + %-pre-fence-pseudo { + display: block; + width: 100%; + height: spacing.line(); + cursor: default; + } + @include selector.option("pre-tick") { + pre::before, + pre::after { + @extend %-pre-fence-pseudo; + content: "```"; + position: relative; + top: 0.25em; + } + } + @include selector.option("pre-tilde") { + pre::before, + pre::after { + @extend %-pre-fence-pseudo; + content: "~~~"; + overflow: hidden; + word-break: break-all; + } + } + @include selector.option("pre-tilde-full") { + pre::before, + pre::after { + @extend %-pre-fence-pseudo; + content: str.repeat("~~~~~~~~~~", 12); + overflow: hidden; + word-break: break-all; + } + } +} diff --git a/lib/styles/_quote.scss b/lib/styles/_quote.scss new file mode 100644 index 0000000..f35393a --- /dev/null +++ b/lib/styles/_quote.scss @@ -0,0 +1,34 @@ +// Quotes (not managed since not in Markdown) +// Option: quote-gt + +@use "../utils/selector"; +@use "../utils/spacing"; +@use "../utils/str"; + +@mixin output-quote { + @include selector.base { + blockquote { + margin-block: spacing.margins("blockquote"); + margin-inline: spacing.indents("blockquote"); + padding: 0; + } + } + @include selector.option("quote-gt") { + blockquote { + position: relative; + } + blockquote::before { + position: absolute; + inset-block: 0; + inset-inline-start: -2ch; + width: 1ch; + overflow: hidden; + white-space: pre; + content: str.repeat(">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A", 20); + cursor: default; + } + blockquote:dir(rtl)::before { + content: str.repeat("<\A<\A<\A<\A<\A<\A<\A<\A<\A<\A", 20); + } + } +} diff --git a/lib/styles/_strong.scss b/lib/styles/_strong.scss new file mode 100644 index 0000000..b983de0 --- /dev/null +++ b/lib/styles/_strong.scss @@ -0,0 +1,28 @@ +// +// Options: strong-star, strong-underscore + +@use "../config"; +@use "../utils/selector"; + +@mixin output-strong { + @if config.get("set-font-styles", bool) { + @include selector.base { + strong { + font-style: normal; + font-weight: normal; + } + } + } + @include selector.option("strong-star") { + strong::before, + strong::after { + content: "**"; + } + } + @include selector.option("strong-underscore") { + strong::before, + strong::after { + content: "__"; + } + } +} diff --git a/lib/styles/_table.scss b/lib/styles/_table.scss new file mode 100644 index 0000000..26b5fcf --- /dev/null +++ b/lib/styles/_table.scss @@ -0,0 +1,50 @@ +// Tables +// Option: table-marker + +@use "../utils/selector"; +@use "../utils/spacing"; +@use "../utils/str"; + +@mixin output-table { + @include selector.option("table-marker") { + table { + margin-block: spacing.margins("table"); + border-collapse: collapse; + } + tr > * { + min-width: 3ch; + position: relative; + padding: 0; + text-align: inherit; + vertical-align: top; + font-weight: normal; + border: none; + } + tr > * + * { + padding-inline-start: 3ch; + } + tr:first-child > th:not([scope="row"]) { + padding-bottom: spacing.line(); + } + tr:first-child > th:not([scope="row"])::after { + content: str.repeat("-----------", 10); + position: absolute; + bottom: 0; + inset-inline: 0; + overflow: hidden; + word-break: break-all; + height: spacing.line(); + } + tr:first-child > * + th:not([scope="row"])::after { + inset-inline-start: 3ch; + } + tr > * + *::before { + content: str.repeat("|\A", 10); + position: absolute; + inset-block: 0; + inset-inline-start: 1ch; + overflow: hidden; + white-space: pre; + } + } +} diff --git a/lib/styles/_ul.scss b/lib/styles/_ul.scss new file mode 100644 index 0000000..afa7a15 --- /dev/null +++ b/lib/styles/_ul.scss @@ -0,0 +1,40 @@ +//+// Options: ul-star, ul-plus, ul-hyphen + +@use "../utils/selector"; +@use "../utils/spacing"; + +@mixin output-ul { + @include selector.base { + ul { + margin-block: spacing.margins("ul"); + margin-inline: spacing.indents("ul"); + padding: 0; + } + li ul { + margin-block: 0; + } + } + @include selector.option("ul-plus") { + @include -ul-li-before("+"); + } + @include selector.option("ul-star") { + @include -ul-li-before("*"); + } + @include selector.option("ul-hyphen") { + @include -ul-li-before("-"); + } +} + +@mixin -ul-li-before($sign) { + ul { + list-style: none; + } + ul > li::before { + float: inline-start; + width: 1ch; + margin-inline-start: spacing.indent("ul", "start") * -1; + margin-inline-end: 1ch; + content: $sign; + } +} diff --git a/lib/utils/_selector.scss b/lib/utils/_selector.scss new file mode 100644 index 0000000..8422a57 --- /dev/null +++ b/lib/utils/_selector.scss @@ -0,0 +1,35 @@ +@use "../config"; +@use "./str"; + +/// Wrap content in the base selector +@mixin base { + #{-selector-base()} { + @content; + } +} + +/// Wrap content in a selector including the option name, depending on +/// the content of $defaults and the value of $output-all-styles. +/// Outputs nothing if $output-all-styles is false and the option is not +/// in $defaults. +@mixin option($name) { + $selector: %rmd-void; + @if config.is-default($name) { + #{-selector-base()} { + @content; + } + } @else if config.get("output-all-styles") == true { + #{-selector-option($name)} { + @content; + } + } +} + +@function -selector-base() { + @return config.get("selector-base", string); +} + +@function -selector-option($name) { + $pattern: config.get("selector-option", string); + @return str.replace($pattern, "%o", $name); +} diff --git a/lib/utils/_spacing.scss b/lib/utils/_spacing.scss new file mode 100644 index 0000000..c0b47df --- /dev/null +++ b/lib/utils/_spacing.scss @@ -0,0 +1,48 @@ +@use "../config"; + +/// Get a margin value in em from $margins. +/// If not set, returns a value of 1 line. +@function margin($element, $direction) { + @if $direction == "top" or $direction == "bottom" { + $num: config.get("margins" $element $direction) or 1; + @return line($num); + } @else { + @error "Unknown direction #{$direction}"; + } +} + +/// Get both vertical margin values for an element. +/// Returns a single value if both values are identical, +/// or two values otherwise. Suitable for use with e.g. margin-block. +@function margins($element) { + $top: margin($element, "top"); + $bottom: margin($element, "bottom"); + @return if(sass($top == $bottom): $top; else: $top $bottom); +} + +/// Get a horizontal margin (indent) value for an element. +/// If not set, returns a value of 0. +@function indent($element, $direction) { + @if $direction == "start" or $direction == "end" { + $num: config.get("margins" $element "inline-" + $direction) or 0; + $base: config.get("margin-inline-base", number); + @return $num * $base; + } @else { + @error "Unknown direction #{$direction}"; + } +} + +/// Get both horizontal margin (indent) values for an element. +/// Returns a single value if both values are identical, +/// or two values otherwise. Suitable for use with e.g. padding-inline. +@function indents($element) { + $start: indent($element, "start"); + $end: indent($element, "end"); + @return if(sass($start == $end): $start; else: $start $end); +} + +/// Compute the size of a text line +@function line($count: 1) { + $base: config.get("margin-block-base", number); + @return $base * $count; +} diff --git a/lib/utils/_str.scss b/lib/utils/_str.scss new file mode 100644 index 0000000..b9d4969 --- /dev/null +++ b/lib/utils/_str.scss @@ -0,0 +1,31 @@ +@use "sass:string"; + +@function join($list, $char: "") { + $acc: ""; + @each $item in $list { + @if $acc != "" { + $acc: $acc + string.unquote($char); + } + $acc: $acc + string.unquote($item); + } + @return string.quote($acc); +} + +@function repeat($string, $times) { + $result: ""; + @for $i from 1 through $times { + $result: $result + $string; + } + @return $result; +} + +@function replace($string, $search, $replacement: "") { + $index: string.index($string, $search); + @if $index { + $start: string.slice($string, 1, $index - 1); + $end: string.slice($string, $index + string.length($search)); + @return $start + $replacement + replace($end, $search, $replacement); + } @else { + @return $string; + } +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..5aa71d4 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,480 @@ +{ + "name": "remarkdown.css", + "version": "3.1.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "remarkdown.css", + "version": "3.1.0", + "license": "MIT", + "devDependencies": { + "prettier": "^3.8.1", + "sass": "^1.97.3", + "servitsy": "^0.5.0" + } + }, + "node_modules/@parcel/watcher": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz", + "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "dependencies": { + "detect-libc": "^2.0.3", + "is-glob": "^4.0.3", + "node-addon-api": "^7.0.0", + "picomatch": "^4.0.3" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.5.6", + "@parcel/watcher-darwin-arm64": "2.5.6", + "@parcel/watcher-darwin-x64": "2.5.6", + "@parcel/watcher-freebsd-x64": "2.5.6", + "@parcel/watcher-linux-arm-glibc": "2.5.6", + "@parcel/watcher-linux-arm-musl": "2.5.6", + "@parcel/watcher-linux-arm64-glibc": "2.5.6", + "@parcel/watcher-linux-arm64-musl": "2.5.6", + "@parcel/watcher-linux-x64-glibc": "2.5.6", + "@parcel/watcher-linux-x64-musl": "2.5.6", + "@parcel/watcher-win32-arm64": "2.5.6", + "@parcel/watcher-win32-ia32": "2.5.6", + "@parcel/watcher-win32-x64": "2.5.6" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz", + "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz", + "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz", + "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz", + "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz", + "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz", + "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz", + "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz", + "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz", + "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz", + "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz", + "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-ia32": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz", + "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz", + "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/chokidar": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", + "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", + "dev": true, + "license": "MIT", + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/detect-libc": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/immutable": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz", + "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==", + "dev": true, + "license": "MIT" + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true, + "license": "MIT", + "optional": true + }, + "node_modules/picomatch": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", + "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/prettier": { + "version": "3.8.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz", + "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/readdirp": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", + "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 14.18.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sass": { + "version": "1.97.3", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz", + "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==", + "dev": true, + "license": "MIT", + "dependencies": { + "chokidar": "^4.0.0", + "immutable": "^5.0.2", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" + } + }, + "node_modules/servitsy": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/servitsy/-/servitsy-0.5.0.tgz", + "integrity": "sha512-ui13eYG7o/7jnC5K6Hk30VpFa/RsC6PqSipgPsSrAmkNKTjXfF1sqLhLuWmN097g4vTwSrpC5uoh8jt4WWAdWw==", + "dev": true, + "license": "MIT", + "bin": { + "servitsy": "bin/servitsy.js" + } + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + } + } +} diff --git a/package.json b/package.json index 9db8c9e..5a0e54c 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,30 @@ { "name": "remarkdown.css", - "version": "3.1.0", + "version": "4.0.0-alpha.1", "license": "MIT", + "description": "ReMarkdown styles HTML to look like plain Markdown text.", + "homepage": "https://fvsch.github.io/remarkdown/", + "repository": { + "type": "git", + "url": "https://github.com/fvsch/remarkdown.git" + }, "author": "Florens Verschelde", - "repository": "https://github.com/fvsch/remarkdown", "keywords": [ "css", "markdown" ], + "files": [ + "README.md", + "dist", + "lib" + ], + "type": "module", + "exports": { + "sass": "./lib/remarkdown.scss", + "style": "./dist/remarkdown.css" + }, "scripts": { - "build": "node src/build.js", + "build": "node build.js", "format": "prettier --write src", "start": "servitsy docs" }, diff --git a/preset/remarkdown-zero.attr.scss b/preset/remarkdown-zero.attr.scss new file mode 100644 index 0000000..bbe59d8 --- /dev/null +++ b/preset/remarkdown-zero.attr.scss @@ -0,0 +1,12 @@ +// Attribute-based build of ReMarkdown with no default styles + +@use "../lib/remarkdown" as rmd; + +@include rmd.configure( + $selector-base: "[data-remarkdown]", + $selector-option: '[data-remarkdown~="%o"]', + $default-styles: (), + $margins: () +); +@include rmd.header("ReMarkdown-zero %v [attr] (MIT) https://fvsch.github.io/remarkdown/"); +@include rmd.output(); diff --git a/preset/remarkdown-zero.scss b/preset/remarkdown-zero.scss new file mode 100644 index 0000000..f2b3b7a --- /dev/null +++ b/preset/remarkdown-zero.scss @@ -0,0 +1,12 @@ +// Class-based build of ReMarkdown with no default styles + +@use "../lib/remarkdown" as rmd; + +@include rmd.configure( + $selector-base: ".remarkdown", + $selector-option: ".remarkdown.%o", + $default-styles: (), + $margins: () +); +@include rmd.header("ReMarkdown-zero %v (MIT) https://fvsch.github.io/remarkdown/"); +@include rmd.output(); diff --git a/preset/remarkdown.attr.scss b/preset/remarkdown.attr.scss new file mode 100644 index 0000000..69c038d --- /dev/null +++ b/preset/remarkdown.attr.scss @@ -0,0 +1,10 @@ +// Attribute-based build of ReMarkdown using default styles + +@use "../lib/remarkdown" as rmd; + +@include rmd.configure( + $selector-base: "[data-remarkdown]", + $selector-option: '[data-remarkdown~="%o"]' +); +@include rmd.header("ReMarkdown %v [attr] (MIT) https://fvsch.github.io/remarkdown/"); +@include rmd.output(); diff --git a/preset/remarkdown.scss b/preset/remarkdown.scss new file mode 100644 index 0000000..c5fd479 --- /dev/null +++ b/preset/remarkdown.scss @@ -0,0 +1,7 @@ +// Class-based build of ReMarkdown using default styles + +@use "../lib/remarkdown" as rmd; + +@include rmd.configure($selector-base: ".remarkdown", $selector-option: ".remarkdown.%o"); +@include rmd.header("ReMarkdown %v (MIT) https://fvsch.github.io/remarkdown/"); +@include rmd.output(); diff --git a/src/_imports.scss b/src/_imports.scss deleted file mode 100644 index 2336db8..0000000 --- a/src/_imports.scss +++ /dev/null @@ -1,20 +0,0 @@ -@import "_options.scss"; -@import "_toolkit.scss"; -@import "_styles.scss"; - -@mixin rmd-output { - @include rmd-output-base; - @include rmd-output-hn; - @include rmd-output-para; - @include rmd-output-hr; - @include rmd-output-ul; - @include rmd-output-ol; - @include rmd-output-a; - @include rmd-output-em; - @include rmd-output-strong; - @include rmd-output-code; - @include rmd-output-pre; - @include rmd-output-quote; - @include rmd-output-del; - @include rmd-output-table; -} diff --git a/src/_styles.scss b/src/_styles.scss deleted file mode 100644 index edc5c4c..0000000 --- a/src/_styles.scss +++ /dev/null @@ -1,461 +0,0 @@ -// ------------------------------------ -// Basic ReMarkdown styles for elements -// ------------------------------------ - -// Base - -@mixin rmd-output-base { - @include __rmd_selector { - line-height: $rmd-line-ratio; - @if $rmd-set-font-styles { - font-family: $rmd-primary-font; - pre, - code, - kbd, - samp { - font-family: $rmd-code-font; - } - } - } -} - -// Headings -// Options: hn-hash, h1-underline, h2-undelrine - -@mixin rmd-output-hn { - @include __rmd_selector("hn-reset") { - h1 { - font-size: inherit; - font-weight: inherit; - margin-top: __rmd-margin("h1", "top"); - margin-bottom: __rmd-margin("h1", "bottom"); - } - h2 { - font-size: inherit; - font-weight: inherit; - margin-top: __rmd-margin("h2", "top"); - margin-bottom: __rmd-margin("h2", "bottom"); - } - h3, - h4, - h5, - h6 { - font-size: inherit; - font-weight: inherit; - margin-top: __rmd-margin("hn", "top"); - margin-bottom: __rmd-margin("hn", "bottom"); - } - } - @include __rmd_selector("hn-hash") { - @for $i from 1 through 6 { - h#{$i}::before { - content: __rmd_repeat($rmd-heading-sign, $i) + " "; - } - } - } - %hn-underline-common { - display: table; - overflow: hidden; - position: relative; - padding-bottom: $__rmd-line; - &::before { - content: none; - } - &::after { - position: absolute; - bottom: 0; - left: 0; - height: $__rmd-line; - width: 100%; - overflow: hidden; - word-break: break-all; - cursor: default; - } - } - @include __rmd_selector("h1-underline") { - h1 { - @extend %hn-underline-common; - &::after { - content: __rmd_repeat($rmd-h1-underline, 12); - } - } - } - @include __rmd_selector("h2-underline") { - h2 { - @extend %hn-underline-common; - &::after { - content: __rmd_repeat($rmd-h2-underline, 12); - } - } - } -} - -// Paragraphs - -@mixin rmd-output-para { - @include __rmd_selector { - p { - margin-top: __rmd-margin("p", "top"); - margin-bottom: __rmd-margin("p", "bottom"); - } - figure { - margin: __rmd-margin("figure", "top") 0 __rmd-margin("figure", "bottom"); - } - } -} - -// Lists -// Options: ul-star, ul-plus, ul-hyphen - -@mixin __rmd-ul-li-before($sign) { - & { - list-style: none; - } - & > li::before { - float: left; - width: 1ch; - margin-left: __rmd-indent("ul", "left") * -1; - margin-right: 1ch; - content: $sign; - } -} - -@mixin __rmd-ol-li-before($type) { - ol { - list-style: none; - @if $type != "zero" { - counter-reset: rmd-ol; - } - } - @if $type != "zero" { - ol > li { - counter-increment: rmd-ol; - } - } - ol > li::before { - float: left; - margin-left: __rmd-indent("ol", "left") * -1; - margin-right: 1ch; - min-width: 2ch; - @if $type == "zero" { - content: "0."; - } @else if $type == "alpha" { - content: counter(rmd-ol, lower-alpha) "."; - } @else { - content: counter(rmd-ol) "."; - } - } -} - -@mixin rmd-output-ul { - @include __rmd_selector { - ul { - margin: __rmd-margin("ul", "top") __rmd-indent("ul", "right") __rmd-margin("ul", "bottom") - __rmd-indent("ul", "left"); - padding: 0; - } - li ul { - margin-top: 0; - margin-bottom: 0; - } - } - @include __rmd_selector("ul-plus") { - ul { - @include __rmd-ul-li-before("+"); - } - } - @include __rmd_selector("ul-star") { - ul { - @include __rmd-ul-li-before("*"); - } - } - @include __rmd_selector("ul-hyphen") { - ul { - @include __rmd-ul-li-before("-"); - } - } -} - -@mixin rmd-output-ol { - @include __rmd_selector() { - ol { - margin: __rmd-margin("ol", "top") __rmd-indent("ol", "right") __rmd-margin("ol", "bottom") - __rmd-indent("ol", "left"); - padding: 0; - } - li ol { - margin-top: 0; - margin-bottom: 0; - } - } - @include __rmd_selector("ol-decimal") { - @include __rmd-ol-li-before("decimal"); - } - @include __rmd_selector("ol-zero") { - @include __rmd-ol-li-before("zero"); - } - @include __rmd_selector("ol-alpha") { - @include __rmd-ol-li-before("alpha"); - } -} - -// Links -// Options: a-bracket, a-showurl - -@mixin rmd-output-a { - @include __rmd_selector("a-bracket") { - a { - &::before { - content: "["; - } - &::after { - content: "]"; - } - } - } - @include __rmd_selector("a-showurl") { - a[href] { - &::before { - content: "["; - } - &::after { - content: "](" attr(href) ")"; - word-break: break-all; - } - } - } -} - -// Emphasis -// Options: em-star, em-underscore, strong-star, strong-underscore - -@mixin rmd-output-em { - @if $rmd-set-font-styles { - @include __rmd_selector { - em, - strong { - font-style: normal; - font-weight: normal; - } - } - } - @include __rmd_selector("em-star") { - em::before, - em::after { - content: "*"; - } - } - @include __rmd_selector("em-underscore") { - em::before, - em::after { - content: "_"; - } - } -} - -@mixin rmd-output-strong { - @include __rmd_selector("strong-star") { - strong::before, - strong::after { - content: "**"; - } - } - @include __rmd_selector("strong-underscore") { - strong::before, - strong::after { - content: "__"; - } - } -} - -// Code -// Options: code-tick - -@mixin rmd-output-code { - @include __rmd_selector("code-tick") { - code::before, - code::after { - content: "`"; - } - pre code::before, - pre code::after { - display: none; - } - } -} - -// PRE -// Options: pre-indent, pre-tick, pre-tilde, pre-tilde-full - -@mixin rmd-output-pre { - @include __rmd_selector { - pre { - margin-top: __rmd-margin("pre", "top"); - margin-bottom: __rmd-margin("pre", "bottom"); - tab-size: 4; - } - } - @include __rmd_selector("pre-indent") { - pre { - margin-left: __rmd-indent("pre", "left"); - margin-right: __rmd-indent("pre", "right"); - } - } - %rmd-pre-fence-pseudo { - display: block; - width: 100%; - height: $__rmd-line; - cursor: default; - } - @include __rmd_selector("pre-tick") { - pre::before, - pre::after { - @extend %rmd-pre-fence-pseudo; - content: "```"; - position: relative; - top: 0.25em; - } - } - @include __rmd_selector("pre-tilde") { - pre::before, - pre::after { - @extend %rmd-pre-fence-pseudo; - content: "~~~"; - overflow: hidden; - word-break: break-all; - } - } - @include __rmd_selector("pre-tilde-full") { - pre::before, - pre::after { - @extend %rmd-pre-fence-pseudo; - content: __rmd_repeat("~~~~~~~~~~", 12); - overflow: hidden; - word-break: break-all; - } - } -} - -// Horizontal rules -// Options: hr-center, hr-star, hr-hyphen - -@mixin rmd-output-hr { - @include __rmd_selector { - hr { - height: $__rmd-line; - line-height: $__rmd-line; - margin: __rmd-margin("hr", "top") 0 __rmd-margin("hr", "bottom"); - border: none; - color: inherit; - } - } - @include __rmd_selector("hr-center") { - hr { - text-align: center; - } - } - @include __rmd_selector("hr-star") { - hr::before { - content: $rmd-hr-stars; - } - } - @include __rmd_selector("hr-hyphen") { - hr::before { - content: $rmd-hr-hyphens; - } - } -} - -// Quotes (
not managed since not in Markdown) -// Option: quote-gt - -@mixin rmd-output-quote { - @include __rmd_selector { - blockquote { - margin: __rmd-margin("blockquote", "top") __rmd-indent("blockquote", "right") - __rmd-margin("blockquote", "bottom") __rmd-indent("blockquote", "left"); - padding: 0; - } - } - @include __rmd_selector("quote-gt") { - blockquote { - position: relative; - } - blockquote::before { - position: absolute; - top: 0; - left: -2ch; - bottom: 0; - width: 1ch; - overflow: hidden; - white-space: pre; - content: __rmd_repeat(">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A", 20); - cursor: default; - } - } -} - -// DEL -// Option: del-gfm - -@mixin rmd-output-del { - @include __rmd_selector("del-gfm") { - del { - text-decoration: none; - } - del::before, - del::after { - content: "~~"; - } - } -} - -// Tables -// Option: table-marker - -@mixin rmd-output-table { - @include __rmd_selector("table-marker") { - table { - margin-top: __rmd-margin("table", "top"); - margin-bottom: __rmd-margin("table", "bottom"); - border-collapse: collapse; - } - tr > * { - min-width: 3ch; - position: relative; - padding: 0; - text-align: inherit; - vertical-align: top; - font-weight: normal; - border: none; - } - tr > * + * { - padding-left: 3ch; - } - tr:first-child > th:not([scope="row"]) { - padding-bottom: $__rmd-line; - } - tr:first-child > th:not([scope="row"])::after { - content: __rmd_repeat("-----------", 10); - position: absolute; - bottom: 0; - left: 0; - right: 0; - overflow: hidden; - word-break: break-all; - height: $__rmd-line; - } - tr:first-child > * + th:not([scope="row"])::after { - left: 3ch; - } - tr > * + *::before { - content: __rmd_repeat("|\A", 10); - position: absolute; - overflow: hidden; - left: 1ch; - top: 0; - bottom: 0; - white-space: pre; - } - } -} diff --git a/src/_toolkit.scss b/src/_toolkit.scss deleted file mode 100644 index f417d3a..0000000 --- a/src/_toolkit.scss +++ /dev/null @@ -1,106 +0,0 @@ -@use "sass:list"; -@use "sass:map"; -@use "sass:string"; - -// ------------------------ -// Utilities for ReMarkdown -// ------------------------ - -// Internal variables -$__rmd-version: "3.1.0"; -$__rmd-line: $rmd-line-ratio * 1em; -@if ($rmd-prefer-rem) { - $__rmd-line: $rmd-line-ratio * 1rem; -} - -@mixin rmd-header($title: "") { - $included: "all styles"; - $list: $rmd-defaults; - @if not $rmd-output-all-styles { - $included: "defaults only"; - } - @if not $list or $list == "" or list.length($list) == 0 { - $list: "none"; - } - @if $title { - /*! #{__rmd_replace($title, "%v", $__rmd-version)} */ - /* includes: #{$included}; defaults: #{$list}; */ - } -} - -// Wrap content in a selector including the option name, depending on -// the content of $rmd-defaults and the value of $rmd-output-all-styles. -// May output an unused placeholder selector (%rmd-void) if -// $rmd-output-all-styles is false and the option is not in -// $rmd-defaults, which drops the entire block from the output. -@mixin __rmd_selector($option: null) { - @if $option == null or list.index($rmd-defaults, $option) { - #{__rmd_selector_syntax()} { - @content; - } - } @else if $rmd-output-all-styles { - #{__rmd_selector_syntax($option)} { - @content; - } - } -} - -// Generate the general selector (if $name is null) -// or an option-specific selector -@function __rmd_selector_syntax($option: null) { - @if $option == null { - @return $rmd-selector-base; - } @else { - @return __rmd_replace($rmd-selector-option, "%o", $option); - } -} - -// Get a margin value in em from $rmd-margins. -// If not set, returns a value of 1 line. -@function __rmd-margin($element, $direction: "top") { - $config: map.get($rmd-margins, $element); - @if $config != null { - $num: map.get($config, $direction); - @if $num != null { - @return $__rmd-line * $num; - } - } - @return $__rmd-line * 1; -} - -// Get a horizontal margin (indent) value for an element. -// If not set, returns a value of 0. -@function __rmd-indent($element, $direction: "left") { - $config: map.get($rmd-indents, $element); - @if $config != null { - $num: map.get($config, $direction); - @if $num != null { - @return 1ch * $num; - } - } - @return 0; -} - -// Small utility to repeat a string -@function __rmd_repeat($string, $times) { - $result: ""; - @for $i from 1 through $times { - $result: $result + $string; - } - @return $result; -} - -/// Replace `$search` with `$replace` in `$string` -/// @author Hugo Giraudel -/// @param {String} $string - Initial string -/// @param {String} $search - Substring to replace -/// @param {String} $replace ('') - New value -/// @return {String} - Updated string -@function __rmd_replace($string, $search, $replace: "") { - $index: string.index($string, $search); - @if $index { - @return string.slice($string, 1, $index - 1) + $replace + - __rmd_replace(string.slice($string, $index + string.length($search)), $search, $replace); - } - @return $string; -} diff --git a/src/build.js b/src/build.js deleted file mode 100644 index aa458d6..0000000 --- a/src/build.js +++ /dev/null @@ -1,39 +0,0 @@ -const fs = require("fs") -const path = require("path") -const sass = require("sass") -const prettier = require("prettier") - -const root = path.dirname(__dirname) - -const sources = [ - ["src/remarkdown.scss", "dist/remarkdown.css"], - ["src/remarkdown.attr.scss", "dist/remarkdown.attr.css"], - ["src/remarkdown-zero.scss", "dist/remarkdown-zero.css"], - ["src/remarkdown-zero.attr.scss", "dist/remarkdown-zero.attr.css"], - ["src/remarkdown-custom.scss", "dist/remarkdown-custom.css"], - ["docs/demo.scss", "docs/demo.css"], -] - -sources.forEach(buildStylesheet) - -function buildStylesheet([sourceFilename, outFilename]) { - const sourceFile = path.join(root, sourceFilename) - const outFile = path.join(root, outFilename) - if (fs.existsSync(sourceFile) === false) { - return - } - - console.log("Compiling " + sourceFile) - sass.render({ file: sourceFile, outputStyle: "expanded" }, (err, result) => { - if (err) throw err - const css = result.css.toString("utf8") - const prettified = prettier.format(css, { - parser: "css", - singleQuote: false, - }) - fs.writeFile(outFile, prettified, (err) => { - if (err) throw err - console.log(`Writing ${outFile} (${prettified.length} bytes)`) - }) - }) -} diff --git a/src/remarkdown-custom.scss b/src/remarkdown-custom.scss deleted file mode 100644 index 9b32dfa..0000000 --- a/src/remarkdown-custom.scss +++ /dev/null @@ -1,72 +0,0 @@ -// -------------------------- -// Custom build of ReMarkdown -// -------------------------- -// See _options.scss for the list of available Sass variables that can be used -// to customize your ReMarkdown stylesheet. Some examples follow. - -// BEM-style selectors -$rmd-selector-base: ".remarkdown"; -$rmd-selector-option: ".remarkdown--%o"; - -// Don't output styles for disabled features -$rmd-output-all-styles: false; - -// Fancy underlines -$rmd-h1-underline: "★☆★☆★☆★☆★☆"; -$rmd-h2-underline: "~~~~~~~~~~"; - -// Enable or disable features -// prettier-ignore -$rmd-defaults: - hn-reset - hn-hash - h1-underline - h2-underline - // ul-hyphen - // ul-star - ul-plus - // ol-decimal - // ol-zero - ol-alpha - // quote-gt - // em-star - em-underscore - // strong-star - strong-underscore - // a-bracket - // a-showurl - // code-tick - // pre-indent - // pre-tick - pre-tilde - pre-tilde-full - // hr-star - hr-center - hr-hyphen - // del-gfm - table-marker -; - -// Horizontal indents (as number of characters) -$rmd-indents: ( - ul: ( - left: 6, - right: 4, - ), - ol: ( - left: 6, - right: 4, - ), - pre: ( - left: 2, - right: 2, - ), - blockquote: ( - left: 2, - right: 2, - ), -); - -@import "src/_imports.scss"; -@include rmd-header("ReMarkdown %v (MIT) Custom Build https://fvsch.github.io/remarkdown/"); -@include rmd-output(); diff --git a/src/remarkdown-zero.attr.scss b/src/remarkdown-zero.attr.scss deleted file mode 100644 index 1f737bf..0000000 --- a/src/remarkdown-zero.attr.scss +++ /dev/null @@ -1,10 +0,0 @@ -// Attribute-based build of ReMarkdown with no default styles - -$rmd-selector-base: "[data-remarkdown]"; -$rmd-selector-option: '[data-remarkdown~="%o"]'; -$rmd-defaults: (); -$rmd-margins: (); - -@import "_imports.scss"; -@include rmd-header("ReMarkdown-zero %v [attr] (MIT) https://fvsch.github.io/remarkdown/"); -@include rmd-output(); diff --git a/src/remarkdown-zero.scss b/src/remarkdown-zero.scss deleted file mode 100644 index c128592..0000000 --- a/src/remarkdown-zero.scss +++ /dev/null @@ -1,10 +0,0 @@ -// Class-based build of ReMarkdown with no default styles - -$rmd-selector-base: ".remarkdown"; -$rmd-selector-option: ".remarkdown.%o"; -$rmd-defaults: (); -$rmd-margins: (); - -@import "_imports.scss"; -@include rmd-header("ReMarkdown-zero %v (MIT) https://fvsch.github.io/remarkdown/"); -@include rmd-output(); diff --git a/src/remarkdown.attr.scss b/src/remarkdown.attr.scss deleted file mode 100644 index bf40f12..0000000 --- a/src/remarkdown.attr.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Attribute-based build of ReMarkdown using default styles - -$rmd-selector-base: "[data-remarkdown]"; -$rmd-selector-option: '[data-remarkdown~="%o"]'; - -@import "_imports.scss"; -@include rmd-header("ReMarkdown %v [attr] (MIT) https://fvsch.github.io/remarkdown/"); -@include rmd-output(); diff --git a/src/remarkdown.scss b/src/remarkdown.scss deleted file mode 100644 index ec9a08a..0000000 --- a/src/remarkdown.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Class-based build of ReMarkdown using default styles - -$rmd-selector-base: ".remarkdown"; -$rmd-selector-option: ".remarkdown.%o"; - -@import "_imports.scss"; -@include rmd-header("ReMarkdown %v (MIT) https://fvsch.github.io/remarkdown/"); -@include rmd-output();