From 9719250aca854ff73070da6c64a579b610773cb3 Mon Sep 17 00:00:00 2001 From: Titus Date: Sun, 15 May 2022 19:19:35 +0200 Subject: [PATCH 1/4] Add mention of `starry-night` to readme (#102) --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index c41f991..9bd2994 100644 --- a/readme.md +++ b/readme.md @@ -44,7 +44,7 @@ Import the `github-markdown.css` file and add a `markdown-body` class to the con ``` -If you want code syntax highlighted, use GitHub Flavored Markdown rendered from [GitHub's `/markdown` API](https://docs.github.com/en/free-pro-team@latest/rest/reference/markdown). +You can use [GitHub's `/markdown` API](https://docs.github.com/en/free-pro-team@latest/rest/reference/markdown) to turn Markdown into the HTML that GitHub generates, which works well with the CSS in this repo. Other Markdown parsers will mostly work with these styles too. To mimic how GitHub highlights code, you can use [`starry-night`](https://github.com/wooorm/starry-night) with your Markdown parser of choice. There are 3 themes provided in this package: From ec90c8c72e77ca5f0a6b048514a11525808d00bd Mon Sep 17 00:00:00 2001 From: Sindre Sorhus Date: Fri, 8 Jul 2022 13:32:50 +0200 Subject: [PATCH 2/4] Meta tweaks --- .github/funding.yml | 4 ++++ .github/security.md | 3 +++ 2 files changed, 7 insertions(+) create mode 100644 .github/funding.yml create mode 100644 .github/security.md diff --git a/.github/funding.yml b/.github/funding.yml new file mode 100644 index 0000000..bb3241e --- /dev/null +++ b/.github/funding.yml @@ -0,0 +1,4 @@ +github: sindresorhus +open_collective: sindresorhus +tidelift: npm/github-markdown-css +custom: https://sindresorhus.com/donate diff --git a/.github/security.md b/.github/security.md new file mode 100644 index 0000000..5358dc5 --- /dev/null +++ b/.github/security.md @@ -0,0 +1,3 @@ +# Security Policy + +To report a security vulnerability, please use the [Tidelift security contact](https://tidelift.com/security). Tidelift will coordinate the fix and disclosure. From 2380451e75df42bf62e29d1318231413aba6a8d2 Mon Sep 17 00:00:00 2001 From: Sindre Sorhus Date: Fri, 10 Feb 2023 15:43:45 +0700 Subject: [PATCH 3/4] Regenerate GitHub CSS --- github-markdown-dark.css | 432 ++++++++++++++++++++--------------- github-markdown-light.css | 432 ++++++++++++++++++++--------------- github-markdown.css | 462 ++++++++++++++++++++++---------------- package.json | 2 +- readme.md | 4 +- 5 files changed, 765 insertions(+), 567 deletions(-) diff --git a/github-markdown-dark.css b/github-markdown-dark.css index 43dedc0..3c5a8b3 100644 --- a/github-markdown-dark.css +++ b/github-markdown-dark.css @@ -5,7 +5,7 @@ margin: 0; color: #c9d1d9; background-color: #0d1117; - font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; font-size: 16px; line-height: 1.5; word-wrap: break-word; @@ -52,11 +52,6 @@ text-decoration: none; } -.markdown-body a:active, -.markdown-body a:hover { - outline-width: 0; -} - .markdown-body abbr[title] { border-bottom: none; text-decoration: underline dotted; @@ -115,7 +110,7 @@ .markdown-body kbd, .markdown-body pre, .markdown-body samp { - font-family: monospace,monospace; + font-family: monospace; font-size: 1em; } @@ -150,19 +145,6 @@ -webkit-appearance: button; } -.markdown-body [type=button]::-moz-focus-inner, -.markdown-body [type=reset]::-moz-focus-inner, -.markdown-body [type=submit]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -.markdown-body [type=button]:-moz-focusring, -.markdown-body [type=reset]:-moz-focusring, -.markdown-body [type=submit]:-moz-focusring { - outline: 1px dotted ButtonText; -} - .markdown-body [type=checkbox], .markdown-body [type=radio] { box-sizing: border-box; @@ -174,11 +156,6 @@ height: auto; } -.markdown-body [type=search] { - -webkit-appearance: textfield; - outline-offset: -2px; -} - .markdown-body [type=search]::-webkit-search-cancel-button, .markdown-body [type=search]::-webkit-search-decoration { -webkit-appearance: none; @@ -198,6 +175,11 @@ text-decoration: underline; } +.markdown-body ::placeholder { + color: #6e7681; + opacity: 1; +} + .markdown-body hr::before { display: table; content: ""; @@ -231,6 +213,40 @@ display: none !important; } +.markdown-body a:focus, +.markdown-body [role=button]:focus, +.markdown-body input[type=radio]:focus, +.markdown-body input[type=checkbox]:focus { + outline: 2px solid #58a6ff; + outline-offset: -2px; + box-shadow: none; +} + +.markdown-body a:focus:not(:focus-visible), +.markdown-body [role=button]:focus:not(:focus-visible), +.markdown-body input[type=radio]:focus:not(:focus-visible), +.markdown-body input[type=checkbox]:focus:not(:focus-visible) { + outline: solid 1px transparent; +} + +.markdown-body a:focus-visible, +.markdown-body [role=button]:focus-visible, +.markdown-body input[type=radio]:focus-visible, +.markdown-body input[type=checkbox]:focus-visible { + outline: 2px solid #58a6ff; + outline-offset: -2px; + box-shadow: none; +} + +.markdown-body a:not([class]):focus, +.markdown-body a:not([class]):focus-visible, +.markdown-body input[type=radio]:focus, +.markdown-body input[type=radio]:focus-visible, +.markdown-body input[type=checkbox]:focus, +.markdown-body input[type=checkbox]:focus-visible { + outline-offset: 0; +} + .markdown-body kbd { display: inline-block; padding: 3px 5px; @@ -321,7 +337,8 @@ } .markdown-body tt, -.markdown-body code { +.markdown-body code, +.markdown-body samp { font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; font-size: 12px; } @@ -341,11 +358,6 @@ fill: currentColor; } -.markdown-body ::placeholder { - color: #484f58; - opacity: 1; -} - .markdown-body input::-webkit-outer-spin-button, .markdown-body input::-webkit-inner-spin-button { margin: 0; @@ -353,144 +365,6 @@ appearance: none; } -.markdown-body .pl-c { - color: #8b949e; -} - -.markdown-body .pl-c1, -.markdown-body .pl-s .pl-v { - color: #79c0ff; -} - -.markdown-body .pl-e, -.markdown-body .pl-en { - color: #d2a8ff; -} - -.markdown-body .pl-smi, -.markdown-body .pl-s .pl-s1 { - color: #c9d1d9; -} - -.markdown-body .pl-ent { - color: #7ee787; -} - -.markdown-body .pl-k { - color: #ff7b72; -} - -.markdown-body .pl-s, -.markdown-body .pl-pds, -.markdown-body .pl-s .pl-pse .pl-s1, -.markdown-body .pl-sr, -.markdown-body .pl-sr .pl-cce, -.markdown-body .pl-sr .pl-sre, -.markdown-body .pl-sr .pl-sra { - color: #a5d6ff; -} - -.markdown-body .pl-v, -.markdown-body .pl-smw { - color: #ffa657; -} - -.markdown-body .pl-bu { - color: #f85149; -} - -.markdown-body .pl-ii { - color: #f0f6fc; - background-color: #8e1519; -} - -.markdown-body .pl-c2 { - color: #f0f6fc; - background-color: #b62324; -} - -.markdown-body .pl-sr .pl-cce { - font-weight: bold; - color: #7ee787; -} - -.markdown-body .pl-ml { - color: #f2cc60; -} - -.markdown-body .pl-mh, -.markdown-body .pl-mh .pl-en, -.markdown-body .pl-ms { - font-weight: bold; - color: #1f6feb; -} - -.markdown-body .pl-mi { - font-style: italic; - color: #c9d1d9; -} - -.markdown-body .pl-mb { - font-weight: bold; - color: #c9d1d9; -} - -.markdown-body .pl-md { - color: #ffdcd7; - background-color: #67060c; -} - -.markdown-body .pl-mi1 { - color: #aff5b4; - background-color: #033a16; -} - -.markdown-body .pl-mc { - color: #ffdfb6; - background-color: #5a1e02; -} - -.markdown-body .pl-mi2 { - color: #c9d1d9; - background-color: #1158c7; -} - -.markdown-body .pl-mdr { - font-weight: bold; - color: #d2a8ff; -} - -.markdown-body .pl-ba { - color: #8b949e; -} - -.markdown-body .pl-sg { - color: #484f58; -} - -.markdown-body .pl-corl { - text-decoration: underline; - color: #a5d6ff; -} - -.markdown-body [data-catalyst] { - display: block; -} - -.markdown-body 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; -} - -.markdown-body g-emoji img { - width: 1em; - height: 1em; -} - .markdown-body::before { display: table; content: ""; @@ -550,14 +424,6 @@ margin-bottom: 0; } -.markdown-body sup>a::before { - content: "["; -} - -.markdown-body sup>a::after { - content: "]"; -} - .markdown-body h1 .octicon-link, .markdown-body h2 .octicon-link, .markdown-body h3 .octicon-link, @@ -603,24 +469,56 @@ font-size: inherit; } +.markdown-body summary h1, +.markdown-body summary h2, +.markdown-body summary h3, +.markdown-body summary h4, +.markdown-body summary h5, +.markdown-body summary h6 { + display: inline-block; +} + +.markdown-body summary h1 .anchor, +.markdown-body summary h2 .anchor, +.markdown-body summary h3 .anchor, +.markdown-body summary h4 .anchor, +.markdown-body summary h5 .anchor, +.markdown-body summary h6 .anchor { + margin-left: -40px; +} + +.markdown-body summary h1, +.markdown-body summary h2 { + padding-bottom: 0; + border-bottom: 0; +} + .markdown-body ul.no-list, .markdown-body ol.no-list { padding: 0; list-style-type: none; } -.markdown-body ol[type="1"] { - list-style-type: decimal; -} - .markdown-body ol[type=a] { list-style-type: lower-alpha; } +.markdown-body ol[type=A] { + list-style-type: upper-alpha; +} + .markdown-body ol[type=i] { list-style-type: lower-roman; } +.markdown-body ol[type=I] { + list-style-type: upper-roman; +} + +.markdown-body ol[type="1"] { + list-style-type: decimal; +} + .markdown-body div>ol:not([type]) { list-style-type: decimal; } @@ -788,6 +686,7 @@ padding: .2em .4em; margin: 0; font-size: 85%; + white-space: break-spaces; background-color: rgba(110,118,129,0.4); border-radius: 6px; } @@ -801,6 +700,10 @@ text-decoration: inherit; } +.markdown-body samp { + font-size: 85%; +} + .markdown-body pre code { font-size: 100%; } @@ -873,6 +776,14 @@ border-top: 0; } +.markdown-body [data-footnote-ref]::before { + content: "["; +} + +.markdown-body [data-footnote-ref]::after { + content: "]"; +} + .markdown-body .footnotes { font-size: 12px; color: #8b949e; @@ -883,6 +794,12 @@ padding-left: 16px; } +.markdown-body .footnotes ol ul { + display: inline-block; + padding-left: 16px; + margin-top: 16px; +} + .markdown-body .footnotes li { position: relative; } @@ -907,6 +824,142 @@ font-family: monospace; } +.markdown-body .pl-c { + color: #8b949e; +} + +.markdown-body .pl-c1, +.markdown-body .pl-s .pl-v { + color: #79c0ff; +} + +.markdown-body .pl-e, +.markdown-body .pl-en { + color: #d2a8ff; +} + +.markdown-body .pl-smi, +.markdown-body .pl-s .pl-s1 { + color: #c9d1d9; +} + +.markdown-body .pl-ent { + color: #7ee787; +} + +.markdown-body .pl-k { + color: #ff7b72; +} + +.markdown-body .pl-s, +.markdown-body .pl-pds, +.markdown-body .pl-s .pl-pse .pl-s1, +.markdown-body .pl-sr, +.markdown-body .pl-sr .pl-cce, +.markdown-body .pl-sr .pl-sre, +.markdown-body .pl-sr .pl-sra { + color: #a5d6ff; +} + +.markdown-body .pl-v, +.markdown-body .pl-smw { + color: #ffa657; +} + +.markdown-body .pl-bu { + color: #f85149; +} + +.markdown-body .pl-ii { + color: #f0f6fc; + background-color: #8e1519; +} + +.markdown-body .pl-c2 { + color: #f0f6fc; + background-color: #b62324; +} + +.markdown-body .pl-sr .pl-cce { + font-weight: bold; + color: #7ee787; +} + +.markdown-body .pl-ml { + color: #f2cc60; +} + +.markdown-body .pl-mh, +.markdown-body .pl-mh .pl-en, +.markdown-body .pl-ms { + font-weight: bold; + color: #1f6feb; +} + +.markdown-body .pl-mi { + font-style: italic; + color: #c9d1d9; +} + +.markdown-body .pl-mb { + font-weight: bold; + color: #c9d1d9; +} + +.markdown-body .pl-md { + color: #ffdcd7; + background-color: #67060c; +} + +.markdown-body .pl-mi1 { + color: #aff5b4; + background-color: #033a16; +} + +.markdown-body .pl-mc { + color: #ffdfb6; + background-color: #5a1e02; +} + +.markdown-body .pl-mi2 { + color: #c9d1d9; + background-color: #1158c7; +} + +.markdown-body .pl-mdr { + font-weight: bold; + color: #d2a8ff; +} + +.markdown-body .pl-ba { + color: #8b949e; +} + +.markdown-body .pl-sg { + color: #484f58; +} + +.markdown-body .pl-corl { + text-decoration: underline; + color: #a5d6ff; +} + +.markdown-body g-emoji { + display: inline-block; + min-width: 1ch; + 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; +} + +.markdown-body g-emoji img { + width: 1em; + height: 1em; +} + .markdown-body .task-list-item { list-style-type: none; } @@ -920,7 +973,7 @@ } .markdown-body .task-list-item+.task-list-item { - margin-top: 3px; + margin-top: 4px; } .markdown-body .task-list-item .handle { @@ -928,7 +981,7 @@ } .markdown-body .task-list-item-checkbox { - margin: 0 .2em .25em -1.6em; + margin: 0 .2em .25em -1.4em; vertical-align: middle; } @@ -936,6 +989,19 @@ margin: 0 -1.6em .25em .2em; } +.markdown-body .contains-task-list { + position: relative; +} + +.markdown-body .contains-task-list:hover .task-list-item-convert-container, +.markdown-body .contains-task-list:focus-within .task-list-item-convert-container { + display: block; + width: auto; + height: 24px; + overflow: visible; + clip: auto; +} + .markdown-body ::-webkit-calendar-picker-indicator { filter: invert(50%); } diff --git a/github-markdown-light.css b/github-markdown-light.css index 15e3530..33766e8 100644 --- a/github-markdown-light.css +++ b/github-markdown-light.css @@ -4,7 +4,7 @@ margin: 0; color: #24292f; background-color: #ffffff; - font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; font-size: 16px; line-height: 1.5; word-wrap: break-word; @@ -51,11 +51,6 @@ text-decoration: none; } -.markdown-body a:active, -.markdown-body a:hover { - outline-width: 0; -} - .markdown-body abbr[title] { border-bottom: none; text-decoration: underline dotted; @@ -114,7 +109,7 @@ .markdown-body kbd, .markdown-body pre, .markdown-body samp { - font-family: monospace,monospace; + font-family: monospace; font-size: 1em; } @@ -149,19 +144,6 @@ -webkit-appearance: button; } -.markdown-body [type=button]::-moz-focus-inner, -.markdown-body [type=reset]::-moz-focus-inner, -.markdown-body [type=submit]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -.markdown-body [type=button]:-moz-focusring, -.markdown-body [type=reset]:-moz-focusring, -.markdown-body [type=submit]:-moz-focusring { - outline: 1px dotted ButtonText; -} - .markdown-body [type=checkbox], .markdown-body [type=radio] { box-sizing: border-box; @@ -173,11 +155,6 @@ height: auto; } -.markdown-body [type=search] { - -webkit-appearance: textfield; - outline-offset: -2px; -} - .markdown-body [type=search]::-webkit-search-cancel-button, .markdown-body [type=search]::-webkit-search-decoration { -webkit-appearance: none; @@ -197,6 +174,11 @@ text-decoration: underline; } +.markdown-body ::placeholder { + color: #6e7781; + opacity: 1; +} + .markdown-body hr::before { display: table; content: ""; @@ -230,6 +212,40 @@ display: none !important; } +.markdown-body a:focus, +.markdown-body [role=button]:focus, +.markdown-body input[type=radio]:focus, +.markdown-body input[type=checkbox]:focus { + outline: 2px solid #0969da; + outline-offset: -2px; + box-shadow: none; +} + +.markdown-body a:focus:not(:focus-visible), +.markdown-body [role=button]:focus:not(:focus-visible), +.markdown-body input[type=radio]:focus:not(:focus-visible), +.markdown-body input[type=checkbox]:focus:not(:focus-visible) { + outline: solid 1px transparent; +} + +.markdown-body a:focus-visible, +.markdown-body [role=button]:focus-visible, +.markdown-body input[type=radio]:focus-visible, +.markdown-body input[type=checkbox]:focus-visible { + outline: 2px solid #0969da; + outline-offset: -2px; + box-shadow: none; +} + +.markdown-body a:not([class]):focus, +.markdown-body a:not([class]):focus-visible, +.markdown-body input[type=radio]:focus, +.markdown-body input[type=radio]:focus-visible, +.markdown-body input[type=checkbox]:focus, +.markdown-body input[type=checkbox]:focus-visible { + outline-offset: 0; +} + .markdown-body kbd { display: inline-block; padding: 3px 5px; @@ -320,7 +336,8 @@ } .markdown-body tt, -.markdown-body code { +.markdown-body code, +.markdown-body samp { font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; font-size: 12px; } @@ -340,11 +357,6 @@ fill: currentColor; } -.markdown-body ::placeholder { - color: #6e7781; - opacity: 1; -} - .markdown-body input::-webkit-outer-spin-button, .markdown-body input::-webkit-inner-spin-button { margin: 0; @@ -352,144 +364,6 @@ appearance: none; } -.markdown-body .pl-c { - color: #6e7781; -} - -.markdown-body .pl-c1, -.markdown-body .pl-s .pl-v { - color: #0550ae; -} - -.markdown-body .pl-e, -.markdown-body .pl-en { - color: #8250df; -} - -.markdown-body .pl-smi, -.markdown-body .pl-s .pl-s1 { - color: #24292f; -} - -.markdown-body .pl-ent { - color: #116329; -} - -.markdown-body .pl-k { - color: #cf222e; -} - -.markdown-body .pl-s, -.markdown-body .pl-pds, -.markdown-body .pl-s .pl-pse .pl-s1, -.markdown-body .pl-sr, -.markdown-body .pl-sr .pl-cce, -.markdown-body .pl-sr .pl-sre, -.markdown-body .pl-sr .pl-sra { - color: #0a3069; -} - -.markdown-body .pl-v, -.markdown-body .pl-smw { - color: #953800; -} - -.markdown-body .pl-bu { - color: #82071e; -} - -.markdown-body .pl-ii { - color: #f6f8fa; - background-color: #82071e; -} - -.markdown-body .pl-c2 { - color: #f6f8fa; - background-color: #cf222e; -} - -.markdown-body .pl-sr .pl-cce { - font-weight: bold; - color: #116329; -} - -.markdown-body .pl-ml { - color: #3b2300; -} - -.markdown-body .pl-mh, -.markdown-body .pl-mh .pl-en, -.markdown-body .pl-ms { - font-weight: bold; - color: #0550ae; -} - -.markdown-body .pl-mi { - font-style: italic; - color: #24292f; -} - -.markdown-body .pl-mb { - font-weight: bold; - color: #24292f; -} - -.markdown-body .pl-md { - color: #82071e; - background-color: #FFEBE9; -} - -.markdown-body .pl-mi1 { - color: #116329; - background-color: #dafbe1; -} - -.markdown-body .pl-mc { - color: #953800; - background-color: #ffd8b5; -} - -.markdown-body .pl-mi2 { - color: #eaeef2; - background-color: #0550ae; -} - -.markdown-body .pl-mdr { - font-weight: bold; - color: #8250df; -} - -.markdown-body .pl-ba { - color: #57606a; -} - -.markdown-body .pl-sg { - color: #8c959f; -} - -.markdown-body .pl-corl { - text-decoration: underline; - color: #0a3069; -} - -.markdown-body [data-catalyst] { - display: block; -} - -.markdown-body 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; -} - -.markdown-body g-emoji img { - width: 1em; - height: 1em; -} - .markdown-body::before { display: table; content: ""; @@ -549,14 +423,6 @@ margin-bottom: 0; } -.markdown-body sup>a::before { - content: "["; -} - -.markdown-body sup>a::after { - content: "]"; -} - .markdown-body h1 .octicon-link, .markdown-body h2 .octicon-link, .markdown-body h3 .octicon-link, @@ -602,24 +468,56 @@ font-size: inherit; } +.markdown-body summary h1, +.markdown-body summary h2, +.markdown-body summary h3, +.markdown-body summary h4, +.markdown-body summary h5, +.markdown-body summary h6 { + display: inline-block; +} + +.markdown-body summary h1 .anchor, +.markdown-body summary h2 .anchor, +.markdown-body summary h3 .anchor, +.markdown-body summary h4 .anchor, +.markdown-body summary h5 .anchor, +.markdown-body summary h6 .anchor { + margin-left: -40px; +} + +.markdown-body summary h1, +.markdown-body summary h2 { + padding-bottom: 0; + border-bottom: 0; +} + .markdown-body ul.no-list, .markdown-body ol.no-list { padding: 0; list-style-type: none; } -.markdown-body ol[type="1"] { - list-style-type: decimal; -} - .markdown-body ol[type=a] { list-style-type: lower-alpha; } +.markdown-body ol[type=A] { + list-style-type: upper-alpha; +} + .markdown-body ol[type=i] { list-style-type: lower-roman; } +.markdown-body ol[type=I] { + list-style-type: upper-roman; +} + +.markdown-body ol[type="1"] { + list-style-type: decimal; +} + .markdown-body div>ol:not([type]) { list-style-type: decimal; } @@ -787,6 +685,7 @@ padding: .2em .4em; margin: 0; font-size: 85%; + white-space: break-spaces; background-color: rgba(175,184,193,0.2); border-radius: 6px; } @@ -800,6 +699,10 @@ text-decoration: inherit; } +.markdown-body samp { + font-size: 85%; +} + .markdown-body pre code { font-size: 100%; } @@ -872,6 +775,14 @@ border-top: 0; } +.markdown-body [data-footnote-ref]::before { + content: "["; +} + +.markdown-body [data-footnote-ref]::after { + content: "]"; +} + .markdown-body .footnotes { font-size: 12px; color: #57606a; @@ -882,6 +793,12 @@ padding-left: 16px; } +.markdown-body .footnotes ol ul { + display: inline-block; + padding-left: 16px; + margin-top: 16px; +} + .markdown-body .footnotes li { position: relative; } @@ -906,6 +823,142 @@ font-family: monospace; } +.markdown-body .pl-c { + color: #6e7781; +} + +.markdown-body .pl-c1, +.markdown-body .pl-s .pl-v { + color: #0550ae; +} + +.markdown-body .pl-e, +.markdown-body .pl-en { + color: #8250df; +} + +.markdown-body .pl-smi, +.markdown-body .pl-s .pl-s1 { + color: #24292f; +} + +.markdown-body .pl-ent { + color: #116329; +} + +.markdown-body .pl-k { + color: #cf222e; +} + +.markdown-body .pl-s, +.markdown-body .pl-pds, +.markdown-body .pl-s .pl-pse .pl-s1, +.markdown-body .pl-sr, +.markdown-body .pl-sr .pl-cce, +.markdown-body .pl-sr .pl-sre, +.markdown-body .pl-sr .pl-sra { + color: #0a3069; +} + +.markdown-body .pl-v, +.markdown-body .pl-smw { + color: #953800; +} + +.markdown-body .pl-bu { + color: #82071e; +} + +.markdown-body .pl-ii { + color: #f6f8fa; + background-color: #82071e; +} + +.markdown-body .pl-c2 { + color: #f6f8fa; + background-color: #cf222e; +} + +.markdown-body .pl-sr .pl-cce { + font-weight: bold; + color: #116329; +} + +.markdown-body .pl-ml { + color: #3b2300; +} + +.markdown-body .pl-mh, +.markdown-body .pl-mh .pl-en, +.markdown-body .pl-ms { + font-weight: bold; + color: #0550ae; +} + +.markdown-body .pl-mi { + font-style: italic; + color: #24292f; +} + +.markdown-body .pl-mb { + font-weight: bold; + color: #24292f; +} + +.markdown-body .pl-md { + color: #82071e; + background-color: #ffebe9; +} + +.markdown-body .pl-mi1 { + color: #116329; + background-color: #dafbe1; +} + +.markdown-body .pl-mc { + color: #953800; + background-color: #ffd8b5; +} + +.markdown-body .pl-mi2 { + color: #eaeef2; + background-color: #0550ae; +} + +.markdown-body .pl-mdr { + font-weight: bold; + color: #8250df; +} + +.markdown-body .pl-ba { + color: #57606a; +} + +.markdown-body .pl-sg { + color: #8c959f; +} + +.markdown-body .pl-corl { + text-decoration: underline; + color: #0a3069; +} + +.markdown-body g-emoji { + display: inline-block; + min-width: 1ch; + 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; +} + +.markdown-body g-emoji img { + width: 1em; + height: 1em; +} + .markdown-body .task-list-item { list-style-type: none; } @@ -919,7 +972,7 @@ } .markdown-body .task-list-item+.task-list-item { - margin-top: 3px; + margin-top: 4px; } .markdown-body .task-list-item .handle { @@ -927,7 +980,7 @@ } .markdown-body .task-list-item-checkbox { - margin: 0 .2em .25em -1.6em; + margin: 0 .2em .25em -1.4em; vertical-align: middle; } @@ -935,6 +988,19 @@ margin: 0 -1.6em .25em .2em; } +.markdown-body .contains-task-list { + position: relative; +} + +.markdown-body .contains-task-list:hover .task-list-item-convert-container, +.markdown-body .contains-task-list:focus-within .task-list-item-convert-container { + display: block; + width: auto; + height: 24px; + overflow: visible; + clip: auto; +} + .markdown-body ::-webkit-calendar-picker-indicator { filter: invert(50%); } diff --git a/github-markdown.css b/github-markdown.css index c4bf145..0c333ba 100644 --- a/github-markdown.css +++ b/github-markdown.css @@ -33,7 +33,7 @@ --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #c9d1d9; --color-fg-muted: #8b949e; - --color-fg-subtle: #484f58; + --color-fg-subtle: #6e7681; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; @@ -68,7 +68,7 @@ --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-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-markup-changed-text: #953800; @@ -100,7 +100,7 @@ margin: 0; color: var(--color-fg-default); background-color: var(--color-canvas-default); - font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; font-size: 16px; line-height: 1.5; word-wrap: break-word; @@ -147,11 +147,6 @@ text-decoration: none; } -.markdown-body a:active, -.markdown-body a:hover { - outline-width: 0; -} - .markdown-body abbr[title] { border-bottom: none; text-decoration: underline dotted; @@ -159,7 +154,7 @@ .markdown-body b, .markdown-body strong { - font-weight: 600; + font-weight: var(--base-text-weight-semibold, 600); } .markdown-body dfn { @@ -168,7 +163,7 @@ .markdown-body h1 { margin: .67em 0; - font-weight: 600; + font-weight: var(--base-text-weight-semibold, 600); padding-bottom: .3em; font-size: 2em; border-bottom: 1px solid var(--color-border-muted); @@ -176,7 +171,7 @@ .markdown-body mark { background-color: var(--color-attention-subtle); - color: var(--color-text-primary); + color: var(--color-fg-default); } .markdown-body small { @@ -210,7 +205,7 @@ .markdown-body kbd, .markdown-body pre, .markdown-body samp { - font-family: monospace,monospace; + font-family: monospace; font-size: 1em; } @@ -245,19 +240,6 @@ -webkit-appearance: button; } -.markdown-body [type=button]::-moz-focus-inner, -.markdown-body [type=reset]::-moz-focus-inner, -.markdown-body [type=submit]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -.markdown-body [type=button]:-moz-focusring, -.markdown-body [type=reset]:-moz-focusring, -.markdown-body [type=submit]:-moz-focusring { - outline: 1px dotted ButtonText; -} - .markdown-body [type=checkbox], .markdown-body [type=radio] { box-sizing: border-box; @@ -269,11 +251,6 @@ height: auto; } -.markdown-body [type=search] { - -webkit-appearance: textfield; - outline-offset: -2px; -} - .markdown-body [type=search]::-webkit-search-cancel-button, .markdown-body [type=search]::-webkit-search-decoration { -webkit-appearance: none; @@ -293,6 +270,11 @@ text-decoration: underline; } +.markdown-body ::placeholder { + color: var(--color-fg-subtle); + opacity: 1; +} + .markdown-body hr::before { display: table; content: ""; @@ -326,6 +308,40 @@ display: none !important; } +.markdown-body a:focus, +.markdown-body [role=button]:focus, +.markdown-body input[type=radio]:focus, +.markdown-body input[type=checkbox]:focus { + outline: 2px solid var(--color-accent-fg); + outline-offset: -2px; + box-shadow: none; +} + +.markdown-body a:focus:not(:focus-visible), +.markdown-body [role=button]:focus:not(:focus-visible), +.markdown-body input[type=radio]:focus:not(:focus-visible), +.markdown-body input[type=checkbox]:focus:not(:focus-visible) { + outline: solid 1px transparent; +} + +.markdown-body a:focus-visible, +.markdown-body [role=button]:focus-visible, +.markdown-body input[type=radio]:focus-visible, +.markdown-body input[type=checkbox]:focus-visible { + outline: 2px solid var(--color-accent-fg); + outline-offset: -2px; + box-shadow: none; +} + +.markdown-body a:not([class]):focus, +.markdown-body a:not([class]):focus-visible, +.markdown-body input[type=radio]:focus, +.markdown-body input[type=radio]:focus-visible, +.markdown-body input[type=checkbox]:focus, +.markdown-body input[type=checkbox]:focus-visible { + outline-offset: 0; +} + .markdown-body kbd { display: inline-block; padding: 3px 5px; @@ -348,34 +364,34 @@ .markdown-body h6 { margin-top: 24px; margin-bottom: 16px; - font-weight: 600; + font-weight: var(--base-text-weight-semibold, 600); line-height: 1.25; } .markdown-body h2 { - font-weight: 600; + font-weight: var(--base-text-weight-semibold, 600); padding-bottom: .3em; font-size: 1.5em; border-bottom: 1px solid var(--color-border-muted); } .markdown-body h3 { - font-weight: 600; + font-weight: var(--base-text-weight-semibold, 600); font-size: 1.25em; } .markdown-body h4 { - font-weight: 600; + font-weight: var(--base-text-weight-semibold, 600); font-size: 1em; } .markdown-body h5 { - font-weight: 600; + font-weight: var(--base-text-weight-semibold, 600); font-size: .875em; } .markdown-body h6 { - font-weight: 600; + font-weight: var(--base-text-weight-semibold, 600); font-size: .85em; color: var(--color-fg-muted); } @@ -416,7 +432,8 @@ } .markdown-body tt, -.markdown-body code { +.markdown-body code, +.markdown-body samp { font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; font-size: 12px; } @@ -436,11 +453,6 @@ fill: currentColor; } -.markdown-body ::placeholder { - color: var(--color-fg-subtle); - opacity: 1; -} - .markdown-body input::-webkit-outer-spin-button, .markdown-body input::-webkit-inner-spin-button { margin: 0; @@ -448,144 +460,6 @@ appearance: none; } -.markdown-body .pl-c { - color: var(--color-prettylights-syntax-comment); -} - -.markdown-body .pl-c1, -.markdown-body .pl-s .pl-v { - color: var(--color-prettylights-syntax-constant); -} - -.markdown-body .pl-e, -.markdown-body .pl-en { - color: var(--color-prettylights-syntax-entity); -} - -.markdown-body .pl-smi, -.markdown-body .pl-s .pl-s1 { - color: var(--color-prettylights-syntax-storage-modifier-import); -} - -.markdown-body .pl-ent { - color: var(--color-prettylights-syntax-entity-tag); -} - -.markdown-body .pl-k { - color: var(--color-prettylights-syntax-keyword); -} - -.markdown-body .pl-s, -.markdown-body .pl-pds, -.markdown-body .pl-s .pl-pse .pl-s1, -.markdown-body .pl-sr, -.markdown-body .pl-sr .pl-cce, -.markdown-body .pl-sr .pl-sre, -.markdown-body .pl-sr .pl-sra { - color: var(--color-prettylights-syntax-string); -} - -.markdown-body .pl-v, -.markdown-body .pl-smw { - color: var(--color-prettylights-syntax-variable); -} - -.markdown-body .pl-bu { - color: var(--color-prettylights-syntax-brackethighlighter-unmatched); -} - -.markdown-body .pl-ii { - color: var(--color-prettylights-syntax-invalid-illegal-text); - background-color: var(--color-prettylights-syntax-invalid-illegal-bg); -} - -.markdown-body .pl-c2 { - color: var(--color-prettylights-syntax-carriage-return-text); - background-color: var(--color-prettylights-syntax-carriage-return-bg); -} - -.markdown-body .pl-sr .pl-cce { - font-weight: bold; - color: var(--color-prettylights-syntax-string-regexp); -} - -.markdown-body .pl-ml { - color: var(--color-prettylights-syntax-markup-list); -} - -.markdown-body .pl-mh, -.markdown-body .pl-mh .pl-en, -.markdown-body .pl-ms { - font-weight: bold; - color: var(--color-prettylights-syntax-markup-heading); -} - -.markdown-body .pl-mi { - font-style: italic; - color: var(--color-prettylights-syntax-markup-italic); -} - -.markdown-body .pl-mb { - font-weight: bold; - color: var(--color-prettylights-syntax-markup-bold); -} - -.markdown-body .pl-md { - color: var(--color-prettylights-syntax-markup-deleted-text); - background-color: var(--color-prettylights-syntax-markup-deleted-bg); -} - -.markdown-body .pl-mi1 { - color: var(--color-prettylights-syntax-markup-inserted-text); - background-color: var(--color-prettylights-syntax-markup-inserted-bg); -} - -.markdown-body .pl-mc { - color: var(--color-prettylights-syntax-markup-changed-text); - background-color: var(--color-prettylights-syntax-markup-changed-bg); -} - -.markdown-body .pl-mi2 { - color: var(--color-prettylights-syntax-markup-ignored-text); - background-color: var(--color-prettylights-syntax-markup-ignored-bg); -} - -.markdown-body .pl-mdr { - font-weight: bold; - color: var(--color-prettylights-syntax-meta-diff-range); -} - -.markdown-body .pl-ba { - color: var(--color-prettylights-syntax-brackethighlighter-angle); -} - -.markdown-body .pl-sg { - color: var(--color-prettylights-syntax-sublimelinter-gutter-mark); -} - -.markdown-body .pl-corl { - text-decoration: underline; - color: var(--color-prettylights-syntax-constant-other-reference-link); -} - -.markdown-body [data-catalyst] { - display: block; -} - -.markdown-body 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; -} - -.markdown-body g-emoji img { - width: 1em; - height: 1em; -} - .markdown-body::before { display: table; content: ""; @@ -645,14 +519,6 @@ margin-bottom: 0; } -.markdown-body sup>a::before { - content: "["; -} - -.markdown-body sup>a::after { - content: "]"; -} - .markdown-body h1 .octicon-link, .markdown-body h2 .octicon-link, .markdown-body h3 .octicon-link, @@ -698,24 +564,56 @@ font-size: inherit; } +.markdown-body summary h1, +.markdown-body summary h2, +.markdown-body summary h3, +.markdown-body summary h4, +.markdown-body summary h5, +.markdown-body summary h6 { + display: inline-block; +} + +.markdown-body summary h1 .anchor, +.markdown-body summary h2 .anchor, +.markdown-body summary h3 .anchor, +.markdown-body summary h4 .anchor, +.markdown-body summary h5 .anchor, +.markdown-body summary h6 .anchor { + margin-left: -40px; +} + +.markdown-body summary h1, +.markdown-body summary h2 { + padding-bottom: 0; + border-bottom: 0; +} + .markdown-body ul.no-list, .markdown-body ol.no-list { padding: 0; list-style-type: none; } -.markdown-body ol[type="1"] { - list-style-type: decimal; -} - .markdown-body ol[type=a] { list-style-type: lower-alpha; } +.markdown-body ol[type=A] { + list-style-type: upper-alpha; +} + .markdown-body ol[type=i] { list-style-type: lower-roman; } +.markdown-body ol[type=I] { + list-style-type: upper-roman; +} + +.markdown-body ol[type="1"] { + list-style-type: decimal; +} + .markdown-body div>ol:not([type]) { list-style-type: decimal; } @@ -745,7 +643,7 @@ margin-top: 16px; font-size: 1em; font-style: italic; - font-weight: 600; + font-weight: var(--base-text-weight-semibold, 600); } .markdown-body dl dd { @@ -754,7 +652,7 @@ } .markdown-body table th { - font-weight: 600; + font-weight: var(--base-text-weight-semibold, 600); } .markdown-body table th, @@ -883,6 +781,7 @@ padding: .2em .4em; margin: 0; font-size: 85%; + white-space: break-spaces; background-color: var(--color-neutral-muted); border-radius: 6px; } @@ -896,6 +795,10 @@ text-decoration: inherit; } +.markdown-body samp { + font-size: 85%; +} + .markdown-body pre code { font-size: 100%; } @@ -963,11 +866,19 @@ } .markdown-body .csv-data th { - font-weight: 600; + font-weight: var(--base-text-weight-semibold, 600); background: var(--color-canvas-subtle); border-top: 0; } +.markdown-body [data-footnote-ref]::before { + content: "["; +} + +.markdown-body [data-footnote-ref]::after { + content: "]"; +} + .markdown-body .footnotes { font-size: 12px; color: var(--color-fg-muted); @@ -978,6 +889,12 @@ padding-left: 16px; } +.markdown-body .footnotes ol ul { + display: inline-block; + padding-left: 16px; + margin-top: 16px; +} + .markdown-body .footnotes li { position: relative; } @@ -1002,12 +919,148 @@ font-family: monospace; } +.markdown-body .pl-c { + color: var(--color-prettylights-syntax-comment); +} + +.markdown-body .pl-c1, +.markdown-body .pl-s .pl-v { + color: var(--color-prettylights-syntax-constant); +} + +.markdown-body .pl-e, +.markdown-body .pl-en { + color: var(--color-prettylights-syntax-entity); +} + +.markdown-body .pl-smi, +.markdown-body .pl-s .pl-s1 { + color: var(--color-prettylights-syntax-storage-modifier-import); +} + +.markdown-body .pl-ent { + color: var(--color-prettylights-syntax-entity-tag); +} + +.markdown-body .pl-k { + color: var(--color-prettylights-syntax-keyword); +} + +.markdown-body .pl-s, +.markdown-body .pl-pds, +.markdown-body .pl-s .pl-pse .pl-s1, +.markdown-body .pl-sr, +.markdown-body .pl-sr .pl-cce, +.markdown-body .pl-sr .pl-sre, +.markdown-body .pl-sr .pl-sra { + color: var(--color-prettylights-syntax-string); +} + +.markdown-body .pl-v, +.markdown-body .pl-smw { + color: var(--color-prettylights-syntax-variable); +} + +.markdown-body .pl-bu { + color: var(--color-prettylights-syntax-brackethighlighter-unmatched); +} + +.markdown-body .pl-ii { + color: var(--color-prettylights-syntax-invalid-illegal-text); + background-color: var(--color-prettylights-syntax-invalid-illegal-bg); +} + +.markdown-body .pl-c2 { + color: var(--color-prettylights-syntax-carriage-return-text); + background-color: var(--color-prettylights-syntax-carriage-return-bg); +} + +.markdown-body .pl-sr .pl-cce { + font-weight: bold; + color: var(--color-prettylights-syntax-string-regexp); +} + +.markdown-body .pl-ml { + color: var(--color-prettylights-syntax-markup-list); +} + +.markdown-body .pl-mh, +.markdown-body .pl-mh .pl-en, +.markdown-body .pl-ms { + font-weight: bold; + color: var(--color-prettylights-syntax-markup-heading); +} + +.markdown-body .pl-mi { + font-style: italic; + color: var(--color-prettylights-syntax-markup-italic); +} + +.markdown-body .pl-mb { + font-weight: bold; + color: var(--color-prettylights-syntax-markup-bold); +} + +.markdown-body .pl-md { + color: var(--color-prettylights-syntax-markup-deleted-text); + background-color: var(--color-prettylights-syntax-markup-deleted-bg); +} + +.markdown-body .pl-mi1 { + color: var(--color-prettylights-syntax-markup-inserted-text); + background-color: var(--color-prettylights-syntax-markup-inserted-bg); +} + +.markdown-body .pl-mc { + color: var(--color-prettylights-syntax-markup-changed-text); + background-color: var(--color-prettylights-syntax-markup-changed-bg); +} + +.markdown-body .pl-mi2 { + color: var(--color-prettylights-syntax-markup-ignored-text); + background-color: var(--color-prettylights-syntax-markup-ignored-bg); +} + +.markdown-body .pl-mdr { + font-weight: bold; + color: var(--color-prettylights-syntax-meta-diff-range); +} + +.markdown-body .pl-ba { + color: var(--color-prettylights-syntax-brackethighlighter-angle); +} + +.markdown-body .pl-sg { + color: var(--color-prettylights-syntax-sublimelinter-gutter-mark); +} + +.markdown-body .pl-corl { + text-decoration: underline; + color: var(--color-prettylights-syntax-constant-other-reference-link); +} + +.markdown-body g-emoji { + display: inline-block; + min-width: 1ch; + font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 1em; + font-style: normal !important; + font-weight: var(--base-text-weight-normal, 400); + line-height: 1; + vertical-align: -0.075em; +} + +.markdown-body g-emoji img { + width: 1em; + height: 1em; +} + .markdown-body .task-list-item { list-style-type: none; } .markdown-body .task-list-item label { - font-weight: 400; + font-weight: var(--base-text-weight-normal, 400); } .markdown-body .task-list-item.enabled label { @@ -1015,7 +1068,7 @@ } .markdown-body .task-list-item+.task-list-item { - margin-top: 3px; + margin-top: 4px; } .markdown-body .task-list-item .handle { @@ -1023,7 +1076,7 @@ } .markdown-body .task-list-item-checkbox { - margin: 0 .2em .25em -1.6em; + margin: 0 .2em .25em -1.4em; vertical-align: middle; } @@ -1031,6 +1084,19 @@ margin: 0 -1.6em .25em .2em; } +.markdown-body .contains-task-list { + position: relative; +} + +.markdown-body .contains-task-list:hover .task-list-item-convert-container, +.markdown-body .contains-task-list:focus-within .task-list-item-convert-container { + display: block; + width: auto; + height: 24px; + overflow: visible; + clip: auto; +} + .markdown-body ::-webkit-calendar-picker-indicator { filter: invert(50%); } diff --git a/package.json b/package.json index 6c9b11f..9f8237d 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,6 @@ "stylesheet" ], "devDependencies": { - "generate-github-markdown-css": "^5.0.1" + "generate-github-markdown-css": "^5.0.2" } } diff --git a/readme.md b/readme.md index 9bd2994..486d8d9 100644 --- a/readme.md +++ b/readme.md @@ -12,8 +12,8 @@ Download [manually](https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css), from [CDNJS](https://cdnjs.com/libraries/github-markdown-css), or with npm: -``` -$ npm install github-markdown-css +```sh +npm install github-markdown-css ``` ## Usage From 5ec832f378e36706bc1af26c65d5f0655ab33ef4 Mon Sep 17 00:00:00 2001 From: Sindre Sorhus Date: Fri, 10 Feb 2023 23:26:07 +0700 Subject: [PATCH 4/4] 5.2.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9f8237d..54b3adc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "github-markdown-css", - "version": "5.1.0", + "version": "5.2.0", "description": "The minimal amount of CSS to replicate the GitHub Markdown style", "license": "MIT", "repository": "sindresorhus/github-markdown-css",