markdown-to-html-cli 3.3.1 → 3.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -13
- package/lib/create.js +4 -4
- package/lib/create.js.map +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +16 -14
- package/lib/index.js.map +1 -1
- package/lib/nodes/markdown-style.d.ts +1 -1
- package/lib/nodes/markdown-style.js +30 -27
- package/lib/nodes/markdown-style.js.map +1 -1
- package/package.json +3 -3
- package/src/create.ts +4 -4
- package/src/index.ts +18 -14
- package/src/nodes/markdown-style.ts +30 -27
package/README.md
CHANGED
|
@@ -128,19 +128,21 @@ Usage: markdown-to-html [options] [--help|h]
|
|
|
128
128
|
|
|
129
129
|
Options:
|
|
130
130
|
|
|
131
|
-
--author
|
|
132
|
-
--config, -o
|
|
133
|
-
--description
|
|
134
|
-
--favicon
|
|
135
|
-
--github-corners
|
|
136
|
-
--github-corners-fork
|
|
137
|
-
--keywords
|
|
138
|
-
--
|
|
139
|
-
--
|
|
140
|
-
--
|
|
141
|
-
--
|
|
142
|
-
--
|
|
143
|
-
--
|
|
131
|
+
--author Define the author of a page.
|
|
132
|
+
--config, -o Specify the configuration file. Default: "<process.cwd()>/package.json".
|
|
133
|
+
--description Define a description of your web page.
|
|
134
|
+
--favicon Add a Favicon to your Site.
|
|
135
|
+
--github-corners Add a Github corner to your project page.
|
|
136
|
+
--github-corners-fork Github corners style.
|
|
137
|
+
--keywords Define keywords for search engines.
|
|
138
|
+
--no-dark-mode Disable light and dark theme styles button.
|
|
139
|
+
--markdown Markdown string.
|
|
140
|
+
--markdown-style-theme Setting markdown-style light/dark theme.
|
|
141
|
+
--output, -o Output static pages to the specified directory. Default: "index.html"
|
|
142
|
+
--source, -s The path of the target file "README.md". Default: "README.md"
|
|
143
|
+
--title The `<title>` tag is required in HTML documents!
|
|
144
|
+
--version, -v Show version number
|
|
145
|
+
--help, -h Displays help information.
|
|
144
146
|
|
|
145
147
|
Example:
|
|
146
148
|
|
|
@@ -148,6 +150,8 @@ Example:
|
|
|
148
150
|
npm markdown-to-html --title="Hello World!"
|
|
149
151
|
npm markdown-to-html --config="config/conf.json"
|
|
150
152
|
npm markdown-to-html-cli --markdown="Hello World!"
|
|
153
|
+
npm markdown-to-html-cli --no-dark-mode
|
|
154
|
+
npm markdown-to-html-cli --markdown-style-theme dark
|
|
151
155
|
npm markdown-to-html-cli --github-corners https://github.com/jaywcjlove/markdown-to-html-cli
|
|
152
156
|
npm markdown-to-html-cli --github-corners https://github.com/jaywcjlove --github-corners-fork
|
|
153
157
|
npm markdown-to-html-cli --output coverage/index.html
|
package/lib/create.js
CHANGED
|
@@ -19,7 +19,7 @@ import { darkMode } from './nodes/dark-mode.js';
|
|
|
19
19
|
// const dirname = path.dirname(filename);
|
|
20
20
|
export const _dirname = /file:\/\/(.+)\/[^/]/.exec(import.meta.url)[1];
|
|
21
21
|
export function create(options = {}) {
|
|
22
|
-
const { markdown: string, document, rewrite, reurls = {}, 'dark-mode': darkModeTheme = true } = options;
|
|
22
|
+
const { markdown: string, document, rewrite, reurls = {}, 'markdown-style-theme': markdownStyleTheme, 'dark-mode': darkModeTheme = true } = options;
|
|
23
23
|
const mdOptions = {
|
|
24
24
|
hastNode: false,
|
|
25
25
|
remarkPlugins: [remarkGemoji],
|
|
@@ -36,7 +36,7 @@ export function create(options = {}) {
|
|
|
36
36
|
],
|
|
37
37
|
rewrite: (node, index, parent) => {
|
|
38
38
|
if ((node.type == 'element' && node.tagName === 'body') || (!document && node.type === 'root')) {
|
|
39
|
-
node.children = markdownStyle(node.children,
|
|
39
|
+
node.children = markdownStyle(node.children, markdownStyleTheme);
|
|
40
40
|
if (darkModeTheme) {
|
|
41
41
|
darkMode().forEach(item => node.children.unshift(item));
|
|
42
42
|
}
|
|
@@ -60,8 +60,8 @@ export function create(options = {}) {
|
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
if (node.type == 'element' && node.tagName === 'markdown-style') {
|
|
63
|
-
node.children.
|
|
64
|
-
node.children.
|
|
63
|
+
node.children.push(copyStyle());
|
|
64
|
+
node.children.push(copyScript());
|
|
65
65
|
}
|
|
66
66
|
if (node.type == 'element' && node.tagName === 'pre') {
|
|
67
67
|
const code = getCodeString(node.children);
|
package/lib/create.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AAAA,OAAO,QAAqB,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,cAAc,MAAM,iBAAiB,CAAC;AAC7C,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,aAAa;AACb,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,wHAAwH;AACxH,mEAAmE;AACnE,mDAAmD;AACnD,0CAA0C;AAE1C,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC;AAGlC,MAAM,UAAU,MAAM,CAAC,UAA2B,EAAE;IAClD,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,GAAG,EAAE,EAAE,WAAW,EAAE,aAAa,GAAG,IAAI,EAAE,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"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"}
|
package/lib/index.d.ts
CHANGED
|
@@ -13,6 +13,8 @@ export interface RunArgvs extends Omit<ParsedArgs, '_'> {
|
|
|
13
13
|
'github-corners-fork'?: boolean;
|
|
14
14
|
/** Disable light and dark theme styles button. */
|
|
15
15
|
'dark-mode'?: boolean;
|
|
16
|
+
/** Setting markdown-style light/dark theme. */
|
|
17
|
+
'markdown-style-theme'?: 'dark' | 'light';
|
|
16
18
|
/** Markdown string. */
|
|
17
19
|
markdown?: string;
|
|
18
20
|
/** The `<title>` tag is required in HTML documents! */
|
package/lib/index.js
CHANGED
|
@@ -45,20 +45,21 @@ export function run(opts = {}) {
|
|
|
45
45
|
export const cliHelp = `\n Usage: markdown-to-html [options] [--help|h]
|
|
46
46
|
|
|
47
47
|
Options:\n
|
|
48
|
-
--author
|
|
49
|
-
--config, -o
|
|
50
|
-
--description
|
|
51
|
-
--favicon
|
|
52
|
-
--github-corners
|
|
53
|
-
--github-corners-fork
|
|
54
|
-
--keywords
|
|
55
|
-
--no-dark-mode
|
|
56
|
-
--markdown
|
|
57
|
-
--
|
|
58
|
-
--
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
--
|
|
48
|
+
--author Define the author of a page.
|
|
49
|
+
--config, -o Specify the configuration file. Default: "<process.cwd()>/package.json".
|
|
50
|
+
--description Define a description of your web page.
|
|
51
|
+
--favicon Add a Favicon to your Site.
|
|
52
|
+
--github-corners Add a Github corner to your project page.
|
|
53
|
+
--github-corners-fork Github corners style.
|
|
54
|
+
--keywords Define keywords for search engines.
|
|
55
|
+
--no-dark-mode Disable light and dark theme styles button.
|
|
56
|
+
--markdown Markdown string.
|
|
57
|
+
--markdown-style-theme Setting markdown-style light/dark theme.
|
|
58
|
+
--output, -o Output static pages to the specified directory. Default: "index.html"
|
|
59
|
+
--source, -s The path of the target file "README.md". Default: "README.md"
|
|
60
|
+
--title The \`<title>\` tag is required in HTML documents!
|
|
61
|
+
--version, -v Show version number
|
|
62
|
+
--help, -h Displays help information.
|
|
62
63
|
`;
|
|
63
64
|
export const exampleHelp = `\n Example:
|
|
64
65
|
|
|
@@ -67,6 +68,7 @@ export const exampleHelp = `\n Example:
|
|
|
67
68
|
\x1b[35mnpm\x1b[0m markdown-to-html \x1b[33m--config\x1b[0m="config/conf.json"
|
|
68
69
|
\x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--markdown\x1b[0m="Hello World!"
|
|
69
70
|
\x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--no-dark-mode\x1b[0m
|
|
71
|
+
\x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--markdown-style-theme\x1b[0m dark
|
|
70
72
|
\x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--github-corners\x1b[0m https://github.com/jaywcjlove/markdown-to-html-cli
|
|
71
73
|
\x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--github-corners\x1b[0m https://github.com/jaywcjlove --github-corners-fork
|
|
72
74
|
\x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--output\x1b[0m coverage/index.html
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,UAAU,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,QAAwB,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,UAAU,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,QAAwB,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AAuCxB,MAAM,UAAU,GAAG,CAAC,OAAO,EAAyB;IAClD,MAAM,KAAK,GAAG,QAAQ,CAAW,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QACtD,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,OAAO,EAAE,GAAG;YACZ,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,GAAG;SACZ;QACD,OAAO,EAAE;YACP,OAAO,EAAE,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK;YACxC,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK;YAClC,MAAM,EAAE,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,WAAW;YAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAE;YAC7B,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,EAAE;YACnC,MAAM,EAAE,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,YAAY;SAC9C;KACF,CAAC,CAAC;IACH,IAAI,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,EAAE;QACzB,OAAO,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG,WAAW,EAAE,CAAC,CAAC;QACxC,OAAO;KACR;IACD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,EAAE,cAAc,CAAC,CAAA;IAC5D,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACxD,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACrC,OAAO,CAAC,GAAG,CAAC,2CAA2C,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC;QACxE,OAAO,GAAG,CAAC,OAAO,CAAC;KACpB;IACD,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;QACnC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;KACzE;IACD,MAAM,OAAO,GAAG,YAAY,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAE1C,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;IACrD,EAAE,CAAC,aAAa,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACtC,OAAO,CAAC,GAAG,CAAC,iCAAiC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;AAChG,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAW;;;;;;;;;;;;;;;;;;CAkB9B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;;;;;;;;;;;;;CAajC,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { Element, ElementContent } from 'hast';
|
|
2
|
-
export declare function markdownStyle(child: ElementContent[],
|
|
2
|
+
export declare function markdownStyle(child: ElementContent[], markdownStyleTheme: 'dark' | 'light'): Element[];
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @wcj/markdown-
|
|
3
|
-
* https://github.com/jaywcjlove/markdown-to-html
|
|
2
|
+
* @wcj/markdown-style@1.0.6
|
|
3
|
+
* https://github.com/jaywcjlove/markdown-to-html/tree/main/packages/markdown-style
|
|
4
4
|
*/
|
|
5
|
-
const scriptString = `
|
|
6
|
-
const __TEMPLATE__ = document.createElement('template');
|
|
5
|
+
const scriptString = `const __TEMPLATE__ = document.createElement('template');
|
|
7
6
|
__TEMPLATE__.innerHTML = \`
|
|
8
7
|
<style>
|
|
9
|
-
:host [data-color-mode*='light'] { --color-prettylights-syntax-comment: #6e7781; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #8250df; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-brackethighlighter-unmatched: #82071e; --color-prettylights-syntax-invalid-illegal-text: #f6f8fa; --color-prettylights-syntax-invalid-illegal-bg: #82071e; --color-prettylights-syntax-carriage-return-text: #f6f8fa; --color-prettylights-syntax-carriage-return-bg: #cf222e; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-list: #3b2300; --color-prettylights-syntax-markup-heading: #0550ae; --color-prettylights-syntax-markup-italic: #24292f; --color-prettylights-syntax-markup-bold: #24292f; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #FFEBE9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-markup-changed-text: #953800; --color-prettylights-syntax-markup-changed-bg: #ffd8b5; --color-prettylights-syntax-markup-ignored-text: #eaeef2; --color-prettylights-syntax-markup-ignored-bg: #0550ae; --color-prettylights-syntax-meta-diff-range: #8250df; --color-prettylights-syntax-brackethighlighter-angle: #57606a; --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #24292f; --color-fg-muted: #57606a; --color-fg-subtle: #6e7781; --color-canvas-default: #ffffff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: hsla(210,18%,87%,1); --color-neutral-muted: rgba(175,184,193,0.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-attention-subtle: #fff8c5; --color-danger-fg: #cf222e; } :host [data-color-mode*='dark'] { --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-brackethighlighter-unmatched: #f85149; --color-prettylights-syntax-invalid-illegal-text: #f0f6fc; --color-prettylights-syntax-invalid-illegal-bg: #8e1519; --color-prettylights-syntax-carriage-return-text: #f0f6fc; --color-prettylights-syntax-carriage-return-bg: #b62324; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-list: #f2cc60; --color-prettylights-syntax-markup-heading: #1f6feb; --color-prettylights-syntax-markup-italic: #c9d1d9; --color-prettylights-syntax-markup-bold: #c9d1d9; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-markup-changed-text: #ffdfb6; --color-prettylights-syntax-markup-changed-bg: #5a1e02; --color-prettylights-syntax-markup-ignored-text: #c9d1d9; --color-prettylights-syntax-markup-ignored-bg: #1158c7; --color-prettylights-syntax-meta-diff-range: #d2a8ff; --color-prettylights-syntax-brackethighlighter-angle: #8b949e; --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #c9d1d9; --color-fg-muted: #8b949e; --color-fg-subtle: #484f58; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,0.4); --color-accent-fg: #58a6ff; --color-accent-emphasis: #1f6feb; --color-attention-subtle: rgba(187,128,9,0.15); --color-danger-fg: #f85149; }
|
|
10
|
-
|
|
8
|
+
:host [data-color-mode*='light'] { --color-prettylights-syntax-comment: #6e7781; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #8250df; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-brackethighlighter-unmatched: #82071e; --color-prettylights-syntax-invalid-illegal-text: #f6f8fa; --color-prettylights-syntax-invalid-illegal-bg: #82071e; --color-prettylights-syntax-carriage-return-text: #f6f8fa; --color-prettylights-syntax-carriage-return-bg: #cf222e; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-list: #3b2300; --color-prettylights-syntax-markup-heading: #0550ae; --color-prettylights-syntax-markup-italic: #24292f; --color-prettylights-syntax-markup-bold: #24292f; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #FFEBE9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-markup-changed-text: #953800; --color-prettylights-syntax-markup-changed-bg: #ffd8b5; --color-prettylights-syntax-markup-ignored-text: #eaeef2; --color-prettylights-syntax-markup-ignored-bg: #0550ae; --color-prettylights-syntax-meta-diff-range: #8250df; --color-prettylights-syntax-brackethighlighter-angle: #57606a; --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #24292f; --color-fg-muted: #57606a; --color-fg-subtle: #6e7781; --color-canvas-default: #ffffff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: hsla(210,18%,87%,1); --color-neutral-muted: rgba(175,184,193,0.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-attention-subtle: #fff8c5; --color-danger-fg: #cf222e; } :host [data-color-mode*='dark'] { --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-brackethighlighter-unmatched: #f85149; --color-prettylights-syntax-invalid-illegal-text: #f0f6fc; --color-prettylights-syntax-invalid-illegal-bg: #8e1519; --color-prettylights-syntax-carriage-return-text: #f0f6fc; --color-prettylights-syntax-carriage-return-bg: #b62324; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-list: #f2cc60; --color-prettylights-syntax-markup-heading: #1f6feb; --color-prettylights-syntax-markup-italic: #c9d1d9; --color-prettylights-syntax-markup-bold: #c9d1d9; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-markup-changed-text: #ffdfb6; --color-prettylights-syntax-markup-changed-bg: #5a1e02; --color-prettylights-syntax-markup-ignored-text: #c9d1d9; --color-prettylights-syntax-markup-ignored-bg: #1158c7; --color-prettylights-syntax-meta-diff-range: #d2a8ff; --color-prettylights-syntax-brackethighlighter-angle: #8b949e; --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #c9d1d9; --color-fg-muted: #8b949e; --color-fg-subtle: #484f58; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,0.4); --color-accent-fg: #58a6ff; --color-accent-emphasis: #1f6feb; --color-attention-subtle: rgba(187,128,9,0.15); --color-danger-fg: #f85149; } :host { display: block; -webkit-text-size-adjust: 100%; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; font-size: 16px; line-height: 1.5; word-wrap: break-word; color: var(--color-fg-default); background-color: var(--color-canvas-default); } :host details, :host figcaption, :host figure { display: block; } :host summary { display: list-item; } :host [hidden] { display: none !important; } :host a { background-color: transparent; color: var(--color-accent-fg); text-decoration: none; } :host a:active, :host a:hover { outline-width: 0; } :host abbr[title] { border-bottom: none; text-decoration: underline dotted; } :host b, :host strong { font-weight: 600; } :host dfn { font-style: italic; } :host h1 { margin: .67em 0; font-weight: 600; padding-bottom: .3em; font-size: 2em; border-bottom: 1px solid var(--color-border-muted); } :host mark { background-color: var(--color-attention-subtle); color: var(--color-text-primary); } :host small { font-size: 90%; } :host sub, :host sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } :host sub { bottom: -0.25em; } :host sup { top: -0.5em; } :host img { border-style: none; max-width: 100%; box-sizing: content-box; background-color: var(--color-canvas-default); } :host code, :host kbd, :host pre, :host samp { font-family: monospace,monospace; font-size: 1em; } :host figure { margin: 1em 40px; } :host hr { box-sizing: content-box; overflow: hidden; background: transparent; border-bottom: 1px solid var(--color-border-muted); height: .25em; padding: 0; margin: 24px 0; background-color: var(--color-border-default); border: 0; } :host input { font: inherit; margin: 0; overflow: visible; font-family: inherit; font-size: inherit; line-height: inherit; } :host [type=button], :host [type=reset], :host [type=submit] { -webkit-appearance: button; } :host [type=button]::-moz-focus-inner, :host [type=reset]::-moz-focus-inner, :host [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } :host [type=button]:-moz-focusring, :host [type=reset]:-moz-focusring, :host [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } :host [type=checkbox], :host [type=radio] { box-sizing: border-box; padding: 0; } :host [type=number]::-webkit-inner-spin-button, :host [type=number]::-webkit-outer-spin-button { height: auto; } :host [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } :host [type=search]::-webkit-search-cancel-button, :host [type=search]::-webkit-search-decoration { -webkit-appearance: none; } :host ::-webkit-input-placeholder { color: inherit; opacity: .54; } :host ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } :host a:hover { text-decoration: underline; } :host hr::before { display: table; content: ""; } :host hr::after { display: table; clear: both; content: ""; } :host table { border-spacing: 0; border-collapse: collapse; display: block; width: max-content; max-width: 100%; overflow: auto; } :host td, :host th { padding: 0; } :host details summary { cursor: pointer; } :host details:not([open])>*:not(summary) { display: none !important; } :host kbd { display: inline-block; padding: 3px 5px; font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; line-height: 10px; color: var(--color-fg-default); vertical-align: middle; background-color: var(--color-canvas-subtle); border: solid 1px var(--color-neutral-muted); border-bottom-color: var(--color-neutral-muted); border-radius: 6px; box-shadow: inset 0 -1px 0 var(--color-neutral-muted); } :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 { margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; } :host h2 { font-weight: 600; padding-bottom: .3em; font-size: 1.5em; border-bottom: 1px solid var(--color-border-muted); } :host h3 { font-weight: 600; font-size: 1.25em; } :host h4 { font-weight: 600; font-size: 1em; } :host h5 { font-weight: 600; font-size: .875em; } :host h6 { font-weight: 600; font-size: .85em; color: var(--color-fg-muted); } :host p { margin-top: 0; margin-bottom: 10px; } :host blockquote { margin: 0; padding: 0 1em; color: var(--color-fg-muted); border-left: .25em solid var(--color-border-default); } :host ul, :host ol { margin-top: 0; margin-bottom: 0; padding-left: 2em; } :host ol ol, :host ul ol { list-style-type: lower-roman; } :host ul ul ol, :host ul ol ol, :host ol ul ol, :host ol ol ol { list-style-type: lower-alpha; } :host dd { margin-left: 0; } :host tt, :host code { font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; font-size: 12px; } :host pre { margin-top: 0; margin-bottom: 0; font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; font-size: 12px; word-wrap: normal; } :host .octicon { display: inline-block; overflow: visible !important; vertical-align: text-bottom; fill: currentColor; } :host ::placeholder { color: var(--color-fg-subtle); opacity: 1; } :host input::-webkit-outer-spin-button, :host input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; appearance: none; }
|
|
9
|
+
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--color-prettylights-syntax-comment); } .token.namespace { opacity: 0.7; } .token.tag, .token.selector, .token.constant, .token.symbol, .token.deleted { color: var(--color-prettylights-syntax-entity-tag); } .token.maybe-class-name { color: var(--color-prettylights-syntax-variable); } .token.property-access, .token.operator, .token.boolean, .token.number, .token.selector .token.class, .token.attr-name, .token.string, .token.char, .token.builtin { color: var(--color-prettylights-syntax-constant); } .token.deleted { color: var(--color-prettylights-syntax-markup-deleted-text); } .token.property { color: var(--color-prettylights-syntax-constant); } .token.punctuation { color: var(--color-prettylights-syntax-markup-bold); } .token.function { color: var(--color-prettylights-syntax-entity); } .code-line .token.deleted { background-color: var(--color-prettylights-syntax-markup-deleted-bg); } .token.inserted { color: var(--color-prettylights-syntax-markup-inserted-text); } .code-line .token.inserted { background-color: var(--color-prettylights-syntax-markup-inserted-bg); } .token.variable { color: var(--color-prettylights-syntax-constant); } .token.entity, .token.url, .language-css .token.string, .style .token.string { color: var(--color-prettylights-syntax-string); } .token.color, .token.atrule, .token.attr-value, .token.function, .token.class-name { color: var(--color-prettylights-syntax-string); } .token.rule, .token.regex, .token.important, .token.keyword { color: var(--color-prettylights-syntax-keyword); } .token.coord { color: var(--color-prettylights-syntax-meta-diff-range); } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; }
|
|
10
|
+
:host [data-catalyst] { display: block; } :host g-emoji { font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; font-size: 1em; font-style: normal !important; font-weight: 400; line-height: 1; vertical-align: -0.075em; } :host g-emoji img { width: 1em; height: 1em; }
|
|
11
|
+
.markdown-body::before { display: table; content: ""; } .markdown-body::after { display: table; clear: both; content: ""; } .markdown-body>*:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !important; }
|
|
12
|
+
:host a:not([href]) { color: inherit; text-decoration: none; } :host .absent { color: var(--color-danger-fg); } :host .anchor { float: left; padding-right: 4px; margin-left: -20px; line-height: 1; } :host .anchor:focus { outline: none; } :host p, :host blockquote, :host ul, :host ol, :host dl, :host table, :host pre, :host details { margin-top: 0; margin-bottom: 16px; } :host blockquote>:first-child { margin-top: 0; } :host blockquote>:last-child { margin-bottom: 0; } :host sup>a::before { content: "["; } :host sup>a::after { content: "]"; } :host h1 .octicon-link, :host h2 .octicon-link, :host h3 .octicon-link, :host h4 .octicon-link, :host h5 .octicon-link, :host h6 .octicon-link { color: var(--color-fg-default); vertical-align: middle; visibility: hidden; } :host h1:hover .anchor, :host h2:hover .anchor, :host h3:hover .anchor, :host h4:hover .anchor, :host h5:hover .anchor, :host h6:hover .anchor { text-decoration: none; } :host h1:hover .anchor .octicon-link, :host h2:hover .anchor .octicon-link, :host h3:hover .anchor .octicon-link, :host h4:hover .anchor .octicon-link, :host h5:hover .anchor .octicon-link, :host h6:hover .anchor .octicon-link { visibility: visible; } :host h1 tt, :host h1 code, :host h2 tt, :host h2 code, :host h3 tt, :host h3 code, :host h4 tt, :host h4 code, :host h5 tt, :host h5 code, :host h6 tt, :host h6 code { padding: 0 .2em; font-size: inherit; } :host ul.no-list, :host ol.no-list { padding: 0; list-style-type: none; } :host ol[type="1"] { list-style-type: decimal; } :host ol[type=a] { list-style-type: lower-alpha; } :host ol[type=i] { list-style-type: lower-roman; } :host div>ol:not([type]) { list-style-type: decimal; } :host ul ul, :host ul ol, :host ol ol, :host ol ul { margin-top: 0; margin-bottom: 0; } :host li>p { margin-top: 16px; } :host li+li { margin-top: .25em; } :host dl { padding: 0; } :host dl dt { padding: 0; margin-top: 16px; font-size: 1em; font-style: italic; font-weight: 600; } :host dl dd { padding: 0 16px; margin-bottom: 16px; } :host table th { font-weight: 600; } :host table th, :host table td { padding: 6px 13px; border: 1px solid var(--color-border-default); } :host table tr { background-color: var(--color-canvas-default); border-top: 1px solid var(--color-border-muted); } :host table tr:nth-child(2n) { background-color: var(--color-canvas-subtle); } :host table img { background-color: transparent; } :host img[align=right] { padding-left: 20px; } :host img[align=left] { padding-right: 20px; } :host .emoji { max-width: none; vertical-align: text-top; background-color: transparent; } :host span.frame { display: block; overflow: hidden; } :host span.frame>span { display: block; float: left; width: auto; padding: 7px; margin: 13px 0 0; overflow: hidden; border: 1px solid var(--color-border-default); } :host span.frame span img { display: block; float: left; } :host span.frame span span { display: block; padding: 5px 0 0; clear: both; color: var(--color-fg-default); } :host span.align-center { display: block; overflow: hidden; clear: both; } :host span.align-center>span { display: block; margin: 13px auto 0; overflow: hidden; text-align: center; } :host span.align-center span img { margin: 0 auto; text-align: center; } :host span.align-right { display: block; overflow: hidden; clear: both; } :host span.align-right>span { display: block; margin: 13px 0 0; overflow: hidden; text-align: right; } :host span.align-right span img { margin: 0; text-align: right; } :host span.float-left { display: block; float: left; margin-right: 13px; overflow: hidden; } :host span.float-left span { margin: 13px 0 0; } :host span.float-right { display: block; float: right; margin-left: 13px; overflow: hidden; } :host span.float-right>span { display: block; margin: 13px auto 0; overflow: hidden; text-align: right; } :host code, :host tt { padding: .2em .4em; margin: 0; font-size: 85%; background-color: var(--color-neutral-muted); border-radius: 6px; } :host code br, :host tt br { display: none; } :host del code { text-decoration: inherit; } :host pre code { font-size: 100%; } :host pre>code { padding: 0; margin: 0; word-break: normal; white-space: pre; background: transparent; border: 0; } :host .highlight { margin-bottom: 16px; } :host .highlight pre { margin-bottom: 0; word-break: normal; } :host .highlight pre, :host pre { position: relative; padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: var(--color-canvas-subtle); border-radius: 6px; } :host pre code, :host pre tt { display: inline; max-width: auto; padding: 0; margin: 0; overflow: visible; line-height: inherit; word-wrap: normal; background-color: transparent; border: 0; } :host .csv-data td, :host .csv-data th { padding: 5px; overflow: hidden; font-size: 12px; line-height: 1; text-align: left; white-space: nowrap; } :host .csv-data .blob-num { padding: 10px 8px 9px; text-align: right; background: var(--color-canvas-default); border: 0; } :host .csv-data tr { border-top: 0; } :host .csv-data th { font-weight: 600; background: var(--color-canvas-subtle); border-top: 0; } :host .footnotes { font-size: 12px; color: var(--color-fg-muted); border-top: 1px solid var(--color-border-default); } :host .footnotes ol { padding-left: 16px; } :host .footnotes li { position: relative; } :host .footnotes li:target::before { position: absolute; top: -8px; right: -8px; bottom: -8px; left: -24px; pointer-events: none; content: ""; border: 2px solid var(--color-accent-emphasis); border-radius: 6px; } :host .footnotes li:target { color: var(--color-fg-default); } :host .footnotes .data-footnote-backref g-emoji { font-family: monospace; } :host .task-list-item { list-style-type: none; } :host .task-list-item label { font-weight: 400; } :host .task-list-item.enabled label { cursor: pointer; } :host .task-list-item+.task-list-item { margin-top: 3px; } :host .task-list-item .handle { display: none; } :host .task-list-item-checkbox, :host input[type="checkbox"] { margin: 0 .2em .25em -1.6em; vertical-align: middle; } :host .contains-task-list:dir(rtl) .task-list-item-checkbox, :host .contains-task-list:dir(rtl) input[type="checkbox"] { margin: 0 -1.6em .25em .2em; } :host ::-webkit-calendar-picker-indicator { filter: invert(50%); }
|
|
11
13
|
</style>
|
|
12
14
|
\`;
|
|
13
15
|
// See https://html.spec.whatwg.org/multipage/common-dom-interfaces.html
|
|
@@ -24,18 +26,22 @@ const installStringReflection = (obj, attrName, propName = attrName) => {
|
|
|
24
26
|
},
|
|
25
27
|
});
|
|
26
28
|
};
|
|
27
|
-
|
|
29
|
+
class MarkdownStyle extends HTMLElement {
|
|
28
30
|
constructor() {
|
|
29
31
|
super();
|
|
30
32
|
this.initTheme = this.getAttribute('theme');
|
|
31
|
-
installStringReflection(this, 'theme');
|
|
32
33
|
this.shadow = this.attachShadow({ mode: 'open' });
|
|
33
34
|
this.shadow.appendChild(__TEMPLATE__.content.cloneNode(true));
|
|
34
35
|
this.warpper = document.createElement('div');
|
|
35
36
|
this.warpper.classList.add('markdown-body');
|
|
36
37
|
this.shadow.appendChild(this.warpper);
|
|
37
|
-
Array.prototype.slice.call(this.shadow.host.childNodes).forEach((item) => this.warpper.appendChild(item));
|
|
38
38
|
this.setTheme();
|
|
39
|
+
const observer = new MutationObserver(() => {
|
|
40
|
+
Array.prototype.slice.call(this.shadow.host.childNodes).forEach((item) => {
|
|
41
|
+
this.warpper.appendChild(item);
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
observer.observe(this.shadow.host, { attributes: true, childList: true });
|
|
39
45
|
}
|
|
40
46
|
setTheme() {
|
|
41
47
|
if (!this.initTheme) {
|
|
@@ -53,6 +59,7 @@ export class MarkdownStyle extends HTMLElement {
|
|
|
53
59
|
this.warpper.setAttribute('data-color-mode', this.theme);
|
|
54
60
|
}
|
|
55
61
|
connectedCallback() {
|
|
62
|
+
installStringReflection(this, 'theme');
|
|
56
63
|
if (!this.initTheme) {
|
|
57
64
|
this.setTheme();
|
|
58
65
|
const observer = new MutationObserver((mutationsList, observer) => {
|
|
@@ -74,34 +81,30 @@ export class MarkdownStyle extends HTMLElement {
|
|
|
74
81
|
}
|
|
75
82
|
customElements.define('markdown-style', MarkdownStyle);
|
|
76
83
|
`;
|
|
77
|
-
export function markdownStyle(child,
|
|
78
|
-
const properties = {
|
|
79
|
-
|
|
80
|
-
|
|
84
|
+
export function markdownStyle(child, markdownStyleTheme) {
|
|
85
|
+
const properties = {
|
|
86
|
+
style: 'max-width: 960px; margin: 0 auto 60px auto; padding: 8px',
|
|
87
|
+
className: 'markdown-body',
|
|
88
|
+
};
|
|
89
|
+
if (markdownStyleTheme) {
|
|
90
|
+
properties.theme = markdownStyleTheme;
|
|
81
91
|
}
|
|
82
92
|
return [{
|
|
83
93
|
type: 'element',
|
|
84
94
|
tagName: 'script',
|
|
85
|
-
properties: {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
},
|
|
95
|
+
// properties: {
|
|
96
|
+
// // type: 'module',
|
|
97
|
+
// // src: 'https://unpkg.com/@wcj/markdown-style?module',
|
|
98
|
+
// },
|
|
89
99
|
children: [{
|
|
90
100
|
type: 'text',
|
|
91
101
|
value: scriptString
|
|
92
102
|
}]
|
|
93
103
|
}, {
|
|
94
104
|
type: 'element',
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
},
|
|
99
|
-
children: [{
|
|
100
|
-
type: 'element',
|
|
101
|
-
properties,
|
|
102
|
-
tagName: 'markdown-style',
|
|
103
|
-
children: child
|
|
104
|
-
}]
|
|
105
|
+
properties,
|
|
106
|
+
tagName: 'markdown-style',
|
|
107
|
+
children: child
|
|
105
108
|
}];
|
|
106
109
|
}
|
|
107
110
|
//# sourceMappingURL=markdown-style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"markdown-style.js","sourceRoot":"","sources":["../../src/nodes/markdown-style.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,YAAY,GAAG
|
|
1
|
+
{"version":3,"file":"markdown-style.js","sourceRoot":"","sources":["../../src/nodes/markdown-style.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EpB,CAAA;AAED,MAAM,UAAU,aAAa,CAAC,KAAuB,EAAE,kBAAoC;IACzF,MAAM,UAAU,GAA2B;QACzC,KAAK,EAAE,0DAA0D;QACjE,SAAS,EAAE,eAAe;KAC3B,CAAA;IACD,IAAI,kBAAkB,EAAE;QACtB,UAAU,CAAC,KAAK,GAAG,kBAAkB,CAAC;KACvC;IACD,OAAO,CAAC;YACN,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,QAAQ;YACjB,gBAAgB;YAChB,uBAAuB;YACvB,4DAA4D;YAC5D,KAAK;YACL,QAAQ,EAAE,CAAC;oBACT,IAAI,EAAE,MAAM;oBACZ,KAAK,EAAE,YAAY;iBACpB,CAAC;SACH,EAAE;YACD,IAAI,EAAE,SAAS;YACf,UAAU;YACV,OAAO,EAAE,gBAAgB;YACzB,QAAQ,EAAE,KAAK;SAChB,CAAC,CAAA;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "markdown-to-html-cli",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Command line tool generates markdown as html.",
|
|
6
6
|
"homepage": "https://jaywcjlove.github.io/markdown-to-html-cli",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"@types/fs-extra": "~9.0.13",
|
|
41
41
|
"@types/minimist": "~1.2.2",
|
|
42
42
|
"@uiw/github-corners": "~1.5.10",
|
|
43
|
-
"@wcj/markdown-style": "~1.0.
|
|
44
|
-
"@wcj/markdown-to-html": "~2.0.
|
|
43
|
+
"@wcj/markdown-style": "~1.0.6",
|
|
44
|
+
"@wcj/markdown-to-html": "~2.0.3",
|
|
45
45
|
"fs-extra": "~10.0.0",
|
|
46
46
|
"minimist": "~1.2.5",
|
|
47
47
|
"rehype-autolink-headings": "~6.1.0",
|
package/src/create.ts
CHANGED
|
@@ -24,7 +24,7 @@ export const _dirname = __dirname;
|
|
|
24
24
|
export interface CreateOptions extends MDToHTMLOptions { }
|
|
25
25
|
|
|
26
26
|
export function create(options: MDToHTMLOptions = {}) {
|
|
27
|
-
const { markdown: string, document, rewrite, reurls = {}, 'dark-mode': darkModeTheme = true } = options;
|
|
27
|
+
const { markdown: string, document, rewrite, reurls = {}, 'markdown-style-theme': markdownStyleTheme, 'dark-mode': darkModeTheme = true } = options;
|
|
28
28
|
|
|
29
29
|
const mdOptions: Options = {
|
|
30
30
|
hastNode: false,
|
|
@@ -42,7 +42,7 @@ export function create(options: MDToHTMLOptions = {}) {
|
|
|
42
42
|
],
|
|
43
43
|
rewrite: (node, index, parent) => {
|
|
44
44
|
if ((node.type == 'element' && node.tagName === 'body') || (!document && node.type === 'root')) {
|
|
45
|
-
node.children = markdownStyle(node.children as any,
|
|
45
|
+
node.children = markdownStyle(node.children as any, markdownStyleTheme);
|
|
46
46
|
if (darkModeTheme) {
|
|
47
47
|
darkMode().forEach(item => node.children.unshift(item));
|
|
48
48
|
}
|
|
@@ -65,8 +65,8 @@ export function create(options: MDToHTMLOptions = {}) {
|
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
if (node.type == 'element' && node.tagName === 'markdown-style') {
|
|
68
|
-
node.children.
|
|
69
|
-
node.children.
|
|
68
|
+
node.children.push(copyStyle());
|
|
69
|
+
node.children.push(copyScript());
|
|
70
70
|
}
|
|
71
71
|
if (node.type == 'element' && node.tagName === 'pre') {
|
|
72
72
|
const code = getCodeString(node.children);
|
package/src/index.ts
CHANGED
|
@@ -19,6 +19,8 @@ export interface RunArgvs extends Omit<ParsedArgs, '_'> {
|
|
|
19
19
|
'github-corners-fork'?: boolean;
|
|
20
20
|
/** Disable light and dark theme styles button. */
|
|
21
21
|
'dark-mode'?: boolean;
|
|
22
|
+
/** Setting markdown-style light/dark theme. */
|
|
23
|
+
'markdown-style-theme'?: 'dark' | 'light';
|
|
22
24
|
/** Markdown string. */
|
|
23
25
|
markdown?: string;
|
|
24
26
|
/** The `<title>` tag is required in HTML documents! */
|
|
@@ -86,20 +88,21 @@ export function run(opts = {} as Omit<RunArgvs, '_'>) {
|
|
|
86
88
|
export const cliHelp: string = `\n Usage: markdown-to-html [options] [--help|h]
|
|
87
89
|
|
|
88
90
|
Options:\n
|
|
89
|
-
--author
|
|
90
|
-
--config, -o
|
|
91
|
-
--description
|
|
92
|
-
--favicon
|
|
93
|
-
--github-corners
|
|
94
|
-
--github-corners-fork
|
|
95
|
-
--keywords
|
|
96
|
-
--no-dark-mode
|
|
97
|
-
--markdown
|
|
98
|
-
--
|
|
99
|
-
--
|
|
100
|
-
--
|
|
101
|
-
--
|
|
102
|
-
--
|
|
91
|
+
--author Define the author of a page.
|
|
92
|
+
--config, -o Specify the configuration file. Default: "<process.cwd()>/package.json".
|
|
93
|
+
--description Define a description of your web page.
|
|
94
|
+
--favicon Add a Favicon to your Site.
|
|
95
|
+
--github-corners Add a Github corner to your project page.
|
|
96
|
+
--github-corners-fork Github corners style.
|
|
97
|
+
--keywords Define keywords for search engines.
|
|
98
|
+
--no-dark-mode Disable light and dark theme styles button.
|
|
99
|
+
--markdown Markdown string.
|
|
100
|
+
--markdown-style-theme Setting markdown-style light/dark theme.
|
|
101
|
+
--output, -o Output static pages to the specified directory. Default: "index.html"
|
|
102
|
+
--source, -s The path of the target file "README.md". Default: "README.md"
|
|
103
|
+
--title The \`<title>\` tag is required in HTML documents!
|
|
104
|
+
--version, -v Show version number
|
|
105
|
+
--help, -h Displays help information.
|
|
103
106
|
`;
|
|
104
107
|
|
|
105
108
|
export const exampleHelp: string =`\n Example:
|
|
@@ -109,6 +112,7 @@ export const exampleHelp: string =`\n Example:
|
|
|
109
112
|
\x1b[35mnpm\x1b[0m markdown-to-html \x1b[33m--config\x1b[0m="config/conf.json"
|
|
110
113
|
\x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--markdown\x1b[0m="Hello World!"
|
|
111
114
|
\x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--no-dark-mode\x1b[0m
|
|
115
|
+
\x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--markdown-style-theme\x1b[0m dark
|
|
112
116
|
\x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--github-corners\x1b[0m https://github.com/jaywcjlove/markdown-to-html-cli
|
|
113
117
|
\x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--github-corners\x1b[0m https://github.com/jaywcjlove --github-corners-fork
|
|
114
118
|
\x1b[35mnpm\x1b[0m markdown-to-html-cli \x1b[33m--output\x1b[0m coverage/index.html
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { Element, ElementContent } from 'hast';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* @wcj/markdown-
|
|
5
|
-
* https://github.com/jaywcjlove/markdown-to-html
|
|
4
|
+
* @wcj/markdown-style@1.0.6
|
|
5
|
+
* https://github.com/jaywcjlove/markdown-to-html/tree/main/packages/markdown-style
|
|
6
6
|
*/
|
|
7
|
-
const scriptString = `
|
|
8
|
-
const __TEMPLATE__ = document.createElement('template');
|
|
7
|
+
const scriptString = `const __TEMPLATE__ = document.createElement('template');
|
|
9
8
|
__TEMPLATE__.innerHTML = \`
|
|
10
9
|
<style>
|
|
11
|
-
:host [data-color-mode*='light'] { --color-prettylights-syntax-comment: #6e7781; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #8250df; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-brackethighlighter-unmatched: #82071e; --color-prettylights-syntax-invalid-illegal-text: #f6f8fa; --color-prettylights-syntax-invalid-illegal-bg: #82071e; --color-prettylights-syntax-carriage-return-text: #f6f8fa; --color-prettylights-syntax-carriage-return-bg: #cf222e; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-list: #3b2300; --color-prettylights-syntax-markup-heading: #0550ae; --color-prettylights-syntax-markup-italic: #24292f; --color-prettylights-syntax-markup-bold: #24292f; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #FFEBE9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-markup-changed-text: #953800; --color-prettylights-syntax-markup-changed-bg: #ffd8b5; --color-prettylights-syntax-markup-ignored-text: #eaeef2; --color-prettylights-syntax-markup-ignored-bg: #0550ae; --color-prettylights-syntax-meta-diff-range: #8250df; --color-prettylights-syntax-brackethighlighter-angle: #57606a; --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #24292f; --color-fg-muted: #57606a; --color-fg-subtle: #6e7781; --color-canvas-default: #ffffff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: hsla(210,18%,87%,1); --color-neutral-muted: rgba(175,184,193,0.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-attention-subtle: #fff8c5; --color-danger-fg: #cf222e; } :host [data-color-mode*='dark'] { --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-brackethighlighter-unmatched: #f85149; --color-prettylights-syntax-invalid-illegal-text: #f0f6fc; --color-prettylights-syntax-invalid-illegal-bg: #8e1519; --color-prettylights-syntax-carriage-return-text: #f0f6fc; --color-prettylights-syntax-carriage-return-bg: #b62324; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-list: #f2cc60; --color-prettylights-syntax-markup-heading: #1f6feb; --color-prettylights-syntax-markup-italic: #c9d1d9; --color-prettylights-syntax-markup-bold: #c9d1d9; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-markup-changed-text: #ffdfb6; --color-prettylights-syntax-markup-changed-bg: #5a1e02; --color-prettylights-syntax-markup-ignored-text: #c9d1d9; --color-prettylights-syntax-markup-ignored-bg: #1158c7; --color-prettylights-syntax-meta-diff-range: #d2a8ff; --color-prettylights-syntax-brackethighlighter-angle: #8b949e; --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #c9d1d9; --color-fg-muted: #8b949e; --color-fg-subtle: #484f58; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,0.4); --color-accent-fg: #58a6ff; --color-accent-emphasis: #1f6feb; --color-attention-subtle: rgba(187,128,9,0.15); --color-danger-fg: #f85149; }
|
|
12
|
-
|
|
10
|
+
:host [data-color-mode*='light'] { --color-prettylights-syntax-comment: #6e7781; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #8250df; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-brackethighlighter-unmatched: #82071e; --color-prettylights-syntax-invalid-illegal-text: #f6f8fa; --color-prettylights-syntax-invalid-illegal-bg: #82071e; --color-prettylights-syntax-carriage-return-text: #f6f8fa; --color-prettylights-syntax-carriage-return-bg: #cf222e; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-list: #3b2300; --color-prettylights-syntax-markup-heading: #0550ae; --color-prettylights-syntax-markup-italic: #24292f; --color-prettylights-syntax-markup-bold: #24292f; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #FFEBE9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-markup-changed-text: #953800; --color-prettylights-syntax-markup-changed-bg: #ffd8b5; --color-prettylights-syntax-markup-ignored-text: #eaeef2; --color-prettylights-syntax-markup-ignored-bg: #0550ae; --color-prettylights-syntax-meta-diff-range: #8250df; --color-prettylights-syntax-brackethighlighter-angle: #57606a; --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #24292f; --color-fg-muted: #57606a; --color-fg-subtle: #6e7781; --color-canvas-default: #ffffff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: hsla(210,18%,87%,1); --color-neutral-muted: rgba(175,184,193,0.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-attention-subtle: #fff8c5; --color-danger-fg: #cf222e; } :host [data-color-mode*='dark'] { --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-brackethighlighter-unmatched: #f85149; --color-prettylights-syntax-invalid-illegal-text: #f0f6fc; --color-prettylights-syntax-invalid-illegal-bg: #8e1519; --color-prettylights-syntax-carriage-return-text: #f0f6fc; --color-prettylights-syntax-carriage-return-bg: #b62324; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-list: #f2cc60; --color-prettylights-syntax-markup-heading: #1f6feb; --color-prettylights-syntax-markup-italic: #c9d1d9; --color-prettylights-syntax-markup-bold: #c9d1d9; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-markup-changed-text: #ffdfb6; --color-prettylights-syntax-markup-changed-bg: #5a1e02; --color-prettylights-syntax-markup-ignored-text: #c9d1d9; --color-prettylights-syntax-markup-ignored-bg: #1158c7; --color-prettylights-syntax-meta-diff-range: #d2a8ff; --color-prettylights-syntax-brackethighlighter-angle: #8b949e; --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #c9d1d9; --color-fg-muted: #8b949e; --color-fg-subtle: #484f58; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,0.4); --color-accent-fg: #58a6ff; --color-accent-emphasis: #1f6feb; --color-attention-subtle: rgba(187,128,9,0.15); --color-danger-fg: #f85149; } :host { display: block; -webkit-text-size-adjust: 100%; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; font-size: 16px; line-height: 1.5; word-wrap: break-word; color: var(--color-fg-default); background-color: var(--color-canvas-default); } :host details, :host figcaption, :host figure { display: block; } :host summary { display: list-item; } :host [hidden] { display: none !important; } :host a { background-color: transparent; color: var(--color-accent-fg); text-decoration: none; } :host a:active, :host a:hover { outline-width: 0; } :host abbr[title] { border-bottom: none; text-decoration: underline dotted; } :host b, :host strong { font-weight: 600; } :host dfn { font-style: italic; } :host h1 { margin: .67em 0; font-weight: 600; padding-bottom: .3em; font-size: 2em; border-bottom: 1px solid var(--color-border-muted); } :host mark { background-color: var(--color-attention-subtle); color: var(--color-text-primary); } :host small { font-size: 90%; } :host sub, :host sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } :host sub { bottom: -0.25em; } :host sup { top: -0.5em; } :host img { border-style: none; max-width: 100%; box-sizing: content-box; background-color: var(--color-canvas-default); } :host code, :host kbd, :host pre, :host samp { font-family: monospace,monospace; font-size: 1em; } :host figure { margin: 1em 40px; } :host hr { box-sizing: content-box; overflow: hidden; background: transparent; border-bottom: 1px solid var(--color-border-muted); height: .25em; padding: 0; margin: 24px 0; background-color: var(--color-border-default); border: 0; } :host input { font: inherit; margin: 0; overflow: visible; font-family: inherit; font-size: inherit; line-height: inherit; } :host [type=button], :host [type=reset], :host [type=submit] { -webkit-appearance: button; } :host [type=button]::-moz-focus-inner, :host [type=reset]::-moz-focus-inner, :host [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } :host [type=button]:-moz-focusring, :host [type=reset]:-moz-focusring, :host [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } :host [type=checkbox], :host [type=radio] { box-sizing: border-box; padding: 0; } :host [type=number]::-webkit-inner-spin-button, :host [type=number]::-webkit-outer-spin-button { height: auto; } :host [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } :host [type=search]::-webkit-search-cancel-button, :host [type=search]::-webkit-search-decoration { -webkit-appearance: none; } :host ::-webkit-input-placeholder { color: inherit; opacity: .54; } :host ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } :host a:hover { text-decoration: underline; } :host hr::before { display: table; content: ""; } :host hr::after { display: table; clear: both; content: ""; } :host table { border-spacing: 0; border-collapse: collapse; display: block; width: max-content; max-width: 100%; overflow: auto; } :host td, :host th { padding: 0; } :host details summary { cursor: pointer; } :host details:not([open])>*:not(summary) { display: none !important; } :host kbd { display: inline-block; padding: 3px 5px; font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; line-height: 10px; color: var(--color-fg-default); vertical-align: middle; background-color: var(--color-canvas-subtle); border: solid 1px var(--color-neutral-muted); border-bottom-color: var(--color-neutral-muted); border-radius: 6px; box-shadow: inset 0 -1px 0 var(--color-neutral-muted); } :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 { margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; } :host h2 { font-weight: 600; padding-bottom: .3em; font-size: 1.5em; border-bottom: 1px solid var(--color-border-muted); } :host h3 { font-weight: 600; font-size: 1.25em; } :host h4 { font-weight: 600; font-size: 1em; } :host h5 { font-weight: 600; font-size: .875em; } :host h6 { font-weight: 600; font-size: .85em; color: var(--color-fg-muted); } :host p { margin-top: 0; margin-bottom: 10px; } :host blockquote { margin: 0; padding: 0 1em; color: var(--color-fg-muted); border-left: .25em solid var(--color-border-default); } :host ul, :host ol { margin-top: 0; margin-bottom: 0; padding-left: 2em; } :host ol ol, :host ul ol { list-style-type: lower-roman; } :host ul ul ol, :host ul ol ol, :host ol ul ol, :host ol ol ol { list-style-type: lower-alpha; } :host dd { margin-left: 0; } :host tt, :host code { font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; font-size: 12px; } :host pre { margin-top: 0; margin-bottom: 0; font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; font-size: 12px; word-wrap: normal; } :host .octicon { display: inline-block; overflow: visible !important; vertical-align: text-bottom; fill: currentColor; } :host ::placeholder { color: var(--color-fg-subtle); opacity: 1; } :host input::-webkit-outer-spin-button, :host input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; appearance: none; }
|
|
11
|
+
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--color-prettylights-syntax-comment); } .token.namespace { opacity: 0.7; } .token.tag, .token.selector, .token.constant, .token.symbol, .token.deleted { color: var(--color-prettylights-syntax-entity-tag); } .token.maybe-class-name { color: var(--color-prettylights-syntax-variable); } .token.property-access, .token.operator, .token.boolean, .token.number, .token.selector .token.class, .token.attr-name, .token.string, .token.char, .token.builtin { color: var(--color-prettylights-syntax-constant); } .token.deleted { color: var(--color-prettylights-syntax-markup-deleted-text); } .token.property { color: var(--color-prettylights-syntax-constant); } .token.punctuation { color: var(--color-prettylights-syntax-markup-bold); } .token.function { color: var(--color-prettylights-syntax-entity); } .code-line .token.deleted { background-color: var(--color-prettylights-syntax-markup-deleted-bg); } .token.inserted { color: var(--color-prettylights-syntax-markup-inserted-text); } .code-line .token.inserted { background-color: var(--color-prettylights-syntax-markup-inserted-bg); } .token.variable { color: var(--color-prettylights-syntax-constant); } .token.entity, .token.url, .language-css .token.string, .style .token.string { color: var(--color-prettylights-syntax-string); } .token.color, .token.atrule, .token.attr-value, .token.function, .token.class-name { color: var(--color-prettylights-syntax-string); } .token.rule, .token.regex, .token.important, .token.keyword { color: var(--color-prettylights-syntax-keyword); } .token.coord { color: var(--color-prettylights-syntax-meta-diff-range); } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; }
|
|
12
|
+
:host [data-catalyst] { display: block; } :host g-emoji { font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; font-size: 1em; font-style: normal !important; font-weight: 400; line-height: 1; vertical-align: -0.075em; } :host g-emoji img { width: 1em; height: 1em; }
|
|
13
|
+
.markdown-body::before { display: table; content: ""; } .markdown-body::after { display: table; clear: both; content: ""; } .markdown-body>*:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !important; }
|
|
14
|
+
:host a:not([href]) { color: inherit; text-decoration: none; } :host .absent { color: var(--color-danger-fg); } :host .anchor { float: left; padding-right: 4px; margin-left: -20px; line-height: 1; } :host .anchor:focus { outline: none; } :host p, :host blockquote, :host ul, :host ol, :host dl, :host table, :host pre, :host details { margin-top: 0; margin-bottom: 16px; } :host blockquote>:first-child { margin-top: 0; } :host blockquote>:last-child { margin-bottom: 0; } :host sup>a::before { content: "["; } :host sup>a::after { content: "]"; } :host h1 .octicon-link, :host h2 .octicon-link, :host h3 .octicon-link, :host h4 .octicon-link, :host h5 .octicon-link, :host h6 .octicon-link { color: var(--color-fg-default); vertical-align: middle; visibility: hidden; } :host h1:hover .anchor, :host h2:hover .anchor, :host h3:hover .anchor, :host h4:hover .anchor, :host h5:hover .anchor, :host h6:hover .anchor { text-decoration: none; } :host h1:hover .anchor .octicon-link, :host h2:hover .anchor .octicon-link, :host h3:hover .anchor .octicon-link, :host h4:hover .anchor .octicon-link, :host h5:hover .anchor .octicon-link, :host h6:hover .anchor .octicon-link { visibility: visible; } :host h1 tt, :host h1 code, :host h2 tt, :host h2 code, :host h3 tt, :host h3 code, :host h4 tt, :host h4 code, :host h5 tt, :host h5 code, :host h6 tt, :host h6 code { padding: 0 .2em; font-size: inherit; } :host ul.no-list, :host ol.no-list { padding: 0; list-style-type: none; } :host ol[type="1"] { list-style-type: decimal; } :host ol[type=a] { list-style-type: lower-alpha; } :host ol[type=i] { list-style-type: lower-roman; } :host div>ol:not([type]) { list-style-type: decimal; } :host ul ul, :host ul ol, :host ol ol, :host ol ul { margin-top: 0; margin-bottom: 0; } :host li>p { margin-top: 16px; } :host li+li { margin-top: .25em; } :host dl { padding: 0; } :host dl dt { padding: 0; margin-top: 16px; font-size: 1em; font-style: italic; font-weight: 600; } :host dl dd { padding: 0 16px; margin-bottom: 16px; } :host table th { font-weight: 600; } :host table th, :host table td { padding: 6px 13px; border: 1px solid var(--color-border-default); } :host table tr { background-color: var(--color-canvas-default); border-top: 1px solid var(--color-border-muted); } :host table tr:nth-child(2n) { background-color: var(--color-canvas-subtle); } :host table img { background-color: transparent; } :host img[align=right] { padding-left: 20px; } :host img[align=left] { padding-right: 20px; } :host .emoji { max-width: none; vertical-align: text-top; background-color: transparent; } :host span.frame { display: block; overflow: hidden; } :host span.frame>span { display: block; float: left; width: auto; padding: 7px; margin: 13px 0 0; overflow: hidden; border: 1px solid var(--color-border-default); } :host span.frame span img { display: block; float: left; } :host span.frame span span { display: block; padding: 5px 0 0; clear: both; color: var(--color-fg-default); } :host span.align-center { display: block; overflow: hidden; clear: both; } :host span.align-center>span { display: block; margin: 13px auto 0; overflow: hidden; text-align: center; } :host span.align-center span img { margin: 0 auto; text-align: center; } :host span.align-right { display: block; overflow: hidden; clear: both; } :host span.align-right>span { display: block; margin: 13px 0 0; overflow: hidden; text-align: right; } :host span.align-right span img { margin: 0; text-align: right; } :host span.float-left { display: block; float: left; margin-right: 13px; overflow: hidden; } :host span.float-left span { margin: 13px 0 0; } :host span.float-right { display: block; float: right; margin-left: 13px; overflow: hidden; } :host span.float-right>span { display: block; margin: 13px auto 0; overflow: hidden; text-align: right; } :host code, :host tt { padding: .2em .4em; margin: 0; font-size: 85%; background-color: var(--color-neutral-muted); border-radius: 6px; } :host code br, :host tt br { display: none; } :host del code { text-decoration: inherit; } :host pre code { font-size: 100%; } :host pre>code { padding: 0; margin: 0; word-break: normal; white-space: pre; background: transparent; border: 0; } :host .highlight { margin-bottom: 16px; } :host .highlight pre { margin-bottom: 0; word-break: normal; } :host .highlight pre, :host pre { position: relative; padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: var(--color-canvas-subtle); border-radius: 6px; } :host pre code, :host pre tt { display: inline; max-width: auto; padding: 0; margin: 0; overflow: visible; line-height: inherit; word-wrap: normal; background-color: transparent; border: 0; } :host .csv-data td, :host .csv-data th { padding: 5px; overflow: hidden; font-size: 12px; line-height: 1; text-align: left; white-space: nowrap; } :host .csv-data .blob-num { padding: 10px 8px 9px; text-align: right; background: var(--color-canvas-default); border: 0; } :host .csv-data tr { border-top: 0; } :host .csv-data th { font-weight: 600; background: var(--color-canvas-subtle); border-top: 0; } :host .footnotes { font-size: 12px; color: var(--color-fg-muted); border-top: 1px solid var(--color-border-default); } :host .footnotes ol { padding-left: 16px; } :host .footnotes li { position: relative; } :host .footnotes li:target::before { position: absolute; top: -8px; right: -8px; bottom: -8px; left: -24px; pointer-events: none; content: ""; border: 2px solid var(--color-accent-emphasis); border-radius: 6px; } :host .footnotes li:target { color: var(--color-fg-default); } :host .footnotes .data-footnote-backref g-emoji { font-family: monospace; } :host .task-list-item { list-style-type: none; } :host .task-list-item label { font-weight: 400; } :host .task-list-item.enabled label { cursor: pointer; } :host .task-list-item+.task-list-item { margin-top: 3px; } :host .task-list-item .handle { display: none; } :host .task-list-item-checkbox, :host input[type="checkbox"] { margin: 0 .2em .25em -1.6em; vertical-align: middle; } :host .contains-task-list:dir(rtl) .task-list-item-checkbox, :host .contains-task-list:dir(rtl) input[type="checkbox"] { margin: 0 -1.6em .25em .2em; } :host ::-webkit-calendar-picker-indicator { filter: invert(50%); }
|
|
13
15
|
</style>
|
|
14
16
|
\`;
|
|
15
17
|
// See https://html.spec.whatwg.org/multipage/common-dom-interfaces.html
|
|
@@ -26,18 +28,22 @@ const installStringReflection = (obj, attrName, propName = attrName) => {
|
|
|
26
28
|
},
|
|
27
29
|
});
|
|
28
30
|
};
|
|
29
|
-
|
|
31
|
+
class MarkdownStyle extends HTMLElement {
|
|
30
32
|
constructor() {
|
|
31
33
|
super();
|
|
32
34
|
this.initTheme = this.getAttribute('theme');
|
|
33
|
-
installStringReflection(this, 'theme');
|
|
34
35
|
this.shadow = this.attachShadow({ mode: 'open' });
|
|
35
36
|
this.shadow.appendChild(__TEMPLATE__.content.cloneNode(true));
|
|
36
37
|
this.warpper = document.createElement('div');
|
|
37
38
|
this.warpper.classList.add('markdown-body');
|
|
38
39
|
this.shadow.appendChild(this.warpper);
|
|
39
|
-
Array.prototype.slice.call(this.shadow.host.childNodes).forEach((item) => this.warpper.appendChild(item));
|
|
40
40
|
this.setTheme();
|
|
41
|
+
const observer = new MutationObserver(() => {
|
|
42
|
+
Array.prototype.slice.call(this.shadow.host.childNodes).forEach((item) => {
|
|
43
|
+
this.warpper.appendChild(item);
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
observer.observe(this.shadow.host, { attributes: true, childList: true });
|
|
41
47
|
}
|
|
42
48
|
setTheme() {
|
|
43
49
|
if (!this.initTheme) {
|
|
@@ -55,6 +61,7 @@ export class MarkdownStyle extends HTMLElement {
|
|
|
55
61
|
this.warpper.setAttribute('data-color-mode', this.theme);
|
|
56
62
|
}
|
|
57
63
|
connectedCallback() {
|
|
64
|
+
installStringReflection(this, 'theme');
|
|
58
65
|
if (!this.initTheme) {
|
|
59
66
|
this.setTheme();
|
|
60
67
|
const observer = new MutationObserver((mutationsList, observer) => {
|
|
@@ -77,33 +84,29 @@ export class MarkdownStyle extends HTMLElement {
|
|
|
77
84
|
customElements.define('markdown-style', MarkdownStyle);
|
|
78
85
|
`
|
|
79
86
|
|
|
80
|
-
export function markdownStyle(child: ElementContent[],
|
|
81
|
-
const properties: Record<string, string> = {
|
|
82
|
-
|
|
83
|
-
|
|
87
|
+
export function markdownStyle(child: ElementContent[], markdownStyleTheme: 'dark' | 'light'): Element[] {
|
|
88
|
+
const properties: Record<string, string> = {
|
|
89
|
+
style: 'max-width: 960px; margin: 0 auto 60px auto; padding: 8px',
|
|
90
|
+
className: 'markdown-body',
|
|
91
|
+
}
|
|
92
|
+
if (markdownStyleTheme) {
|
|
93
|
+
properties.theme = markdownStyleTheme;
|
|
84
94
|
}
|
|
85
95
|
return [{
|
|
86
96
|
type: 'element',
|
|
87
97
|
tagName: 'script',
|
|
88
|
-
properties: {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
},
|
|
98
|
+
// properties: {
|
|
99
|
+
// // type: 'module',
|
|
100
|
+
// // src: 'https://unpkg.com/@wcj/markdown-style?module',
|
|
101
|
+
// },
|
|
92
102
|
children: [{
|
|
93
103
|
type: 'text',
|
|
94
104
|
value: scriptString
|
|
95
105
|
}]
|
|
96
106
|
}, {
|
|
97
107
|
type: 'element',
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
},
|
|
102
|
-
children: [{
|
|
103
|
-
type: 'element',
|
|
104
|
-
properties,
|
|
105
|
-
tagName: 'markdown-style',
|
|
106
|
-
children: child
|
|
107
|
-
}]
|
|
108
|
+
properties,
|
|
109
|
+
tagName: 'markdown-style',
|
|
110
|
+
children: child
|
|
108
111
|
}]
|
|
109
112
|
}
|