diff --git a/packages/markdown-preview/README.md b/packages/markdown-preview/README.md index a0988778c..0d31429e5 100644 --- a/packages/markdown-preview/README.md +++ b/packages/markdown-preview/README.md @@ -8,44 +8,43 @@ It is currently enabled for `.markdown`, `.md`, `.mdown`, `.mkd`, `.mkdown`, `.r ## Customize -By default Markdown Preview uses the colors of the active syntax theme. Enable `Use GitHub.com style` in the __package settings__ to make it look closer to how markdown files get rendered on github.com. +By default Markdown Preview uses the colors of the active syntax theme. Enable **Use GitHub.com Style** in the __package settings__ to make it look closer to how markdown files get rendered on github.com. ![markdown-preview GitHub style](https://cloud.githubusercontent.com/assets/378023/10013087/24ccc7ec-6149-11e5-97ea-53a842a715ea.png) -To customize even further, the styling can be overridden in your `styles.less` file. For example: +When **Use GitHub.com Style** is selected, you can further customize the theme of the Markdown preview with the **GitHub.com Style Mode** setting. Since the GitHub website has a light theme and a dark theme, `markdown-preview` allows you to choose which theme to use when previewing your files. By default, it will use whatever mode is preferred by your system, but you can opt into “Light” or “Dark” to force it to use a particular theme. + +No matter which theme you use, you can apply further customizations in your `styles.less` file. For example: ```css -.markdown-preview.markdown-preview { +.markdown-preview pre { background-color: #444; } ``` -## Syntax Highlighting Language Identifier +## Language identifiers in fenced code blocks -While a verbose specification of Markdown, mostly, ensures the content of Markdown will look the same everywhere it's shipped, the same isn't true of code block language identifiers. +A detailed Markdown specification helps to ensure that Markdown is displayed consistently across multiple parsers. Sadly, the same isn’t true of code block language identifiers — the strings you use to tell the renderer what sort of code is inside a code block. -A "code block language identifier" is the string you use to tell the Markdown renderer what code is inside a code block of your Markdown document. +The CommonMark specification [explicitly avoids standardizing these identifiers](https://spec.commonmark.org/0.31.2/#info-string): -Nearly every Markdown rendering system supports different strings to specify your language than each other. `Markdown-Preview` has implemented several valid Language Identifier systems to help ensure that your Markdown will look the same no matter where you publish it! +> The first word of the info string is typically used to specify the language of the code sample, and rendered in the class attribute of the code tag. However, this spec does not mandate any particular treatment of the info string. -In the settings, you can select from a list of different popular Language Identification systems that can then be used in your code blocks. This means that they will still be valid when shipping them to whatever platform of your choice. +There are several valid ways to infer specific languages from language identifiers such as `js`, `less`, `coffee`, and `c`. This package supports the following systems, configured via the **Syntax Highlighting Language Identifiers** setting: -Currently, `Markdown-Preview` supports the following: + * [Linguist](https://github.com/github-linguist/linguist): Used by GitHub (previously the default and only language identification system). + * [Chroma](https://github.com/alecthomas/chroma): Used by CodeBerg/Gitea/Hugo/Goldmark. + * [Rouge](https://github.com/rouge-ruby/rouge): Used by GitLab/Jekyll. + * [HighlightJS](https://highlightjs.org/): Used in a number of places, but most relevantly on the [Pulsar Package Registry](https://web.pulsar-edit.dev/) website. - * Linguist: Used by GitHub (Previously the default and only language identification system) - * Chroma: Used by CodeBerg/Gitea/Hugo/Goldmark - * Rouge: Used by GitLab/Jekyll - * HighlightJS: Used by Markdown-IT/Pulsar Package Website +If none of these systems meets your needs, you may specify custom language identifiers. This may not be as portable as the systems described above, but it will at least produce the desired outcome on your own system. +The setting **Custom Syntax Highlighting Language Identifiers** lets you define a list of custom language identifiers that match up to languages available within your Pulsar installation. -Of course, not all Markdown content is destined to be shared, `Markdown-Preview` even lets you specify custom Language Identifiers to be used within your Markdown code blocks. - -The setting `Custom Syntax Highlighting Language Identifiers` lets you define a list of custom language identifiers that match up to languages available within your Pulsar installation - -For example, if you wanted to highlight your code like JavaScript by just using `j` as your Code Block language Identifier and `p` to use Python Syntax Highlighting, you could add the following to this setting: +For example, if you wanted to map `j` to JavaScript and `p` to Python, you’d add the following text to the **Custom Syntax Highlighting Language Identifiers** field: ``` j: source.js, p: source.python ``` -And that's it, now anytime you use that language identifier it will be highlighted exactly the way you want. Of course your preference of language identification system will still be used, in addition to your custom list. +Now `markdown-preview` will understand what to do with fenced code blocks that begin with \`\`\`j or \`\`\`p. These custom identifiers will work alongside whatever system you’ve chosen with **Syntax Highlighting Language Identifiers**, but will supersede that system in the event of conflict. diff --git a/packages/markdown-preview/assets/github-markdown-auto.css b/packages/markdown-preview/assets/github-markdown-auto.css new file mode 100644 index 000000000..433e8673a --- /dev/null +++ b/packages/markdown-preview/assets/github-markdown-auto.css @@ -0,0 +1,2173 @@ +@media (prefers-color-scheme: light) { + /*light*/ + + .markdown-preview[data-use-github-style="auto"] { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + color: #1F2328; + background-color: #ffffff; + 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; + } + + .markdown-preview[data-use-github-style="auto"] .octicon { + display: inline-block; + fill: currentColor; + vertical-align: text-bottom; + } + + .markdown-preview[data-use-github-style="auto"] h1:hover .anchor .octicon-link:before, + .markdown-preview[data-use-github-style="auto"] h2:hover .anchor .octicon-link:before, + .markdown-preview[data-use-github-style="auto"] h3:hover .anchor .octicon-link:before, + .markdown-preview[data-use-github-style="auto"] h4:hover .anchor .octicon-link:before, + .markdown-preview[data-use-github-style="auto"] h5:hover .anchor .octicon-link:before, + .markdown-preview[data-use-github-style="auto"] h6:hover .anchor .octicon-link:before { + width: 16px; + height: 16px; + content: ' '; + display: inline-block; + background-color: currentColor; + -webkit-mask-image: url("data:image/svg+xml,"); + mask-image: url("data:image/svg+xml,"); + } + + .markdown-preview[data-use-github-style="auto"] details, + .markdown-preview[data-use-github-style="auto"] figcaption, + .markdown-preview[data-use-github-style="auto"] figure { + display: block; + } + + .markdown-preview[data-use-github-style="auto"] summary { + display: list-item; + } + + .markdown-preview[data-use-github-style="auto"] [hidden] { + display: none !important; + } + + .markdown-preview[data-use-github-style="auto"] a { + background-color: transparent; + color: #0969da; + text-decoration: none; + } + + .markdown-preview[data-use-github-style="auto"] abbr[title] { + border-bottom: none; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + + .markdown-preview[data-use-github-style="auto"] b, + .markdown-preview[data-use-github-style="auto"] strong { + font-weight: 600; + } + + .markdown-preview[data-use-github-style="auto"] dfn { + font-style: italic; + } + + .markdown-preview[data-use-github-style="auto"] h1 { + margin: .67em 0; + font-weight: 600; + padding-bottom: .3em; + font-size: 2em; + border-bottom: 1px solid hsla(210,18%,87%,1); + } + + .markdown-preview[data-use-github-style="auto"] mark { + background-color: #fff8c5; + color: #1F2328; + } + + .markdown-preview[data-use-github-style="auto"] small { + font-size: 90%; + } + + .markdown-preview[data-use-github-style="auto"] sub, + .markdown-preview[data-use-github-style="auto"] sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + .markdown-preview[data-use-github-style="auto"] sub { + bottom: -0.25em; + } + + .markdown-preview[data-use-github-style="auto"] sup { + top: -0.5em; + } + + .markdown-preview[data-use-github-style="auto"] img { + border-style: none; + max-width: 100%; + box-sizing: content-box; + background-color: #ffffff; + } + + .markdown-preview[data-use-github-style="auto"] code, + .markdown-preview[data-use-github-style="auto"] kbd, + .markdown-preview[data-use-github-style="auto"] pre, + .markdown-preview[data-use-github-style="auto"] samp { + font-family: monospace; + font-size: 1em; + } + + .markdown-preview[data-use-github-style="auto"] figure { + margin: 1em 40px; + } + + .markdown-preview[data-use-github-style="auto"] hr { + box-sizing: content-box; + overflow: hidden; + background: transparent; + border-bottom: 1px solid hsla(210,18%,87%,1); + height: .25em; + padding: 0; + margin: 24px 0; + background-color: #d0d7de; + border: 0; + } + + .markdown-preview[data-use-github-style="auto"] input { + font: inherit; + margin: 0; + overflow: visible; + font-family: inherit; + font-size: inherit; + line-height: inherit; + } + + .markdown-preview[data-use-github-style="auto"] [type=button], + .markdown-preview[data-use-github-style="auto"] [type=reset], + .markdown-preview[data-use-github-style="auto"] [type=submit] { + -webkit-appearance: button; + appearance: button; + } + + .markdown-preview[data-use-github-style="auto"] [type=checkbox], + .markdown-preview[data-use-github-style="auto"] [type=radio] { + box-sizing: border-box; + padding: 0; + } + + .markdown-preview[data-use-github-style="auto"] [type=number]::-webkit-inner-spin-button, + .markdown-preview[data-use-github-style="auto"] [type=number]::-webkit-outer-spin-button { + height: auto; + } + + .markdown-preview[data-use-github-style="auto"] [type=search]::-webkit-search-cancel-button, + .markdown-preview[data-use-github-style="auto"] [type=search]::-webkit-search-decoration { + -webkit-appearance: none; + appearance: none; + } + + .markdown-preview[data-use-github-style="auto"] ::-webkit-input-placeholder { + color: inherit; + opacity: .54; + } + + .markdown-preview[data-use-github-style="auto"] ::-webkit-file-upload-button { + -webkit-appearance: button; + appearance: button; + font: inherit; + } + + .markdown-preview[data-use-github-style="auto"] a:hover { + text-decoration: underline; + } + + .markdown-preview[data-use-github-style="auto"] ::placeholder { + color: #6e7781; + opacity: 1; + } + + .markdown-preview[data-use-github-style="auto"] hr::before { + display: table; + content: ""; + } + + .markdown-preview[data-use-github-style="auto"] hr::after { + display: table; + clear: both; + content: ""; + } + + .markdown-preview[data-use-github-style="auto"] table { + border-spacing: 0; + border-collapse: collapse; + display: block; + width: max-content; + max-width: 100%; + overflow: auto; + } + + .markdown-preview[data-use-github-style="auto"] td, + .markdown-preview[data-use-github-style="auto"] th { + padding: 0; + } + + .markdown-preview[data-use-github-style="auto"] details summary { + cursor: pointer; + } + + .markdown-preview[data-use-github-style="auto"] details:not([open])>*:not(summary) { + display: none !important; + } + + .markdown-preview[data-use-github-style="auto"] a:focus, + .markdown-preview[data-use-github-style="auto"] [role=button]:focus, + .markdown-preview[data-use-github-style="auto"] input[type=radio]:focus, + .markdown-preview[data-use-github-style="auto"] input[type=checkbox]:focus { + outline: 2px solid #0969da; + outline-offset: -2px; + box-shadow: none; + } + + .markdown-preview[data-use-github-style="auto"] a:focus:not(:focus-visible), + .markdown-preview[data-use-github-style="auto"] [role=button]:focus:not(:focus-visible), + .markdown-preview[data-use-github-style="auto"] input[type=radio]:focus:not(:focus-visible), + .markdown-preview[data-use-github-style="auto"] input[type=checkbox]:focus:not(:focus-visible) { + outline: solid 1px transparent; + } + + .markdown-preview[data-use-github-style="auto"] a:focus-visible, + .markdown-preview[data-use-github-style="auto"] [role=button]:focus-visible, + .markdown-preview[data-use-github-style="auto"] input[type=radio]:focus-visible, + .markdown-preview[data-use-github-style="auto"] input[type=checkbox]:focus-visible { + outline: 2px solid #0969da; + outline-offset: -2px; + box-shadow: none; + } + + .markdown-preview[data-use-github-style="auto"] a:not([class]):focus, + .markdown-preview[data-use-github-style="auto"] a:not([class]):focus-visible, + .markdown-preview[data-use-github-style="auto"] input[type=radio]:focus, + .markdown-preview[data-use-github-style="auto"] input[type=radio]:focus-visible, + .markdown-preview[data-use-github-style="auto"] input[type=checkbox]:focus, + .markdown-preview[data-use-github-style="auto"] input[type=checkbox]:focus-visible { + outline-offset: 0; + } + + .markdown-preview[data-use-github-style="auto"] kbd { + display: inline-block; + padding: 3px 5px; + font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + line-height: 10px; + color: #1F2328; + vertical-align: middle; + background-color: #f6f8fa; + border: solid 1px rgba(175,184,193,0.2); + border-bottom-color: rgba(175,184,193,0.2); + border-radius: 6px; + box-shadow: inset 0 -1px 0 rgba(175,184,193,0.2); + } + + .markdown-preview[data-use-github-style="auto"] h1, + .markdown-preview[data-use-github-style="auto"] h2, + .markdown-preview[data-use-github-style="auto"] h3, + .markdown-preview[data-use-github-style="auto"] h4, + .markdown-preview[data-use-github-style="auto"] h5, + .markdown-preview[data-use-github-style="auto"] h6 { + margin-top: 24px; + margin-bottom: 16px; + font-weight: 600; + line-height: 1.25; + } + + .markdown-preview[data-use-github-style="auto"] h2 { + font-weight: 600; + padding-bottom: .3em; + font-size: 1.5em; + border-bottom: 1px solid hsla(210,18%,87%,1); + } + + .markdown-preview[data-use-github-style="auto"] h3 { + font-weight: 600; + font-size: 1.25em; + } + + .markdown-preview[data-use-github-style="auto"] h4 { + font-weight: 600; + font-size: 1em; + } + + .markdown-preview[data-use-github-style="auto"] h5 { + font-weight: 600; + font-size: .875em; + } + + .markdown-preview[data-use-github-style="auto"] h6 { + font-weight: 600; + font-size: .85em; + color: #656d76; + } + + .markdown-preview[data-use-github-style="auto"] p { + margin-top: 0; + margin-bottom: 10px; + } + + .markdown-preview[data-use-github-style="auto"] blockquote { + margin: 0; + padding: 0 1em; + color: #656d76; + border-left: .25em solid #d0d7de; + } + + .markdown-preview[data-use-github-style="auto"] ul, + .markdown-preview[data-use-github-style="auto"] ol { + margin-top: 0; + margin-bottom: 0; + padding-left: 2em; + } + + .markdown-preview[data-use-github-style="auto"] ol ol, + .markdown-preview[data-use-github-style="auto"] ul ol { + list-style-type: lower-roman; + } + + .markdown-preview[data-use-github-style="auto"] ul ul ol, + .markdown-preview[data-use-github-style="auto"] ul ol ol, + .markdown-preview[data-use-github-style="auto"] ol ul ol, + .markdown-preview[data-use-github-style="auto"] ol ol ol { + list-style-type: lower-alpha; + } + + .markdown-preview[data-use-github-style="auto"] dd { + margin-left: 0; + } + + .markdown-preview[data-use-github-style="auto"] tt, + .markdown-preview[data-use-github-style="auto"] code, + .markdown-preview[data-use-github-style="auto"] samp { + font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + font-size: 12px; + } + + .markdown-preview[data-use-github-style="auto"] 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; + } + + .markdown-preview[data-use-github-style="auto"] .octicon { + display: inline-block; + overflow: visible !important; + vertical-align: text-bottom; + fill: currentColor; + } + + .markdown-preview[data-use-github-style="auto"] input::-webkit-outer-spin-button, + .markdown-preview[data-use-github-style="auto"] input::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; + appearance: none; + } + + .markdown-preview[data-use-github-style="auto"] .mr-2 { + margin-right: 8px !important; + } + + .markdown-preview[data-use-github-style="auto"]::before { + display: table; + content: ""; + } + + .markdown-preview[data-use-github-style="auto"]::after { + display: table; + clear: both; + content: ""; + } + + .markdown-preview[data-use-github-style="auto"]>*:first-child { + margin-top: 0 !important; + } + + .markdown-preview[data-use-github-style="auto"]>*:last-child { + margin-bottom: 0 !important; + } + + .markdown-preview[data-use-github-style="auto"] a:not([href]) { + color: inherit; + text-decoration: none; + } + + .markdown-preview[data-use-github-style="auto"] .absent { + color: #d1242f; + } + + .markdown-preview[data-use-github-style="auto"] .anchor { + float: left; + padding-right: 4px; + margin-left: -20px; + line-height: 1; + } + + .markdown-preview[data-use-github-style="auto"] .anchor:focus { + outline: none; + } + + .markdown-preview[data-use-github-style="auto"] p, + .markdown-preview[data-use-github-style="auto"] blockquote, + .markdown-preview[data-use-github-style="auto"] ul, + .markdown-preview[data-use-github-style="auto"] ol, + .markdown-preview[data-use-github-style="auto"] dl, + .markdown-preview[data-use-github-style="auto"] table, + .markdown-preview[data-use-github-style="auto"] pre, + .markdown-preview[data-use-github-style="auto"] details { + margin-top: 0; + margin-bottom: 16px; + } + + .markdown-preview[data-use-github-style="auto"] blockquote>:first-child { + margin-top: 0; + } + + .markdown-preview[data-use-github-style="auto"] blockquote>:last-child { + margin-bottom: 0; + } + + .markdown-preview[data-use-github-style="auto"] h1 .octicon-link, + .markdown-preview[data-use-github-style="auto"] h2 .octicon-link, + .markdown-preview[data-use-github-style="auto"] h3 .octicon-link, + .markdown-preview[data-use-github-style="auto"] h4 .octicon-link, + .markdown-preview[data-use-github-style="auto"] h5 .octicon-link, + .markdown-preview[data-use-github-style="auto"] h6 .octicon-link { + color: #1F2328; + vertical-align: middle; + visibility: hidden; + } + + .markdown-preview[data-use-github-style="auto"] h1:hover .anchor, + .markdown-preview[data-use-github-style="auto"] h2:hover .anchor, + .markdown-preview[data-use-github-style="auto"] h3:hover .anchor, + .markdown-preview[data-use-github-style="auto"] h4:hover .anchor, + .markdown-preview[data-use-github-style="auto"] h5:hover .anchor, + .markdown-preview[data-use-github-style="auto"] h6:hover .anchor { + text-decoration: none; + } + + .markdown-preview[data-use-github-style="auto"] h1:hover .anchor .octicon-link, + .markdown-preview[data-use-github-style="auto"] h2:hover .anchor .octicon-link, + .markdown-preview[data-use-github-style="auto"] h3:hover .anchor .octicon-link, + .markdown-preview[data-use-github-style="auto"] h4:hover .anchor .octicon-link, + .markdown-preview[data-use-github-style="auto"] h5:hover .anchor .octicon-link, + .markdown-preview[data-use-github-style="auto"] h6:hover .anchor .octicon-link { + visibility: visible; + } + + .markdown-preview[data-use-github-style="auto"] h1 tt, + .markdown-preview[data-use-github-style="auto"] h1 code, + .markdown-preview[data-use-github-style="auto"] h2 tt, + .markdown-preview[data-use-github-style="auto"] h2 code, + .markdown-preview[data-use-github-style="auto"] h3 tt, + .markdown-preview[data-use-github-style="auto"] h3 code, + .markdown-preview[data-use-github-style="auto"] h4 tt, + .markdown-preview[data-use-github-style="auto"] h4 code, + .markdown-preview[data-use-github-style="auto"] h5 tt, + .markdown-preview[data-use-github-style="auto"] h5 code, + .markdown-preview[data-use-github-style="auto"] h6 tt, + .markdown-preview[data-use-github-style="auto"] h6 code { + padding: 0 .2em; + font-size: inherit; + } + + .markdown-preview[data-use-github-style="auto"] summary h1, + .markdown-preview[data-use-github-style="auto"] summary h2, + .markdown-preview[data-use-github-style="auto"] summary h3, + .markdown-preview[data-use-github-style="auto"] summary h4, + .markdown-preview[data-use-github-style="auto"] summary h5, + .markdown-preview[data-use-github-style="auto"] summary h6 { + display: inline-block; + } + + .markdown-preview[data-use-github-style="auto"] summary h1 .anchor, + .markdown-preview[data-use-github-style="auto"] summary h2 .anchor, + .markdown-preview[data-use-github-style="auto"] summary h3 .anchor, + .markdown-preview[data-use-github-style="auto"] summary h4 .anchor, + .markdown-preview[data-use-github-style="auto"] summary h5 .anchor, + .markdown-preview[data-use-github-style="auto"] summary h6 .anchor { + margin-left: -40px; + } + + .markdown-preview[data-use-github-style="auto"] summary h1, + .markdown-preview[data-use-github-style="auto"] summary h2 { + padding-bottom: 0; + border-bottom: 0; + } + + .markdown-preview[data-use-github-style="auto"] ul.no-list, + .markdown-preview[data-use-github-style="auto"] ol.no-list { + padding: 0; + list-style-type: none; + } + + .markdown-preview[data-use-github-style="auto"] ol[type="a s"] { + list-style-type: lower-alpha; + } + + .markdown-preview[data-use-github-style="auto"] ol[type="A s"] { + list-style-type: upper-alpha; + } + + .markdown-preview[data-use-github-style="auto"] ol[type="i s"] { + list-style-type: lower-roman; + } + + .markdown-preview[data-use-github-style="auto"] ol[type="I s"] { + list-style-type: upper-roman; + } + + .markdown-preview[data-use-github-style="auto"] ol[type="1"] { + list-style-type: decimal; + } + + .markdown-preview[data-use-github-style="auto"] div>ol:not([type]) { + list-style-type: decimal; + } + + .markdown-preview[data-use-github-style="auto"] ul ul, + .markdown-preview[data-use-github-style="auto"] ul ol, + .markdown-preview[data-use-github-style="auto"] ol ol, + .markdown-preview[data-use-github-style="auto"] ol ul { + margin-top: 0; + margin-bottom: 0; + } + + .markdown-preview[data-use-github-style="auto"] li>p { + margin-top: 16px; + } + + .markdown-preview[data-use-github-style="auto"] li+li { + margin-top: .25em; + } + + .markdown-preview[data-use-github-style="auto"] dl { + padding: 0; + } + + .markdown-preview[data-use-github-style="auto"] dl dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: 600; + } + + .markdown-preview[data-use-github-style="auto"] dl dd { + padding: 0 16px; + margin-bottom: 16px; + } + + .markdown-preview[data-use-github-style="auto"] table th { + font-weight: 600; + } + + .markdown-preview[data-use-github-style="auto"] table th, + .markdown-preview[data-use-github-style="auto"] table td { + padding: 6px 13px; + border: 1px solid #d0d7de; + } + + .markdown-preview[data-use-github-style="auto"] table td>:last-child { + margin-bottom: 0; + } + + .markdown-preview[data-use-github-style="auto"] table tr { + background-color: #ffffff; + border-top: 1px solid hsla(210,18%,87%,1); + } + + .markdown-preview[data-use-github-style="auto"] table tr:nth-child(2n) { + background-color: #f6f8fa; + } + + .markdown-preview[data-use-github-style="auto"] table img { + background-color: transparent; + } + + .markdown-preview[data-use-github-style="auto"] img[align=right] { + padding-left: 20px; + } + + .markdown-preview[data-use-github-style="auto"] img[align=left] { + padding-right: 20px; + } + + .markdown-preview[data-use-github-style="auto"] .emoji { + max-width: none; + vertical-align: text-top; + background-color: transparent; + } + + .markdown-preview[data-use-github-style="auto"] span.frame { + display: block; + overflow: hidden; + } + + .markdown-preview[data-use-github-style="auto"] span.frame>span { + display: block; + float: left; + width: auto; + padding: 7px; + margin: 13px 0 0; + overflow: hidden; + border: 1px solid #d0d7de; + } + + .markdown-preview[data-use-github-style="auto"] span.frame span img { + display: block; + float: left; + } + + .markdown-preview[data-use-github-style="auto"] span.frame span span { + display: block; + padding: 5px 0 0; + clear: both; + color: #1F2328; + } + + .markdown-preview[data-use-github-style="auto"] span.align-center { + display: block; + overflow: hidden; + clear: both; + } + + .markdown-preview[data-use-github-style="auto"] span.align-center>span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: center; + } + + .markdown-preview[data-use-github-style="auto"] span.align-center span img { + margin: 0 auto; + text-align: center; + } + + .markdown-preview[data-use-github-style="auto"] span.align-right { + display: block; + overflow: hidden; + clear: both; + } + + .markdown-preview[data-use-github-style="auto"] span.align-right>span { + display: block; + margin: 13px 0 0; + overflow: hidden; + text-align: right; + } + + .markdown-preview[data-use-github-style="auto"] span.align-right span img { + margin: 0; + text-align: right; + } + + .markdown-preview[data-use-github-style="auto"] span.float-left { + display: block; + float: left; + margin-right: 13px; + overflow: hidden; + } + + .markdown-preview[data-use-github-style="auto"] span.float-left span { + margin: 13px 0 0; + } + + .markdown-preview[data-use-github-style="auto"] span.float-right { + display: block; + float: right; + margin-left: 13px; + overflow: hidden; + } + + .markdown-preview[data-use-github-style="auto"] span.float-right>span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: right; + } + + .markdown-preview[data-use-github-style="auto"] code, + .markdown-preview[data-use-github-style="auto"] tt { + padding: .2em .4em; + margin: 0; + font-size: 85%; + white-space: break-spaces; + background-color: rgba(175,184,193,0.2); + border-radius: 6px; + } + + .markdown-preview[data-use-github-style="auto"] code br, + .markdown-preview[data-use-github-style="auto"] tt br { + display: none; + } + + .markdown-preview[data-use-github-style="auto"] del code { + text-decoration: inherit; + } + + .markdown-preview[data-use-github-style="auto"] samp { + font-size: 85%; + } + + .markdown-preview[data-use-github-style="auto"] pre code { + font-size: 100%; + } + + .markdown-preview[data-use-github-style="auto"] pre>code { + padding: 0; + margin: 0; + word-break: normal; + white-space: pre; + background: transparent; + border: 0; + } + + .markdown-preview[data-use-github-style="auto"] .highlight { + margin-bottom: 16px; + } + + .markdown-preview[data-use-github-style="auto"] .highlight pre { + margin-bottom: 0; + word-break: normal; + } + + .markdown-preview[data-use-github-style="auto"] .highlight pre, + .markdown-preview[data-use-github-style="auto"] pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + color: #1F2328; + background-color: #f6f8fa; + border-radius: 6px; + } + + .markdown-preview[data-use-github-style="auto"] pre code, + .markdown-preview[data-use-github-style="auto"] pre tt { + display: inline; + max-width: auto; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; + } + + .markdown-preview[data-use-github-style="auto"] .csv-data td, + .markdown-preview[data-use-github-style="auto"] .csv-data th { + padding: 5px; + overflow: hidden; + font-size: 12px; + line-height: 1; + text-align: left; + white-space: nowrap; + } + + .markdown-preview[data-use-github-style="auto"] .csv-data .blob-num { + padding: 10px 8px 9px; + text-align: right; + background: #ffffff; + border: 0; + } + + .markdown-preview[data-use-github-style="auto"] .csv-data tr { + border-top: 0; + } + + .markdown-preview[data-use-github-style="auto"] .csv-data th { + font-weight: 600; + background: #f6f8fa; + border-top: 0; + } + + .markdown-preview[data-use-github-style="auto"] [data-footnote-ref]::before { + content: "["; + } + + .markdown-preview[data-use-github-style="auto"] [data-footnote-ref]::after { + content: "]"; + } + + .markdown-preview[data-use-github-style="auto"] .footnotes { + font-size: 12px; + color: #656d76; + border-top: 1px solid #d0d7de; + } + + .markdown-preview[data-use-github-style="auto"] .footnotes ol { + padding-left: 16px; + } + + .markdown-preview[data-use-github-style="auto"] .footnotes ol ul { + display: inline-block; + padding-left: 16px; + margin-top: 16px; + } + + .markdown-preview[data-use-github-style="auto"] .footnotes li { + position: relative; + } + + .markdown-preview[data-use-github-style="auto"] .footnotes li:target::before { + position: absolute; + top: -8px; + right: -8px; + bottom: -8px; + left: -24px; + pointer-events: none; + content: ""; + border: 2px solid #0969da; + border-radius: 6px; + } + + .markdown-preview[data-use-github-style="auto"] .footnotes li:target { + color: #1F2328; + } + + .markdown-preview[data-use-github-style="auto"] .footnotes .data-footnote-backref g-emoji { + font-family: monospace; + } + + .markdown-preview[data-use-github-style="auto"] .pl-c { + color: #57606a; + } + + .markdown-preview[data-use-github-style="auto"] .pl-c1, + .markdown-preview[data-use-github-style="auto"] .pl-s .pl-v { + color: #0550ae; + } + + .markdown-preview[data-use-github-style="auto"] .pl-e, + .markdown-preview[data-use-github-style="auto"] .pl-en { + color: #6639ba; + } + + .markdown-preview[data-use-github-style="auto"] .pl-smi, + .markdown-preview[data-use-github-style="auto"] .pl-s .pl-s1 { + color: #24292f; + } + + .markdown-preview[data-use-github-style="auto"] .pl-ent { + color: #116329; + } + + .markdown-preview[data-use-github-style="auto"] .pl-k { + color: #cf222e; + } + + .markdown-preview[data-use-github-style="auto"] .pl-s, + .markdown-preview[data-use-github-style="auto"] .pl-pds, + .markdown-preview[data-use-github-style="auto"] .pl-s .pl-pse .pl-s1, + .markdown-preview[data-use-github-style="auto"] .pl-sr, + .markdown-preview[data-use-github-style="auto"] .pl-sr .pl-cce, + .markdown-preview[data-use-github-style="auto"] .pl-sr .pl-sre, + .markdown-preview[data-use-github-style="auto"] .pl-sr .pl-sra { + color: #0a3069; + } + + .markdown-preview[data-use-github-style="auto"] .pl-v, + .markdown-preview[data-use-github-style="auto"] .pl-smw { + color: #953800; + } + + .markdown-preview[data-use-github-style="auto"] .pl-bu { + color: #82071e; + } + + .markdown-preview[data-use-github-style="auto"] .pl-ii { + color: #f6f8fa; + background-color: #82071e; + } + + .markdown-preview[data-use-github-style="auto"] .pl-c2 { + color: #f6f8fa; + background-color: #cf222e; + } + + .markdown-preview[data-use-github-style="auto"] .pl-sr .pl-cce { + font-weight: bold; + color: #116329; + } + + .markdown-preview[data-use-github-style="auto"] .pl-ml { + color: #3b2300; + } + + .markdown-preview[data-use-github-style="auto"] .pl-mh, + .markdown-preview[data-use-github-style="auto"] .pl-mh .pl-en, + .markdown-preview[data-use-github-style="auto"] .pl-ms { + font-weight: bold; + color: #0550ae; + } + + .markdown-preview[data-use-github-style="auto"] .pl-mi { + font-style: italic; + color: #24292f; + } + + .markdown-preview[data-use-github-style="auto"] .pl-mb { + font-weight: bold; + color: #24292f; + } + + .markdown-preview[data-use-github-style="auto"] .pl-md { + color: #82071e; + background-color: #ffebe9; + } + + .markdown-preview[data-use-github-style="auto"] .pl-mi1 { + color: #116329; + background-color: #dafbe1; + } + + .markdown-preview[data-use-github-style="auto"] .pl-mc { + color: #953800; + background-color: #ffd8b5; + } + + .markdown-preview[data-use-github-style="auto"] .pl-mi2 { + color: #eaeef2; + background-color: #0550ae; + } + + .markdown-preview[data-use-github-style="auto"] .pl-mdr { + font-weight: bold; + color: #8250df; + } + + .markdown-preview[data-use-github-style="auto"] .pl-ba { + color: #57606a; + } + + .markdown-preview[data-use-github-style="auto"] .pl-sg { + color: #8c959f; + } + + .markdown-preview[data-use-github-style="auto"] .pl-corl { + text-decoration: underline; + color: #0a3069; + } + + .markdown-preview[data-use-github-style="auto"] 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-preview[data-use-github-style="auto"] g-emoji img { + width: 1em; + height: 1em; + } + + .markdown-preview[data-use-github-style="auto"] .task-list-item { + list-style-type: none; + } + + .markdown-preview[data-use-github-style="auto"] .task-list-item label { + font-weight: 400; + } + + .markdown-preview[data-use-github-style="auto"] .task-list-item.enabled label { + cursor: pointer; + } + + .markdown-preview[data-use-github-style="auto"] .task-list-item+.task-list-item { + margin-top: 4px; + } + + .markdown-preview[data-use-github-style="auto"] .task-list-item .handle { + display: none; + } + + .markdown-preview[data-use-github-style="auto"] .task-list-item-checkbox { + margin: 0 .2em .25em -1.4em; + vertical-align: middle; + } + + .markdown-preview[data-use-github-style="auto"] .contains-task-list:dir(rtl) .task-list-item-checkbox { + margin: 0 -1.6em .25em .2em; + } + + .markdown-preview[data-use-github-style="auto"] .contains-task-list { + position: relative; + } + + .markdown-preview[data-use-github-style="auto"] .contains-task-list:hover .task-list-item-convert-container, + .markdown-preview[data-use-github-style="auto"] .contains-task-list:focus-within .task-list-item-convert-container { + display: block; + width: auto; + height: 24px; + overflow: visible; + clip: auto; + } + + .markdown-preview[data-use-github-style="auto"] ::-webkit-calendar-picker-indicator { + filter: invert(50%); + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert { + padding: 8px 16px; + margin-bottom: 16px; + color: inherit; + border-left: .25em solid #d0d7de; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert>:first-child { + margin-top: 0; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert>:last-child { + margin-bottom: 0; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert .markdown-alert-title { + display: flex; + font-weight: 500; + align-items: center; + line-height: 1; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-note { + border-left-color: #0969da; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-note .markdown-alert-title { + color: #0969da; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-important { + border-left-color: #8250df; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-important .markdown-alert-title { + color: #8250df; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-warning { + border-left-color: #9a6700; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-warning .markdown-alert-title { + color: #9a6700; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-tip { + border-left-color: #1f883d; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-tip .markdown-alert-title { + color: #1a7f37; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-caution { + border-left-color: #cf222e; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-caution .markdown-alert-title { + color: #d1242f; + } + +} +@media (prefers-color-scheme: dark) { + /*dark*/ + + .markdown-preview[data-use-github-style="auto"] { + color-scheme: dark; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + color: #e6edf3; + background-color: #0d1117; + 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; + } + + .markdown-preview[data-use-github-style="auto"] .octicon { + display: inline-block; + fill: currentColor; + vertical-align: text-bottom; + } + + .markdown-preview[data-use-github-style="auto"] h1:hover .anchor .octicon-link:before, + .markdown-preview[data-use-github-style="auto"] h2:hover .anchor .octicon-link:before, + .markdown-preview[data-use-github-style="auto"] h3:hover .anchor .octicon-link:before, + .markdown-preview[data-use-github-style="auto"] h4:hover .anchor .octicon-link:before, + .markdown-preview[data-use-github-style="auto"] h5:hover .anchor .octicon-link:before, + .markdown-preview[data-use-github-style="auto"] h6:hover .anchor .octicon-link:before { + width: 16px; + height: 16px; + content: ' '; + display: inline-block; + background-color: currentColor; + -webkit-mask-image: url("data:image/svg+xml,"); + mask-image: url("data:image/svg+xml,"); + } + + .markdown-preview[data-use-github-style="auto"] details, + .markdown-preview[data-use-github-style="auto"] figcaption, + .markdown-preview[data-use-github-style="auto"] figure { + display: block; + } + + .markdown-preview[data-use-github-style="auto"] summary { + display: list-item; + } + + .markdown-preview[data-use-github-style="auto"] [hidden] { + display: none !important; + } + + .markdown-preview[data-use-github-style="auto"] a { + background-color: transparent; + color: #2f81f7; + text-decoration: none; + } + + .markdown-preview[data-use-github-style="auto"] abbr[title] { + border-bottom: none; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + + .markdown-preview[data-use-github-style="auto"] b, + .markdown-preview[data-use-github-style="auto"] strong { + font-weight: 600; + } + + .markdown-preview[data-use-github-style="auto"] dfn { + font-style: italic; + } + + .markdown-preview[data-use-github-style="auto"] h1 { + margin: .67em 0; + font-weight: 600; + padding-bottom: .3em; + font-size: 2em; + border-bottom: 1px solid #21262d; + } + + .markdown-preview[data-use-github-style="auto"] mark { + background-color: rgba(187,128,9,0.15); + color: #e6edf3; + } + + .markdown-preview[data-use-github-style="auto"] small { + font-size: 90%; + } + + .markdown-preview[data-use-github-style="auto"] sub, + .markdown-preview[data-use-github-style="auto"] sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + .markdown-preview[data-use-github-style="auto"] sub { + bottom: -0.25em; + } + + .markdown-preview[data-use-github-style="auto"] sup { + top: -0.5em; + } + + .markdown-preview[data-use-github-style="auto"] img { + border-style: none; + max-width: 100%; + box-sizing: content-box; + background-color: #0d1117; + } + + .markdown-preview[data-use-github-style="auto"] code, + .markdown-preview[data-use-github-style="auto"] kbd, + .markdown-preview[data-use-github-style="auto"] pre, + .markdown-preview[data-use-github-style="auto"] samp { + font-family: monospace; + font-size: 1em; + } + + .markdown-preview[data-use-github-style="auto"] figure { + margin: 1em 40px; + } + + .markdown-preview[data-use-github-style="auto"] hr { + box-sizing: content-box; + overflow: hidden; + background: transparent; + border-bottom: 1px solid #21262d; + height: .25em; + padding: 0; + margin: 24px 0; + background-color: #30363d; + border: 0; + } + + .markdown-preview[data-use-github-style="auto"] input { + font: inherit; + margin: 0; + overflow: visible; + font-family: inherit; + font-size: inherit; + line-height: inherit; + } + + .markdown-preview[data-use-github-style="auto"] [type=button], + .markdown-preview[data-use-github-style="auto"] [type=reset], + .markdown-preview[data-use-github-style="auto"] [type=submit] { + -webkit-appearance: button; + appearance: button; + } + + .markdown-preview[data-use-github-style="auto"] [type=checkbox], + .markdown-preview[data-use-github-style="auto"] [type=radio] { + box-sizing: border-box; + padding: 0; + } + + .markdown-preview[data-use-github-style="auto"] [type=number]::-webkit-inner-spin-button, + .markdown-preview[data-use-github-style="auto"] [type=number]::-webkit-outer-spin-button { + height: auto; + } + + .markdown-preview[data-use-github-style="auto"] [type=search]::-webkit-search-cancel-button, + .markdown-preview[data-use-github-style="auto"] [type=search]::-webkit-search-decoration { + -webkit-appearance: none; + appearance: none; + } + + .markdown-preview[data-use-github-style="auto"] ::-webkit-input-placeholder { + color: inherit; + opacity: .54; + } + + .markdown-preview[data-use-github-style="auto"] ::-webkit-file-upload-button { + -webkit-appearance: button; + appearance: button; + font: inherit; + } + + .markdown-preview[data-use-github-style="auto"] a:hover { + text-decoration: underline; + } + + .markdown-preview[data-use-github-style="auto"] ::placeholder { + color: #6e7681; + opacity: 1; + } + + .markdown-preview[data-use-github-style="auto"] hr::before { + display: table; + content: ""; + } + + .markdown-preview[data-use-github-style="auto"] hr::after { + display: table; + clear: both; + content: ""; + } + + .markdown-preview[data-use-github-style="auto"] table { + border-spacing: 0; + border-collapse: collapse; + display: block; + width: max-content; + max-width: 100%; + overflow: auto; + } + + .markdown-preview[data-use-github-style="auto"] td, + .markdown-preview[data-use-github-style="auto"] th { + padding: 0; + } + + .markdown-preview[data-use-github-style="auto"] details summary { + cursor: pointer; + } + + .markdown-preview[data-use-github-style="auto"] details:not([open])>*:not(summary) { + display: none !important; + } + + .markdown-preview[data-use-github-style="auto"] a:focus, + .markdown-preview[data-use-github-style="auto"] [role=button]:focus, + .markdown-preview[data-use-github-style="auto"] input[type=radio]:focus, + .markdown-preview[data-use-github-style="auto"] input[type=checkbox]:focus { + outline: 2px solid #2f81f7; + outline-offset: -2px; + box-shadow: none; + } + + .markdown-preview[data-use-github-style="auto"] a:focus:not(:focus-visible), + .markdown-preview[data-use-github-style="auto"] [role=button]:focus:not(:focus-visible), + .markdown-preview[data-use-github-style="auto"] input[type=radio]:focus:not(:focus-visible), + .markdown-preview[data-use-github-style="auto"] input[type=checkbox]:focus:not(:focus-visible) { + outline: solid 1px transparent; + } + + .markdown-preview[data-use-github-style="auto"] a:focus-visible, + .markdown-preview[data-use-github-style="auto"] [role=button]:focus-visible, + .markdown-preview[data-use-github-style="auto"] input[type=radio]:focus-visible, + .markdown-preview[data-use-github-style="auto"] input[type=checkbox]:focus-visible { + outline: 2px solid #2f81f7; + outline-offset: -2px; + box-shadow: none; + } + + .markdown-preview[data-use-github-style="auto"] a:not([class]):focus, + .markdown-preview[data-use-github-style="auto"] a:not([class]):focus-visible, + .markdown-preview[data-use-github-style="auto"] input[type=radio]:focus, + .markdown-preview[data-use-github-style="auto"] input[type=radio]:focus-visible, + .markdown-preview[data-use-github-style="auto"] input[type=checkbox]:focus, + .markdown-preview[data-use-github-style="auto"] input[type=checkbox]:focus-visible { + outline-offset: 0; + } + + .markdown-preview[data-use-github-style="auto"] kbd { + display: inline-block; + padding: 3px 5px; + font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + line-height: 10px; + color: #e6edf3; + vertical-align: middle; + background-color: #161b22; + border: solid 1px rgba(110,118,129,0.4); + border-bottom-color: rgba(110,118,129,0.4); + border-radius: 6px; + box-shadow: inset 0 -1px 0 rgba(110,118,129,0.4); + } + + .markdown-preview[data-use-github-style="auto"] h1, + .markdown-preview[data-use-github-style="auto"] h2, + .markdown-preview[data-use-github-style="auto"] h3, + .markdown-preview[data-use-github-style="auto"] h4, + .markdown-preview[data-use-github-style="auto"] h5, + .markdown-preview[data-use-github-style="auto"] h6 { + margin-top: 24px; + margin-bottom: 16px; + font-weight: 600; + line-height: 1.25; + } + + .markdown-preview[data-use-github-style="auto"] h2 { + font-weight: 600; + padding-bottom: .3em; + font-size: 1.5em; + border-bottom: 1px solid #21262d; + } + + .markdown-preview[data-use-github-style="auto"] h3 { + font-weight: 600; + font-size: 1.25em; + } + + .markdown-preview[data-use-github-style="auto"] h4 { + font-weight: 600; + font-size: 1em; + } + + .markdown-preview[data-use-github-style="auto"] h5 { + font-weight: 600; + font-size: .875em; + } + + .markdown-preview[data-use-github-style="auto"] h6 { + font-weight: 600; + font-size: .85em; + color: #848d97; + } + + .markdown-preview[data-use-github-style="auto"] p { + margin-top: 0; + margin-bottom: 10px; + } + + .markdown-preview[data-use-github-style="auto"] blockquote { + margin: 0; + padding: 0 1em; + color: #848d97; + border-left: .25em solid #30363d; + } + + .markdown-preview[data-use-github-style="auto"] ul, + .markdown-preview[data-use-github-style="auto"] ol { + margin-top: 0; + margin-bottom: 0; + padding-left: 2em; + } + + .markdown-preview[data-use-github-style="auto"] ol ol, + .markdown-preview[data-use-github-style="auto"] ul ol { + list-style-type: lower-roman; + } + + .markdown-preview[data-use-github-style="auto"] ul ul ol, + .markdown-preview[data-use-github-style="auto"] ul ol ol, + .markdown-preview[data-use-github-style="auto"] ol ul ol, + .markdown-preview[data-use-github-style="auto"] ol ol ol { + list-style-type: lower-alpha; + } + + .markdown-preview[data-use-github-style="auto"] dd { + margin-left: 0; + } + + .markdown-preview[data-use-github-style="auto"] tt, + .markdown-preview[data-use-github-style="auto"] code, + .markdown-preview[data-use-github-style="auto"] samp { + font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + font-size: 12px; + } + + .markdown-preview[data-use-github-style="auto"] 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; + } + + .markdown-preview[data-use-github-style="auto"] .octicon { + display: inline-block; + overflow: visible !important; + vertical-align: text-bottom; + fill: currentColor; + } + + .markdown-preview[data-use-github-style="auto"] input::-webkit-outer-spin-button, + .markdown-preview[data-use-github-style="auto"] input::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; + appearance: none; + } + + .markdown-preview[data-use-github-style="auto"] .mr-2 { + margin-right: 8px !important; + } + + .markdown-preview[data-use-github-style="auto"]::before { + display: table; + content: ""; + } + + .markdown-preview[data-use-github-style="auto"]::after { + display: table; + clear: both; + content: ""; + } + + .markdown-preview[data-use-github-style="auto"]>*:first-child { + margin-top: 0 !important; + } + + .markdown-preview[data-use-github-style="auto"]>*:last-child { + margin-bottom: 0 !important; + } + + .markdown-preview[data-use-github-style="auto"] a:not([href]) { + color: inherit; + text-decoration: none; + } + + .markdown-preview[data-use-github-style="auto"] .absent { + color: #f85149; + } + + .markdown-preview[data-use-github-style="auto"] .anchor { + float: left; + padding-right: 4px; + margin-left: -20px; + line-height: 1; + } + + .markdown-preview[data-use-github-style="auto"] .anchor:focus { + outline: none; + } + + .markdown-preview[data-use-github-style="auto"] p, + .markdown-preview[data-use-github-style="auto"] blockquote, + .markdown-preview[data-use-github-style="auto"] ul, + .markdown-preview[data-use-github-style="auto"] ol, + .markdown-preview[data-use-github-style="auto"] dl, + .markdown-preview[data-use-github-style="auto"] table, + .markdown-preview[data-use-github-style="auto"] pre, + .markdown-preview[data-use-github-style="auto"] details { + margin-top: 0; + margin-bottom: 16px; + } + + .markdown-preview[data-use-github-style="auto"] blockquote>:first-child { + margin-top: 0; + } + + .markdown-preview[data-use-github-style="auto"] blockquote>:last-child { + margin-bottom: 0; + } + + .markdown-preview[data-use-github-style="auto"] h1 .octicon-link, + .markdown-preview[data-use-github-style="auto"] h2 .octicon-link, + .markdown-preview[data-use-github-style="auto"] h3 .octicon-link, + .markdown-preview[data-use-github-style="auto"] h4 .octicon-link, + .markdown-preview[data-use-github-style="auto"] h5 .octicon-link, + .markdown-preview[data-use-github-style="auto"] h6 .octicon-link { + color: #e6edf3; + vertical-align: middle; + visibility: hidden; + } + + .markdown-preview[data-use-github-style="auto"] h1:hover .anchor, + .markdown-preview[data-use-github-style="auto"] h2:hover .anchor, + .markdown-preview[data-use-github-style="auto"] h3:hover .anchor, + .markdown-preview[data-use-github-style="auto"] h4:hover .anchor, + .markdown-preview[data-use-github-style="auto"] h5:hover .anchor, + .markdown-preview[data-use-github-style="auto"] h6:hover .anchor { + text-decoration: none; + } + + .markdown-preview[data-use-github-style="auto"] h1:hover .anchor .octicon-link, + .markdown-preview[data-use-github-style="auto"] h2:hover .anchor .octicon-link, + .markdown-preview[data-use-github-style="auto"] h3:hover .anchor .octicon-link, + .markdown-preview[data-use-github-style="auto"] h4:hover .anchor .octicon-link, + .markdown-preview[data-use-github-style="auto"] h5:hover .anchor .octicon-link, + .markdown-preview[data-use-github-style="auto"] h6:hover .anchor .octicon-link { + visibility: visible; + } + + .markdown-preview[data-use-github-style="auto"] h1 tt, + .markdown-preview[data-use-github-style="auto"] h1 code, + .markdown-preview[data-use-github-style="auto"] h2 tt, + .markdown-preview[data-use-github-style="auto"] h2 code, + .markdown-preview[data-use-github-style="auto"] h3 tt, + .markdown-preview[data-use-github-style="auto"] h3 code, + .markdown-preview[data-use-github-style="auto"] h4 tt, + .markdown-preview[data-use-github-style="auto"] h4 code, + .markdown-preview[data-use-github-style="auto"] h5 tt, + .markdown-preview[data-use-github-style="auto"] h5 code, + .markdown-preview[data-use-github-style="auto"] h6 tt, + .markdown-preview[data-use-github-style="auto"] h6 code { + padding: 0 .2em; + font-size: inherit; + } + + .markdown-preview[data-use-github-style="auto"] summary h1, + .markdown-preview[data-use-github-style="auto"] summary h2, + .markdown-preview[data-use-github-style="auto"] summary h3, + .markdown-preview[data-use-github-style="auto"] summary h4, + .markdown-preview[data-use-github-style="auto"] summary h5, + .markdown-preview[data-use-github-style="auto"] summary h6 { + display: inline-block; + } + + .markdown-preview[data-use-github-style="auto"] summary h1 .anchor, + .markdown-preview[data-use-github-style="auto"] summary h2 .anchor, + .markdown-preview[data-use-github-style="auto"] summary h3 .anchor, + .markdown-preview[data-use-github-style="auto"] summary h4 .anchor, + .markdown-preview[data-use-github-style="auto"] summary h5 .anchor, + .markdown-preview[data-use-github-style="auto"] summary h6 .anchor { + margin-left: -40px; + } + + .markdown-preview[data-use-github-style="auto"] summary h1, + .markdown-preview[data-use-github-style="auto"] summary h2 { + padding-bottom: 0; + border-bottom: 0; + } + + .markdown-preview[data-use-github-style="auto"] ul.no-list, + .markdown-preview[data-use-github-style="auto"] ol.no-list { + padding: 0; + list-style-type: none; + } + + .markdown-preview[data-use-github-style="auto"] ol[type="a s"] { + list-style-type: lower-alpha; + } + + .markdown-preview[data-use-github-style="auto"] ol[type="A s"] { + list-style-type: upper-alpha; + } + + .markdown-preview[data-use-github-style="auto"] ol[type="i s"] { + list-style-type: lower-roman; + } + + .markdown-preview[data-use-github-style="auto"] ol[type="I s"] { + list-style-type: upper-roman; + } + + .markdown-preview[data-use-github-style="auto"] ol[type="1"] { + list-style-type: decimal; + } + + .markdown-preview[data-use-github-style="auto"] div>ol:not([type]) { + list-style-type: decimal; + } + + .markdown-preview[data-use-github-style="auto"] ul ul, + .markdown-preview[data-use-github-style="auto"] ul ol, + .markdown-preview[data-use-github-style="auto"] ol ol, + .markdown-preview[data-use-github-style="auto"] ol ul { + margin-top: 0; + margin-bottom: 0; + } + + .markdown-preview[data-use-github-style="auto"] li>p { + margin-top: 16px; + } + + .markdown-preview[data-use-github-style="auto"] li+li { + margin-top: .25em; + } + + .markdown-preview[data-use-github-style="auto"] dl { + padding: 0; + } + + .markdown-preview[data-use-github-style="auto"] dl dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: 600; + } + + .markdown-preview[data-use-github-style="auto"] dl dd { + padding: 0 16px; + margin-bottom: 16px; + } + + .markdown-preview[data-use-github-style="auto"] table th { + font-weight: 600; + } + + .markdown-preview[data-use-github-style="auto"] table th, + .markdown-preview[data-use-github-style="auto"] table td { + padding: 6px 13px; + border: 1px solid #30363d; + } + + .markdown-preview[data-use-github-style="auto"] table td>:last-child { + margin-bottom: 0; + } + + .markdown-preview[data-use-github-style="auto"] table tr { + background-color: #0d1117; + border-top: 1px solid #21262d; + } + + .markdown-preview[data-use-github-style="auto"] table tr:nth-child(2n) { + background-color: #161b22; + } + + .markdown-preview[data-use-github-style="auto"] table img { + background-color: transparent; + } + + .markdown-preview[data-use-github-style="auto"] img[align=right] { + padding-left: 20px; + } + + .markdown-preview[data-use-github-style="auto"] img[align=left] { + padding-right: 20px; + } + + .markdown-preview[data-use-github-style="auto"] .emoji { + max-width: none; + vertical-align: text-top; + background-color: transparent; + } + + .markdown-preview[data-use-github-style="auto"] span.frame { + display: block; + overflow: hidden; + } + + .markdown-preview[data-use-github-style="auto"] span.frame>span { + display: block; + float: left; + width: auto; + padding: 7px; + margin: 13px 0 0; + overflow: hidden; + border: 1px solid #30363d; + } + + .markdown-preview[data-use-github-style="auto"] span.frame span img { + display: block; + float: left; + } + + .markdown-preview[data-use-github-style="auto"] span.frame span span { + display: block; + padding: 5px 0 0; + clear: both; + color: #e6edf3; + } + + .markdown-preview[data-use-github-style="auto"] span.align-center { + display: block; + overflow: hidden; + clear: both; + } + + .markdown-preview[data-use-github-style="auto"] span.align-center>span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: center; + } + + .markdown-preview[data-use-github-style="auto"] span.align-center span img { + margin: 0 auto; + text-align: center; + } + + .markdown-preview[data-use-github-style="auto"] span.align-right { + display: block; + overflow: hidden; + clear: both; + } + + .markdown-preview[data-use-github-style="auto"] span.align-right>span { + display: block; + margin: 13px 0 0; + overflow: hidden; + text-align: right; + } + + .markdown-preview[data-use-github-style="auto"] span.align-right span img { + margin: 0; + text-align: right; + } + + .markdown-preview[data-use-github-style="auto"] span.float-left { + display: block; + float: left; + margin-right: 13px; + overflow: hidden; + } + + .markdown-preview[data-use-github-style="auto"] span.float-left span { + margin: 13px 0 0; + } + + .markdown-preview[data-use-github-style="auto"] span.float-right { + display: block; + float: right; + margin-left: 13px; + overflow: hidden; + } + + .markdown-preview[data-use-github-style="auto"] span.float-right>span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: right; + } + + .markdown-preview[data-use-github-style="auto"] code, + .markdown-preview[data-use-github-style="auto"] tt { + padding: .2em .4em; + margin: 0; + font-size: 85%; + white-space: break-spaces; + background-color: rgba(110,118,129,0.4); + border-radius: 6px; + } + + .markdown-preview[data-use-github-style="auto"] code br, + .markdown-preview[data-use-github-style="auto"] tt br { + display: none; + } + + .markdown-preview[data-use-github-style="auto"] del code { + text-decoration: inherit; + } + + .markdown-preview[data-use-github-style="auto"] samp { + font-size: 85%; + } + + .markdown-preview[data-use-github-style="auto"] pre code { + font-size: 100%; + } + + .markdown-preview[data-use-github-style="auto"] pre>code { + padding: 0; + margin: 0; + word-break: normal; + white-space: pre; + background: transparent; + border: 0; + } + + .markdown-preview[data-use-github-style="auto"] .highlight { + margin-bottom: 16px; + } + + .markdown-preview[data-use-github-style="auto"] .highlight pre { + margin-bottom: 0; + word-break: normal; + } + + .markdown-preview[data-use-github-style="auto"] .highlight pre, + .markdown-preview[data-use-github-style="auto"] pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + color: #e6edf3; + background-color: #161b22; + border-radius: 6px; + } + + .markdown-preview[data-use-github-style="auto"] pre code, + .markdown-preview[data-use-github-style="auto"] pre tt { + display: inline; + max-width: auto; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; + } + + .markdown-preview[data-use-github-style="auto"] .csv-data td, + .markdown-preview[data-use-github-style="auto"] .csv-data th { + padding: 5px; + overflow: hidden; + font-size: 12px; + line-height: 1; + text-align: left; + white-space: nowrap; + } + + .markdown-preview[data-use-github-style="auto"] .csv-data .blob-num { + padding: 10px 8px 9px; + text-align: right; + background: #0d1117; + border: 0; + } + + .markdown-preview[data-use-github-style="auto"] .csv-data tr { + border-top: 0; + } + + .markdown-preview[data-use-github-style="auto"] .csv-data th { + font-weight: 600; + background: #161b22; + border-top: 0; + } + + .markdown-preview[data-use-github-style="auto"] [data-footnote-ref]::before { + content: "["; + } + + .markdown-preview[data-use-github-style="auto"] [data-footnote-ref]::after { + content: "]"; + } + + .markdown-preview[data-use-github-style="auto"] .footnotes { + font-size: 12px; + color: #848d97; + border-top: 1px solid #30363d; + } + + .markdown-preview[data-use-github-style="auto"] .footnotes ol { + padding-left: 16px; + } + + .markdown-preview[data-use-github-style="auto"] .footnotes ol ul { + display: inline-block; + padding-left: 16px; + margin-top: 16px; + } + + .markdown-preview[data-use-github-style="auto"] .footnotes li { + position: relative; + } + + .markdown-preview[data-use-github-style="auto"] .footnotes li:target::before { + position: absolute; + top: -8px; + right: -8px; + bottom: -8px; + left: -24px; + pointer-events: none; + content: ""; + border: 2px solid #1f6feb; + border-radius: 6px; + } + + .markdown-preview[data-use-github-style="auto"] .footnotes li:target { + color: #e6edf3; + } + + .markdown-preview[data-use-github-style="auto"] .footnotes .data-footnote-backref g-emoji { + font-family: monospace; + } + + .markdown-preview[data-use-github-style="auto"] .pl-c { + color: #8b949e; + } + + .markdown-preview[data-use-github-style="auto"] .pl-c1, + .markdown-preview[data-use-github-style="auto"] .pl-s .pl-v { + color: #79c0ff; + } + + .markdown-preview[data-use-github-style="auto"] .pl-e, + .markdown-preview[data-use-github-style="auto"] .pl-en { + color: #d2a8ff; + } + + .markdown-preview[data-use-github-style="auto"] .pl-smi, + .markdown-preview[data-use-github-style="auto"] .pl-s .pl-s1 { + color: #c9d1d9; + } + + .markdown-preview[data-use-github-style="auto"] .pl-ent { + color: #7ee787; + } + + .markdown-preview[data-use-github-style="auto"] .pl-k { + color: #ff7b72; + } + + .markdown-preview[data-use-github-style="auto"] .pl-s, + .markdown-preview[data-use-github-style="auto"] .pl-pds, + .markdown-preview[data-use-github-style="auto"] .pl-s .pl-pse .pl-s1, + .markdown-preview[data-use-github-style="auto"] .pl-sr, + .markdown-preview[data-use-github-style="auto"] .pl-sr .pl-cce, + .markdown-preview[data-use-github-style="auto"] .pl-sr .pl-sre, + .markdown-preview[data-use-github-style="auto"] .pl-sr .pl-sra { + color: #a5d6ff; + } + + .markdown-preview[data-use-github-style="auto"] .pl-v, + .markdown-preview[data-use-github-style="auto"] .pl-smw { + color: #ffa657; + } + + .markdown-preview[data-use-github-style="auto"] .pl-bu { + color: #f85149; + } + + .markdown-preview[data-use-github-style="auto"] .pl-ii { + color: #f0f6fc; + background-color: #8e1519; + } + + .markdown-preview[data-use-github-style="auto"] .pl-c2 { + color: #f0f6fc; + background-color: #b62324; + } + + .markdown-preview[data-use-github-style="auto"] .pl-sr .pl-cce { + font-weight: bold; + color: #7ee787; + } + + .markdown-preview[data-use-github-style="auto"] .pl-ml { + color: #f2cc60; + } + + .markdown-preview[data-use-github-style="auto"] .pl-mh, + .markdown-preview[data-use-github-style="auto"] .pl-mh .pl-en, + .markdown-preview[data-use-github-style="auto"] .pl-ms { + font-weight: bold; + color: #1f6feb; + } + + .markdown-preview[data-use-github-style="auto"] .pl-mi { + font-style: italic; + color: #c9d1d9; + } + + .markdown-preview[data-use-github-style="auto"] .pl-mb { + font-weight: bold; + color: #c9d1d9; + } + + .markdown-preview[data-use-github-style="auto"] .pl-md { + color: #ffdcd7; + background-color: #67060c; + } + + .markdown-preview[data-use-github-style="auto"] .pl-mi1 { + color: #aff5b4; + background-color: #033a16; + } + + .markdown-preview[data-use-github-style="auto"] .pl-mc { + color: #ffdfb6; + background-color: #5a1e02; + } + + .markdown-preview[data-use-github-style="auto"] .pl-mi2 { + color: #c9d1d9; + background-color: #1158c7; + } + + .markdown-preview[data-use-github-style="auto"] .pl-mdr { + font-weight: bold; + color: #d2a8ff; + } + + .markdown-preview[data-use-github-style="auto"] .pl-ba { + color: #8b949e; + } + + .markdown-preview[data-use-github-style="auto"] .pl-sg { + color: #484f58; + } + + .markdown-preview[data-use-github-style="auto"] .pl-corl { + text-decoration: underline; + color: #a5d6ff; + } + + .markdown-preview[data-use-github-style="auto"] 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-preview[data-use-github-style="auto"] g-emoji img { + width: 1em; + height: 1em; + } + + .markdown-preview[data-use-github-style="auto"] .task-list-item { + list-style-type: none; + } + + .markdown-preview[data-use-github-style="auto"] .task-list-item label { + font-weight: 400; + } + + .markdown-preview[data-use-github-style="auto"] .task-list-item.enabled label { + cursor: pointer; + } + + .markdown-preview[data-use-github-style="auto"] .task-list-item+.task-list-item { + margin-top: 4px; + } + + .markdown-preview[data-use-github-style="auto"] .task-list-item .handle { + display: none; + } + + .markdown-preview[data-use-github-style="auto"] .task-list-item-checkbox { + margin: 0 .2em .25em -1.4em; + vertical-align: middle; + } + + .markdown-preview[data-use-github-style="auto"] .contains-task-list:dir(rtl) .task-list-item-checkbox { + margin: 0 -1.6em .25em .2em; + } + + .markdown-preview[data-use-github-style="auto"] .contains-task-list { + position: relative; + } + + .markdown-preview[data-use-github-style="auto"] .contains-task-list:hover .task-list-item-convert-container, + .markdown-preview[data-use-github-style="auto"] .contains-task-list:focus-within .task-list-item-convert-container { + display: block; + width: auto; + height: 24px; + overflow: visible; + clip: auto; + } + + .markdown-preview[data-use-github-style="auto"] ::-webkit-calendar-picker-indicator { + filter: invert(50%); + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert { + padding: 8px 16px; + margin-bottom: 16px; + color: inherit; + border-left: .25em solid #30363d; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert>:first-child { + margin-top: 0; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert>:last-child { + margin-bottom: 0; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert .markdown-alert-title { + display: flex; + font-weight: 500; + align-items: center; + line-height: 1; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-note { + border-left-color: #1f6feb; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-note .markdown-alert-title { + color: #2f81f7; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-important { + border-left-color: #8957e5; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-important .markdown-alert-title { + color: #a371f7; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-warning { + border-left-color: #9e6a03; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-warning .markdown-alert-title { + color: #d29922; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-tip { + border-left-color: #238636; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-tip .markdown-alert-title { + color: #3fb950; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-caution { + border-left-color: #da3633; + } + + .markdown-preview[data-use-github-style="auto"] .markdown-alert.markdown-alert-caution .markdown-alert-title { + color: #f85149; + } + +} diff --git a/packages/markdown-preview/assets/github-markdown-dark.css b/packages/markdown-preview/assets/github-markdown-dark.css new file mode 100644 index 000000000..c39f078b7 --- /dev/null +++ b/packages/markdown-preview/assets/github-markdown-dark.css @@ -0,0 +1,1084 @@ +/*dark*/ + +.markdown-preview[data-use-github-style="dark"] { + color-scheme: dark; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + color: #e6edf3; + background-color: #0d1117; + 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; +} + +.markdown-preview[data-use-github-style="dark"] .octicon { + display: inline-block; + fill: currentColor; + vertical-align: text-bottom; +} + +.markdown-preview[data-use-github-style="dark"] h1:hover .anchor .octicon-link:before, +.markdown-preview[data-use-github-style="dark"] h2:hover .anchor .octicon-link:before, +.markdown-preview[data-use-github-style="dark"] h3:hover .anchor .octicon-link:before, +.markdown-preview[data-use-github-style="dark"] h4:hover .anchor .octicon-link:before, +.markdown-preview[data-use-github-style="dark"] h5:hover .anchor .octicon-link:before, +.markdown-preview[data-use-github-style="dark"] h6:hover .anchor .octicon-link:before { + width: 16px; + height: 16px; + content: ' '; + display: inline-block; + background-color: currentColor; + -webkit-mask-image: url("data:image/svg+xml,"); + mask-image: url("data:image/svg+xml,"); +} + +.markdown-preview[data-use-github-style="dark"] details, +.markdown-preview[data-use-github-style="dark"] figcaption, +.markdown-preview[data-use-github-style="dark"] figure { + display: block; +} + +.markdown-preview[data-use-github-style="dark"] summary { + display: list-item; +} + +.markdown-preview[data-use-github-style="dark"] [hidden] { + display: none !important; +} + +.markdown-preview[data-use-github-style="dark"] a { + background-color: transparent; + color: #2f81f7; + text-decoration: none; +} + +.markdown-preview[data-use-github-style="dark"] abbr[title] { + border-bottom: none; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +.markdown-preview[data-use-github-style="dark"] b, +.markdown-preview[data-use-github-style="dark"] strong { + font-weight: 600; +} + +.markdown-preview[data-use-github-style="dark"] dfn { + font-style: italic; +} + +.markdown-preview[data-use-github-style="dark"] h1 { + margin: .67em 0; + font-weight: 600; + padding-bottom: .3em; + font-size: 2em; + border-bottom: 1px solid #21262d; +} + +.markdown-preview[data-use-github-style="dark"] mark { + background-color: rgba(187,128,9,0.15); + color: #e6edf3; +} + +.markdown-preview[data-use-github-style="dark"] small { + font-size: 90%; +} + +.markdown-preview[data-use-github-style="dark"] sub, +.markdown-preview[data-use-github-style="dark"] sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +.markdown-preview[data-use-github-style="dark"] sub { + bottom: -0.25em; +} + +.markdown-preview[data-use-github-style="dark"] sup { + top: -0.5em; +} + +.markdown-preview[data-use-github-style="dark"] img { + border-style: none; + max-width: 100%; + box-sizing: content-box; + background-color: #0d1117; +} + +.markdown-preview[data-use-github-style="dark"] code, +.markdown-preview[data-use-github-style="dark"] kbd, +.markdown-preview[data-use-github-style="dark"] pre, +.markdown-preview[data-use-github-style="dark"] samp { + font-family: monospace; + font-size: 1em; +} + +.markdown-preview[data-use-github-style="dark"] figure { + margin: 1em 40px; +} + +.markdown-preview[data-use-github-style="dark"] hr { + box-sizing: content-box; + overflow: hidden; + background: transparent; + border-bottom: 1px solid #21262d; + height: .25em; + padding: 0; + margin: 24px 0; + background-color: #30363d; + border: 0; +} + +.markdown-preview[data-use-github-style="dark"] input { + font: inherit; + margin: 0; + overflow: visible; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +.markdown-preview[data-use-github-style="dark"] [type=button], +.markdown-preview[data-use-github-style="dark"] [type=reset], +.markdown-preview[data-use-github-style="dark"] [type=submit] { + -webkit-appearance: button; + appearance: button; +} + +.markdown-preview[data-use-github-style="dark"] [type=checkbox], +.markdown-preview[data-use-github-style="dark"] [type=radio] { + box-sizing: border-box; + padding: 0; +} + +.markdown-preview[data-use-github-style="dark"] [type=number]::-webkit-inner-spin-button, +.markdown-preview[data-use-github-style="dark"] [type=number]::-webkit-outer-spin-button { + height: auto; +} + +.markdown-preview[data-use-github-style="dark"] [type=search]::-webkit-search-cancel-button, +.markdown-preview[data-use-github-style="dark"] [type=search]::-webkit-search-decoration { + -webkit-appearance: none; + appearance: none; +} + +.markdown-preview[data-use-github-style="dark"] ::-webkit-input-placeholder { + color: inherit; + opacity: .54; +} + +.markdown-preview[data-use-github-style="dark"] ::-webkit-file-upload-button { + -webkit-appearance: button; + appearance: button; + font: inherit; +} + +.markdown-preview[data-use-github-style="dark"] a:hover { + text-decoration: underline; +} + +.markdown-preview[data-use-github-style="dark"] ::placeholder { + color: #6e7681; + opacity: 1; +} + +.markdown-preview[data-use-github-style="dark"] hr::before { + display: table; + content: ""; +} + +.markdown-preview[data-use-github-style="dark"] hr::after { + display: table; + clear: both; + content: ""; +} + +.markdown-preview[data-use-github-style="dark"] table { + border-spacing: 0; + border-collapse: collapse; + display: block; + width: max-content; + max-width: 100%; + overflow: auto; +} + +.markdown-preview[data-use-github-style="dark"] td, +.markdown-preview[data-use-github-style="dark"] th { + padding: 0; +} + +.markdown-preview[data-use-github-style="dark"] details summary { + cursor: pointer; +} + +.markdown-preview[data-use-github-style="dark"] details:not([open])>*:not(summary) { + display: none !important; +} + +.markdown-preview[data-use-github-style="dark"] a:focus, +.markdown-preview[data-use-github-style="dark"] [role=button]:focus, +.markdown-preview[data-use-github-style="dark"] input[type=radio]:focus, +.markdown-preview[data-use-github-style="dark"] input[type=checkbox]:focus { + outline: 2px solid #2f81f7; + outline-offset: -2px; + box-shadow: none; +} + +.markdown-preview[data-use-github-style="dark"] a:focus:not(:focus-visible), +.markdown-preview[data-use-github-style="dark"] [role=button]:focus:not(:focus-visible), +.markdown-preview[data-use-github-style="dark"] input[type=radio]:focus:not(:focus-visible), +.markdown-preview[data-use-github-style="dark"] input[type=checkbox]:focus:not(:focus-visible) { + outline: solid 1px transparent; +} + +.markdown-preview[data-use-github-style="dark"] a:focus-visible, +.markdown-preview[data-use-github-style="dark"] [role=button]:focus-visible, +.markdown-preview[data-use-github-style="dark"] input[type=radio]:focus-visible, +.markdown-preview[data-use-github-style="dark"] input[type=checkbox]:focus-visible { + outline: 2px solid #2f81f7; + outline-offset: -2px; + box-shadow: none; +} + +.markdown-preview[data-use-github-style="dark"] a:not([class]):focus, +.markdown-preview[data-use-github-style="dark"] a:not([class]):focus-visible, +.markdown-preview[data-use-github-style="dark"] input[type=radio]:focus, +.markdown-preview[data-use-github-style="dark"] input[type=radio]:focus-visible, +.markdown-preview[data-use-github-style="dark"] input[type=checkbox]:focus, +.markdown-preview[data-use-github-style="dark"] input[type=checkbox]:focus-visible { + outline-offset: 0; +} + +.markdown-preview[data-use-github-style="dark"] kbd { + display: inline-block; + padding: 3px 5px; + font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + line-height: 10px; + color: #e6edf3; + vertical-align: middle; + background-color: #161b22; + border: solid 1px rgba(110,118,129,0.4); + border-bottom-color: rgba(110,118,129,0.4); + border-radius: 6px; + box-shadow: inset 0 -1px 0 rgba(110,118,129,0.4); +} + +.markdown-preview[data-use-github-style="dark"] h1, +.markdown-preview[data-use-github-style="dark"] h2, +.markdown-preview[data-use-github-style="dark"] h3, +.markdown-preview[data-use-github-style="dark"] h4, +.markdown-preview[data-use-github-style="dark"] h5, +.markdown-preview[data-use-github-style="dark"] h6 { + margin-top: 24px; + margin-bottom: 16px; + font-weight: 600; + line-height: 1.25; +} + +.markdown-preview[data-use-github-style="dark"] h2 { + font-weight: 600; + padding-bottom: .3em; + font-size: 1.5em; + border-bottom: 1px solid #21262d; +} + +.markdown-preview[data-use-github-style="dark"] h3 { + font-weight: 600; + font-size: 1.25em; +} + +.markdown-preview[data-use-github-style="dark"] h4 { + font-weight: 600; + font-size: 1em; +} + +.markdown-preview[data-use-github-style="dark"] h5 { + font-weight: 600; + font-size: .875em; +} + +.markdown-preview[data-use-github-style="dark"] h6 { + font-weight: 600; + font-size: .85em; + color: #848d97; +} + +.markdown-preview[data-use-github-style="dark"] p { + margin-top: 0; + margin-bottom: 10px; +} + +.markdown-preview[data-use-github-style="dark"] blockquote { + margin: 0; + padding: 0 1em; + color: #848d97; + border-left: .25em solid #30363d; +} + +.markdown-preview[data-use-github-style="dark"] ul, +.markdown-preview[data-use-github-style="dark"] ol { + margin-top: 0; + margin-bottom: 0; + padding-left: 2em; +} + +.markdown-preview[data-use-github-style="dark"] ol ol, +.markdown-preview[data-use-github-style="dark"] ul ol { + list-style-type: lower-roman; +} + +.markdown-preview[data-use-github-style="dark"] ul ul ol, +.markdown-preview[data-use-github-style="dark"] ul ol ol, +.markdown-preview[data-use-github-style="dark"] ol ul ol, +.markdown-preview[data-use-github-style="dark"] ol ol ol { + list-style-type: lower-alpha; +} + +.markdown-preview[data-use-github-style="dark"] dd { + margin-left: 0; +} + +.markdown-preview[data-use-github-style="dark"] tt, +.markdown-preview[data-use-github-style="dark"] code, +.markdown-preview[data-use-github-style="dark"] samp { + font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + font-size: 12px; +} + +.markdown-preview[data-use-github-style="dark"] 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; +} + +.markdown-preview[data-use-github-style="dark"] .octicon { + display: inline-block; + overflow: visible !important; + vertical-align: text-bottom; + fill: currentColor; +} + +.markdown-preview[data-use-github-style="dark"] input::-webkit-outer-spin-button, +.markdown-preview[data-use-github-style="dark"] input::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; + appearance: none; +} + +.markdown-preview[data-use-github-style="dark"] .mr-2 { + margin-right: 8px !important; +} + +.markdown-preview[data-use-github-style="dark"]::before { + display: table; + content: ""; +} + +.markdown-preview[data-use-github-style="dark"]::after { + display: table; + clear: both; + content: ""; +} + +.markdown-preview[data-use-github-style="dark"]>*:first-child { + margin-top: 0 !important; +} + +.markdown-preview[data-use-github-style="dark"]>*:last-child { + margin-bottom: 0 !important; +} + +.markdown-preview[data-use-github-style="dark"] a:not([href]) { + color: inherit; + text-decoration: none; +} + +.markdown-preview[data-use-github-style="dark"] .absent { + color: #f85149; +} + +.markdown-preview[data-use-github-style="dark"] .anchor { + float: left; + padding-right: 4px; + margin-left: -20px; + line-height: 1; +} + +.markdown-preview[data-use-github-style="dark"] .anchor:focus { + outline: none; +} + +.markdown-preview[data-use-github-style="dark"] p, +.markdown-preview[data-use-github-style="dark"] blockquote, +.markdown-preview[data-use-github-style="dark"] ul, +.markdown-preview[data-use-github-style="dark"] ol, +.markdown-preview[data-use-github-style="dark"] dl, +.markdown-preview[data-use-github-style="dark"] table, +.markdown-preview[data-use-github-style="dark"] pre, +.markdown-preview[data-use-github-style="dark"] details { + margin-top: 0; + margin-bottom: 16px; +} + +.markdown-preview[data-use-github-style="dark"] blockquote>:first-child { + margin-top: 0; +} + +.markdown-preview[data-use-github-style="dark"] blockquote>:last-child { + margin-bottom: 0; +} + +.markdown-preview[data-use-github-style="dark"] h1 .octicon-link, +.markdown-preview[data-use-github-style="dark"] h2 .octicon-link, +.markdown-preview[data-use-github-style="dark"] h3 .octicon-link, +.markdown-preview[data-use-github-style="dark"] h4 .octicon-link, +.markdown-preview[data-use-github-style="dark"] h5 .octicon-link, +.markdown-preview[data-use-github-style="dark"] h6 .octicon-link { + color: #e6edf3; + vertical-align: middle; + visibility: hidden; +} + +.markdown-preview[data-use-github-style="dark"] h1:hover .anchor, +.markdown-preview[data-use-github-style="dark"] h2:hover .anchor, +.markdown-preview[data-use-github-style="dark"] h3:hover .anchor, +.markdown-preview[data-use-github-style="dark"] h4:hover .anchor, +.markdown-preview[data-use-github-style="dark"] h5:hover .anchor, +.markdown-preview[data-use-github-style="dark"] h6:hover .anchor { + text-decoration: none; +} + +.markdown-preview[data-use-github-style="dark"] h1:hover .anchor .octicon-link, +.markdown-preview[data-use-github-style="dark"] h2:hover .anchor .octicon-link, +.markdown-preview[data-use-github-style="dark"] h3:hover .anchor .octicon-link, +.markdown-preview[data-use-github-style="dark"] h4:hover .anchor .octicon-link, +.markdown-preview[data-use-github-style="dark"] h5:hover .anchor .octicon-link, +.markdown-preview[data-use-github-style="dark"] h6:hover .anchor .octicon-link { + visibility: visible; +} + +.markdown-preview[data-use-github-style="dark"] h1 tt, +.markdown-preview[data-use-github-style="dark"] h1 code, +.markdown-preview[data-use-github-style="dark"] h2 tt, +.markdown-preview[data-use-github-style="dark"] h2 code, +.markdown-preview[data-use-github-style="dark"] h3 tt, +.markdown-preview[data-use-github-style="dark"] h3 code, +.markdown-preview[data-use-github-style="dark"] h4 tt, +.markdown-preview[data-use-github-style="dark"] h4 code, +.markdown-preview[data-use-github-style="dark"] h5 tt, +.markdown-preview[data-use-github-style="dark"] h5 code, +.markdown-preview[data-use-github-style="dark"] h6 tt, +.markdown-preview[data-use-github-style="dark"] h6 code { + padding: 0 .2em; + font-size: inherit; +} + +.markdown-preview[data-use-github-style="dark"] summary h1, +.markdown-preview[data-use-github-style="dark"] summary h2, +.markdown-preview[data-use-github-style="dark"] summary h3, +.markdown-preview[data-use-github-style="dark"] summary h4, +.markdown-preview[data-use-github-style="dark"] summary h5, +.markdown-preview[data-use-github-style="dark"] summary h6 { + display: inline-block; +} + +.markdown-preview[data-use-github-style="dark"] summary h1 .anchor, +.markdown-preview[data-use-github-style="dark"] summary h2 .anchor, +.markdown-preview[data-use-github-style="dark"] summary h3 .anchor, +.markdown-preview[data-use-github-style="dark"] summary h4 .anchor, +.markdown-preview[data-use-github-style="dark"] summary h5 .anchor, +.markdown-preview[data-use-github-style="dark"] summary h6 .anchor { + margin-left: -40px; +} + +.markdown-preview[data-use-github-style="dark"] summary h1, +.markdown-preview[data-use-github-style="dark"] summary h2 { + padding-bottom: 0; + border-bottom: 0; +} + +.markdown-preview[data-use-github-style="dark"] ul.no-list, +.markdown-preview[data-use-github-style="dark"] ol.no-list { + padding: 0; + list-style-type: none; +} + +.markdown-preview[data-use-github-style="dark"] ol[type="a s"] { + list-style-type: lower-alpha; +} + +.markdown-preview[data-use-github-style="dark"] ol[type="A s"] { + list-style-type: upper-alpha; +} + +.markdown-preview[data-use-github-style="dark"] ol[type="i s"] { + list-style-type: lower-roman; +} + +.markdown-preview[data-use-github-style="dark"] ol[type="I s"] { + list-style-type: upper-roman; +} + +.markdown-preview[data-use-github-style="dark"] ol[type="1"] { + list-style-type: decimal; +} + +.markdown-preview[data-use-github-style="dark"] div>ol:not([type]) { + list-style-type: decimal; +} + +.markdown-preview[data-use-github-style="dark"] ul ul, +.markdown-preview[data-use-github-style="dark"] ul ol, +.markdown-preview[data-use-github-style="dark"] ol ol, +.markdown-preview[data-use-github-style="dark"] ol ul { + margin-top: 0; + margin-bottom: 0; +} + +.markdown-preview[data-use-github-style="dark"] li>p { + margin-top: 16px; +} + +.markdown-preview[data-use-github-style="dark"] li+li { + margin-top: .25em; +} + +.markdown-preview[data-use-github-style="dark"] dl { + padding: 0; +} + +.markdown-preview[data-use-github-style="dark"] dl dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: 600; +} + +.markdown-preview[data-use-github-style="dark"] dl dd { + padding: 0 16px; + margin-bottom: 16px; +} + +.markdown-preview[data-use-github-style="dark"] table th { + font-weight: 600; +} + +.markdown-preview[data-use-github-style="dark"] table th, +.markdown-preview[data-use-github-style="dark"] table td { + padding: 6px 13px; + border: 1px solid #30363d; +} + +.markdown-preview[data-use-github-style="dark"] table td>:last-child { + margin-bottom: 0; +} + +.markdown-preview[data-use-github-style="dark"] table tr { + background-color: #0d1117; + border-top: 1px solid #21262d; +} + +.markdown-preview[data-use-github-style="dark"] table tr:nth-child(2n) { + background-color: #161b22; +} + +.markdown-preview[data-use-github-style="dark"] table img { + background-color: transparent; +} + +.markdown-preview[data-use-github-style="dark"] img[align=right] { + padding-left: 20px; +} + +.markdown-preview[data-use-github-style="dark"] img[align=left] { + padding-right: 20px; +} + +.markdown-preview[data-use-github-style="dark"] .emoji { + max-width: none; + vertical-align: text-top; + background-color: transparent; +} + +.markdown-preview[data-use-github-style="dark"] span.frame { + display: block; + overflow: hidden; +} + +.markdown-preview[data-use-github-style="dark"] span.frame>span { + display: block; + float: left; + width: auto; + padding: 7px; + margin: 13px 0 0; + overflow: hidden; + border: 1px solid #30363d; +} + +.markdown-preview[data-use-github-style="dark"] span.frame span img { + display: block; + float: left; +} + +.markdown-preview[data-use-github-style="dark"] span.frame span span { + display: block; + padding: 5px 0 0; + clear: both; + color: #e6edf3; +} + +.markdown-preview[data-use-github-style="dark"] span.align-center { + display: block; + overflow: hidden; + clear: both; +} + +.markdown-preview[data-use-github-style="dark"] span.align-center>span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: center; +} + +.markdown-preview[data-use-github-style="dark"] span.align-center span img { + margin: 0 auto; + text-align: center; +} + +.markdown-preview[data-use-github-style="dark"] span.align-right { + display: block; + overflow: hidden; + clear: both; +} + +.markdown-preview[data-use-github-style="dark"] span.align-right>span { + display: block; + margin: 13px 0 0; + overflow: hidden; + text-align: right; +} + +.markdown-preview[data-use-github-style="dark"] span.align-right span img { + margin: 0; + text-align: right; +} + +.markdown-preview[data-use-github-style="dark"] span.float-left { + display: block; + float: left; + margin-right: 13px; + overflow: hidden; +} + +.markdown-preview[data-use-github-style="dark"] span.float-left span { + margin: 13px 0 0; +} + +.markdown-preview[data-use-github-style="dark"] span.float-right { + display: block; + float: right; + margin-left: 13px; + overflow: hidden; +} + +.markdown-preview[data-use-github-style="dark"] span.float-right>span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: right; +} + +.markdown-preview[data-use-github-style="dark"] code, +.markdown-preview[data-use-github-style="dark"] tt { + padding: .2em .4em; + margin: 0; + font-size: 85%; + white-space: break-spaces; + background-color: rgba(110,118,129,0.4); + border-radius: 6px; +} + +.markdown-preview[data-use-github-style="dark"] code br, +.markdown-preview[data-use-github-style="dark"] tt br { + display: none; +} + +.markdown-preview[data-use-github-style="dark"] del code { + text-decoration: inherit; +} + +.markdown-preview[data-use-github-style="dark"] samp { + font-size: 85%; +} + +.markdown-preview[data-use-github-style="dark"] pre code { + font-size: 100%; +} + +.markdown-preview[data-use-github-style="dark"] pre>code { + padding: 0; + margin: 0; + word-break: normal; + white-space: pre; + background: transparent; + border: 0; +} + +.markdown-preview[data-use-github-style="dark"] .highlight { + margin-bottom: 16px; +} + +.markdown-preview[data-use-github-style="dark"] .highlight pre { + margin-bottom: 0; + word-break: normal; +} + +.markdown-preview[data-use-github-style="dark"] .highlight pre, +.markdown-preview[data-use-github-style="dark"] pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + color: #e6edf3; + background-color: #161b22; + border-radius: 6px; +} + +.markdown-preview[data-use-github-style="dark"] pre code, +.markdown-preview[data-use-github-style="dark"] pre tt { + display: inline; + max-width: auto; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; +} + +.markdown-preview[data-use-github-style="dark"] .csv-data td, +.markdown-preview[data-use-github-style="dark"] .csv-data th { + padding: 5px; + overflow: hidden; + font-size: 12px; + line-height: 1; + text-align: left; + white-space: nowrap; +} + +.markdown-preview[data-use-github-style="dark"] .csv-data .blob-num { + padding: 10px 8px 9px; + text-align: right; + background: #0d1117; + border: 0; +} + +.markdown-preview[data-use-github-style="dark"] .csv-data tr { + border-top: 0; +} + +.markdown-preview[data-use-github-style="dark"] .csv-data th { + font-weight: 600; + background: #161b22; + border-top: 0; +} + +.markdown-preview[data-use-github-style="dark"] [data-footnote-ref]::before { + content: "["; +} + +.markdown-preview[data-use-github-style="dark"] [data-footnote-ref]::after { + content: "]"; +} + +.markdown-preview[data-use-github-style="dark"] .footnotes { + font-size: 12px; + color: #848d97; + border-top: 1px solid #30363d; +} + +.markdown-preview[data-use-github-style="dark"] .footnotes ol { + padding-left: 16px; +} + +.markdown-preview[data-use-github-style="dark"] .footnotes ol ul { + display: inline-block; + padding-left: 16px; + margin-top: 16px; +} + +.markdown-preview[data-use-github-style="dark"] .footnotes li { + position: relative; +} + +.markdown-preview[data-use-github-style="dark"] .footnotes li:target::before { + position: absolute; + top: -8px; + right: -8px; + bottom: -8px; + left: -24px; + pointer-events: none; + content: ""; + border: 2px solid #1f6feb; + border-radius: 6px; +} + +.markdown-preview[data-use-github-style="dark"] .footnotes li:target { + color: #e6edf3; +} + +.markdown-preview[data-use-github-style="dark"] .footnotes .data-footnote-backref g-emoji { + font-family: monospace; +} + +.markdown-preview[data-use-github-style="dark"] .pl-c { + color: #8b949e; +} + +.markdown-preview[data-use-github-style="dark"] .pl-c1, +.markdown-preview[data-use-github-style="dark"] .pl-s .pl-v { + color: #79c0ff; +} + +.markdown-preview[data-use-github-style="dark"] .pl-e, +.markdown-preview[data-use-github-style="dark"] .pl-en { + color: #d2a8ff; +} + +.markdown-preview[data-use-github-style="dark"] .pl-smi, +.markdown-preview[data-use-github-style="dark"] .pl-s .pl-s1 { + color: #c9d1d9; +} + +.markdown-preview[data-use-github-style="dark"] .pl-ent { + color: #7ee787; +} + +.markdown-preview[data-use-github-style="dark"] .pl-k { + color: #ff7b72; +} + +.markdown-preview[data-use-github-style="dark"] .pl-s, +.markdown-preview[data-use-github-style="dark"] .pl-pds, +.markdown-preview[data-use-github-style="dark"] .pl-s .pl-pse .pl-s1, +.markdown-preview[data-use-github-style="dark"] .pl-sr, +.markdown-preview[data-use-github-style="dark"] .pl-sr .pl-cce, +.markdown-preview[data-use-github-style="dark"] .pl-sr .pl-sre, +.markdown-preview[data-use-github-style="dark"] .pl-sr .pl-sra { + color: #a5d6ff; +} + +.markdown-preview[data-use-github-style="dark"] .pl-v, +.markdown-preview[data-use-github-style="dark"] .pl-smw { + color: #ffa657; +} + +.markdown-preview[data-use-github-style="dark"] .pl-bu { + color: #f85149; +} + +.markdown-preview[data-use-github-style="dark"] .pl-ii { + color: #f0f6fc; + background-color: #8e1519; +} + +.markdown-preview[data-use-github-style="dark"] .pl-c2 { + color: #f0f6fc; + background-color: #b62324; +} + +.markdown-preview[data-use-github-style="dark"] .pl-sr .pl-cce { + font-weight: bold; + color: #7ee787; +} + +.markdown-preview[data-use-github-style="dark"] .pl-ml { + color: #f2cc60; +} + +.markdown-preview[data-use-github-style="dark"] .pl-mh, +.markdown-preview[data-use-github-style="dark"] .pl-mh .pl-en, +.markdown-preview[data-use-github-style="dark"] .pl-ms { + font-weight: bold; + color: #1f6feb; +} + +.markdown-preview[data-use-github-style="dark"] .pl-mi { + font-style: italic; + color: #c9d1d9; +} + +.markdown-preview[data-use-github-style="dark"] .pl-mb { + font-weight: bold; + color: #c9d1d9; +} + +.markdown-preview[data-use-github-style="dark"] .pl-md { + color: #ffdcd7; + background-color: #67060c; +} + +.markdown-preview[data-use-github-style="dark"] .pl-mi1 { + color: #aff5b4; + background-color: #033a16; +} + +.markdown-preview[data-use-github-style="dark"] .pl-mc { + color: #ffdfb6; + background-color: #5a1e02; +} + +.markdown-preview[data-use-github-style="dark"] .pl-mi2 { + color: #c9d1d9; + background-color: #1158c7; +} + +.markdown-preview[data-use-github-style="dark"] .pl-mdr { + font-weight: bold; + color: #d2a8ff; +} + +.markdown-preview[data-use-github-style="dark"] .pl-ba { + color: #8b949e; +} + +.markdown-preview[data-use-github-style="dark"] .pl-sg { + color: #484f58; +} + +.markdown-preview[data-use-github-style="dark"] .pl-corl { + text-decoration: underline; + color: #a5d6ff; +} + +.markdown-preview[data-use-github-style="dark"] 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-preview[data-use-github-style="dark"] g-emoji img { + width: 1em; + height: 1em; +} + +.markdown-preview[data-use-github-style="dark"] .task-list-item { + list-style-type: none; +} + +.markdown-preview[data-use-github-style="dark"] .task-list-item label { + font-weight: 400; +} + +.markdown-preview[data-use-github-style="dark"] .task-list-item.enabled label { + cursor: pointer; +} + +.markdown-preview[data-use-github-style="dark"] .task-list-item+.task-list-item { + margin-top: 4px; +} + +.markdown-preview[data-use-github-style="dark"] .task-list-item .handle { + display: none; +} + +.markdown-preview[data-use-github-style="dark"] .task-list-item-checkbox { + margin: 0 .2em .25em -1.4em; + vertical-align: middle; +} + +.markdown-preview[data-use-github-style="dark"] .contains-task-list:dir(rtl) .task-list-item-checkbox { + margin: 0 -1.6em .25em .2em; +} + +.markdown-preview[data-use-github-style="dark"] .contains-task-list { + position: relative; +} + +.markdown-preview[data-use-github-style="dark"] .contains-task-list:hover .task-list-item-convert-container, +.markdown-preview[data-use-github-style="dark"] .contains-task-list:focus-within .task-list-item-convert-container { + display: block; + width: auto; + height: 24px; + overflow: visible; + clip: auto; +} + +.markdown-preview[data-use-github-style="dark"] ::-webkit-calendar-picker-indicator { + filter: invert(50%); +} + +.markdown-preview[data-use-github-style="dark"] .markdown-alert { + padding: 8px 16px; + margin-bottom: 16px; + color: inherit; + border-left: .25em solid #30363d; +} + +.markdown-preview[data-use-github-style="dark"] .markdown-alert>:first-child { + margin-top: 0; +} + +.markdown-preview[data-use-github-style="dark"] .markdown-alert>:last-child { + margin-bottom: 0; +} + +.markdown-preview[data-use-github-style="dark"] .markdown-alert .markdown-alert-title { + display: flex; + font-weight: 500; + align-items: center; + line-height: 1; +} + +.markdown-preview[data-use-github-style="dark"] .markdown-alert.markdown-alert-note { + border-left-color: #1f6feb; +} + +.markdown-preview[data-use-github-style="dark"] .markdown-alert.markdown-alert-note .markdown-alert-title { + color: #2f81f7; +} + +.markdown-preview[data-use-github-style="dark"] .markdown-alert.markdown-alert-important { + border-left-color: #8957e5; +} + +.markdown-preview[data-use-github-style="dark"] .markdown-alert.markdown-alert-important .markdown-alert-title { + color: #a371f7; +} + +.markdown-preview[data-use-github-style="dark"] .markdown-alert.markdown-alert-warning { + border-left-color: #9e6a03; +} + +.markdown-preview[data-use-github-style="dark"] .markdown-alert.markdown-alert-warning .markdown-alert-title { + color: #d29922; +} + +.markdown-preview[data-use-github-style="dark"] .markdown-alert.markdown-alert-tip { + border-left-color: #238636; +} + +.markdown-preview[data-use-github-style="dark"] .markdown-alert.markdown-alert-tip .markdown-alert-title { + color: #3fb950; +} + +.markdown-preview[data-use-github-style="dark"] .markdown-alert.markdown-alert-caution { + border-left-color: #da3633; +} + +.markdown-preview[data-use-github-style="dark"] .markdown-alert.markdown-alert-caution .markdown-alert-title { + color: #f85149; +} diff --git a/packages/markdown-preview/assets/github-markdown-light.css b/packages/markdown-preview/assets/github-markdown-light.css new file mode 100644 index 000000000..9fa702a7f --- /dev/null +++ b/packages/markdown-preview/assets/github-markdown-light.css @@ -0,0 +1,1083 @@ +/*light*/ + +.markdown-preview[data-use-github-style="light"] { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + color: #1F2328; + background-color: #ffffff; + 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; +} + +.markdown-preview[data-use-github-style="light"] .octicon { + display: inline-block; + fill: currentColor; + vertical-align: text-bottom; +} + +.markdown-preview[data-use-github-style="light"] h1:hover .anchor .octicon-link:before, +.markdown-preview[data-use-github-style="light"] h2:hover .anchor .octicon-link:before, +.markdown-preview[data-use-github-style="light"] h3:hover .anchor .octicon-link:before, +.markdown-preview[data-use-github-style="light"] h4:hover .anchor .octicon-link:before, +.markdown-preview[data-use-github-style="light"] h5:hover .anchor .octicon-link:before, +.markdown-preview[data-use-github-style="light"] h6:hover .anchor .octicon-link:before { + width: 16px; + height: 16px; + content: ' '; + display: inline-block; + background-color: currentColor; + -webkit-mask-image: url("data:image/svg+xml,"); + mask-image: url("data:image/svg+xml,"); +} + +.markdown-preview[data-use-github-style="light"] details, +.markdown-preview[data-use-github-style="light"] figcaption, +.markdown-preview[data-use-github-style="light"] figure { + display: block; +} + +.markdown-preview[data-use-github-style="light"] summary { + display: list-item; +} + +.markdown-preview[data-use-github-style="light"] [hidden] { + display: none !important; +} + +.markdown-preview[data-use-github-style="light"] a { + background-color: transparent; + color: #0969da; + text-decoration: none; +} + +.markdown-preview[data-use-github-style="light"] abbr[title] { + border-bottom: none; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +.markdown-preview[data-use-github-style="light"] b, +.markdown-preview[data-use-github-style="light"] strong { + font-weight: 600; +} + +.markdown-preview[data-use-github-style="light"] dfn { + font-style: italic; +} + +.markdown-preview[data-use-github-style="light"] h1 { + margin: .67em 0; + font-weight: 600; + padding-bottom: .3em; + font-size: 2em; + border-bottom: 1px solid hsla(210,18%,87%,1); +} + +.markdown-preview[data-use-github-style="light"] mark { + background-color: #fff8c5; + color: #1F2328; +} + +.markdown-preview[data-use-github-style="light"] small { + font-size: 90%; +} + +.markdown-preview[data-use-github-style="light"] sub, +.markdown-preview[data-use-github-style="light"] sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +.markdown-preview[data-use-github-style="light"] sub { + bottom: -0.25em; +} + +.markdown-preview[data-use-github-style="light"] sup { + top: -0.5em; +} + +.markdown-preview[data-use-github-style="light"] img { + border-style: none; + max-width: 100%; + box-sizing: content-box; + background-color: #ffffff; +} + +.markdown-preview[data-use-github-style="light"] code, +.markdown-preview[data-use-github-style="light"] kbd, +.markdown-preview[data-use-github-style="light"] pre, +.markdown-preview[data-use-github-style="light"] samp { + font-family: monospace; + font-size: 1em; +} + +.markdown-preview[data-use-github-style="light"] figure { + margin: 1em 40px; +} + +.markdown-preview[data-use-github-style="light"] hr { + box-sizing: content-box; + overflow: hidden; + background: transparent; + border-bottom: 1px solid hsla(210,18%,87%,1); + height: .25em; + padding: 0; + margin: 24px 0; + background-color: #d0d7de; + border: 0; +} + +.markdown-preview[data-use-github-style="light"] input { + font: inherit; + margin: 0; + overflow: visible; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +.markdown-preview[data-use-github-style="light"] [type=button], +.markdown-preview[data-use-github-style="light"] [type=reset], +.markdown-preview[data-use-github-style="light"] [type=submit] { + -webkit-appearance: button; + appearance: button; +} + +.markdown-preview[data-use-github-style="light"] [type=checkbox], +.markdown-preview[data-use-github-style="light"] [type=radio] { + box-sizing: border-box; + padding: 0; +} + +.markdown-preview[data-use-github-style="light"] [type=number]::-webkit-inner-spin-button, +.markdown-preview[data-use-github-style="light"] [type=number]::-webkit-outer-spin-button { + height: auto; +} + +.markdown-preview[data-use-github-style="light"] [type=search]::-webkit-search-cancel-button, +.markdown-preview[data-use-github-style="light"] [type=search]::-webkit-search-decoration { + -webkit-appearance: none; + appearance: none; +} + +.markdown-preview[data-use-github-style="light"] ::-webkit-input-placeholder { + color: inherit; + opacity: .54; +} + +.markdown-preview[data-use-github-style="light"] ::-webkit-file-upload-button { + -webkit-appearance: button; + appearance: button; + font: inherit; +} + +.markdown-preview[data-use-github-style="light"] a:hover { + text-decoration: underline; +} + +.markdown-preview[data-use-github-style="light"] ::placeholder { + color: #6e7781; + opacity: 1; +} + +.markdown-preview[data-use-github-style="light"] hr::before { + display: table; + content: ""; +} + +.markdown-preview[data-use-github-style="light"] hr::after { + display: table; + clear: both; + content: ""; +} + +.markdown-preview[data-use-github-style="light"] table { + border-spacing: 0; + border-collapse: collapse; + display: block; + width: max-content; + max-width: 100%; + overflow: auto; +} + +.markdown-preview[data-use-github-style="light"] td, +.markdown-preview[data-use-github-style="light"] th { + padding: 0; +} + +.markdown-preview[data-use-github-style="light"] details summary { + cursor: pointer; +} + +.markdown-preview[data-use-github-style="light"] details:not([open])>*:not(summary) { + display: none !important; +} + +.markdown-preview[data-use-github-style="light"] a:focus, +.markdown-preview[data-use-github-style="light"] [role=button]:focus, +.markdown-preview[data-use-github-style="light"] input[type=radio]:focus, +.markdown-preview[data-use-github-style="light"] input[type=checkbox]:focus { + outline: 2px solid #0969da; + outline-offset: -2px; + box-shadow: none; +} + +.markdown-preview[data-use-github-style="light"] a:focus:not(:focus-visible), +.markdown-preview[data-use-github-style="light"] [role=button]:focus:not(:focus-visible), +.markdown-preview[data-use-github-style="light"] input[type=radio]:focus:not(:focus-visible), +.markdown-preview[data-use-github-style="light"] input[type=checkbox]:focus:not(:focus-visible) { + outline: solid 1px transparent; +} + +.markdown-preview[data-use-github-style="light"] a:focus-visible, +.markdown-preview[data-use-github-style="light"] [role=button]:focus-visible, +.markdown-preview[data-use-github-style="light"] input[type=radio]:focus-visible, +.markdown-preview[data-use-github-style="light"] input[type=checkbox]:focus-visible { + outline: 2px solid #0969da; + outline-offset: -2px; + box-shadow: none; +} + +.markdown-preview[data-use-github-style="light"] a:not([class]):focus, +.markdown-preview[data-use-github-style="light"] a:not([class]):focus-visible, +.markdown-preview[data-use-github-style="light"] input[type=radio]:focus, +.markdown-preview[data-use-github-style="light"] input[type=radio]:focus-visible, +.markdown-preview[data-use-github-style="light"] input[type=checkbox]:focus, +.markdown-preview[data-use-github-style="light"] input[type=checkbox]:focus-visible { + outline-offset: 0; +} + +.markdown-preview[data-use-github-style="light"] kbd { + display: inline-block; + padding: 3px 5px; + font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + line-height: 10px; + color: #1F2328; + vertical-align: middle; + background-color: #f6f8fa; + border: solid 1px rgba(175,184,193,0.2); + border-bottom-color: rgba(175,184,193,0.2); + border-radius: 6px; + box-shadow: inset 0 -1px 0 rgba(175,184,193,0.2); +} + +.markdown-preview[data-use-github-style="light"] h1, +.markdown-preview[data-use-github-style="light"] h2, +.markdown-preview[data-use-github-style="light"] h3, +.markdown-preview[data-use-github-style="light"] h4, +.markdown-preview[data-use-github-style="light"] h5, +.markdown-preview[data-use-github-style="light"] h6 { + margin-top: 24px; + margin-bottom: 16px; + font-weight: 600; + line-height: 1.25; +} + +.markdown-preview[data-use-github-style="light"] h2 { + font-weight: 600; + padding-bottom: .3em; + font-size: 1.5em; + border-bottom: 1px solid hsla(210,18%,87%,1); +} + +.markdown-preview[data-use-github-style="light"] h3 { + font-weight: 600; + font-size: 1.25em; +} + +.markdown-preview[data-use-github-style="light"] h4 { + font-weight: 600; + font-size: 1em; +} + +.markdown-preview[data-use-github-style="light"] h5 { + font-weight: 600; + font-size: .875em; +} + +.markdown-preview[data-use-github-style="light"] h6 { + font-weight: 600; + font-size: .85em; + color: #656d76; +} + +.markdown-preview[data-use-github-style="light"] p { + margin-top: 0; + margin-bottom: 10px; +} + +.markdown-preview[data-use-github-style="light"] blockquote { + margin: 0; + padding: 0 1em; + color: #656d76; + border-left: .25em solid #d0d7de; +} + +.markdown-preview[data-use-github-style="light"] ul, +.markdown-preview[data-use-github-style="light"] ol { + margin-top: 0; + margin-bottom: 0; + padding-left: 2em; +} + +.markdown-preview[data-use-github-style="light"] ol ol, +.markdown-preview[data-use-github-style="light"] ul ol { + list-style-type: lower-roman; +} + +.markdown-preview[data-use-github-style="light"] ul ul ol, +.markdown-preview[data-use-github-style="light"] ul ol ol, +.markdown-preview[data-use-github-style="light"] ol ul ol, +.markdown-preview[data-use-github-style="light"] ol ol ol { + list-style-type: lower-alpha; +} + +.markdown-preview[data-use-github-style="light"] dd { + margin-left: 0; +} + +.markdown-preview[data-use-github-style="light"] tt, +.markdown-preview[data-use-github-style="light"] code, +.markdown-preview[data-use-github-style="light"] samp { + font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + font-size: 12px; +} + +.markdown-preview[data-use-github-style="light"] 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; +} + +.markdown-preview[data-use-github-style="light"] .octicon { + display: inline-block; + overflow: visible !important; + vertical-align: text-bottom; + fill: currentColor; +} + +.markdown-preview[data-use-github-style="light"] input::-webkit-outer-spin-button, +.markdown-preview[data-use-github-style="light"] input::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; + appearance: none; +} + +.markdown-preview[data-use-github-style="light"] .mr-2 { + margin-right: 8px !important; +} + +.markdown-preview[data-use-github-style="light"]::before { + display: table; + content: ""; +} + +.markdown-preview[data-use-github-style="light"]::after { + display: table; + clear: both; + content: ""; +} + +.markdown-preview[data-use-github-style="light"]>*:first-child { + margin-top: 0 !important; +} + +.markdown-preview[data-use-github-style="light"]>*:last-child { + margin-bottom: 0 !important; +} + +.markdown-preview[data-use-github-style="light"] a:not([href]) { + color: inherit; + text-decoration: none; +} + +.markdown-preview[data-use-github-style="light"] .absent { + color: #d1242f; +} + +.markdown-preview[data-use-github-style="light"] .anchor { + float: left; + padding-right: 4px; + margin-left: -20px; + line-height: 1; +} + +.markdown-preview[data-use-github-style="light"] .anchor:focus { + outline: none; +} + +.markdown-preview[data-use-github-style="light"] p, +.markdown-preview[data-use-github-style="light"] blockquote, +.markdown-preview[data-use-github-style="light"] ul, +.markdown-preview[data-use-github-style="light"] ol, +.markdown-preview[data-use-github-style="light"] dl, +.markdown-preview[data-use-github-style="light"] table, +.markdown-preview[data-use-github-style="light"] pre, +.markdown-preview[data-use-github-style="light"] details { + margin-top: 0; + margin-bottom: 16px; +} + +.markdown-preview[data-use-github-style="light"] blockquote>:first-child { + margin-top: 0; +} + +.markdown-preview[data-use-github-style="light"] blockquote>:last-child { + margin-bottom: 0; +} + +.markdown-preview[data-use-github-style="light"] h1 .octicon-link, +.markdown-preview[data-use-github-style="light"] h2 .octicon-link, +.markdown-preview[data-use-github-style="light"] h3 .octicon-link, +.markdown-preview[data-use-github-style="light"] h4 .octicon-link, +.markdown-preview[data-use-github-style="light"] h5 .octicon-link, +.markdown-preview[data-use-github-style="light"] h6 .octicon-link { + color: #1F2328; + vertical-align: middle; + visibility: hidden; +} + +.markdown-preview[data-use-github-style="light"] h1:hover .anchor, +.markdown-preview[data-use-github-style="light"] h2:hover .anchor, +.markdown-preview[data-use-github-style="light"] h3:hover .anchor, +.markdown-preview[data-use-github-style="light"] h4:hover .anchor, +.markdown-preview[data-use-github-style="light"] h5:hover .anchor, +.markdown-preview[data-use-github-style="light"] h6:hover .anchor { + text-decoration: none; +} + +.markdown-preview[data-use-github-style="light"] h1:hover .anchor .octicon-link, +.markdown-preview[data-use-github-style="light"] h2:hover .anchor .octicon-link, +.markdown-preview[data-use-github-style="light"] h3:hover .anchor .octicon-link, +.markdown-preview[data-use-github-style="light"] h4:hover .anchor .octicon-link, +.markdown-preview[data-use-github-style="light"] h5:hover .anchor .octicon-link, +.markdown-preview[data-use-github-style="light"] h6:hover .anchor .octicon-link { + visibility: visible; +} + +.markdown-preview[data-use-github-style="light"] h1 tt, +.markdown-preview[data-use-github-style="light"] h1 code, +.markdown-preview[data-use-github-style="light"] h2 tt, +.markdown-preview[data-use-github-style="light"] h2 code, +.markdown-preview[data-use-github-style="light"] h3 tt, +.markdown-preview[data-use-github-style="light"] h3 code, +.markdown-preview[data-use-github-style="light"] h4 tt, +.markdown-preview[data-use-github-style="light"] h4 code, +.markdown-preview[data-use-github-style="light"] h5 tt, +.markdown-preview[data-use-github-style="light"] h5 code, +.markdown-preview[data-use-github-style="light"] h6 tt, +.markdown-preview[data-use-github-style="light"] h6 code { + padding: 0 .2em; + font-size: inherit; +} + +.markdown-preview[data-use-github-style="light"] summary h1, +.markdown-preview[data-use-github-style="light"] summary h2, +.markdown-preview[data-use-github-style="light"] summary h3, +.markdown-preview[data-use-github-style="light"] summary h4, +.markdown-preview[data-use-github-style="light"] summary h5, +.markdown-preview[data-use-github-style="light"] summary h6 { + display: inline-block; +} + +.markdown-preview[data-use-github-style="light"] summary h1 .anchor, +.markdown-preview[data-use-github-style="light"] summary h2 .anchor, +.markdown-preview[data-use-github-style="light"] summary h3 .anchor, +.markdown-preview[data-use-github-style="light"] summary h4 .anchor, +.markdown-preview[data-use-github-style="light"] summary h5 .anchor, +.markdown-preview[data-use-github-style="light"] summary h6 .anchor { + margin-left: -40px; +} + +.markdown-preview[data-use-github-style="light"] summary h1, +.markdown-preview[data-use-github-style="light"] summary h2 { + padding-bottom: 0; + border-bottom: 0; +} + +.markdown-preview[data-use-github-style="light"] ul.no-list, +.markdown-preview[data-use-github-style="light"] ol.no-list { + padding: 0; + list-style-type: none; +} + +.markdown-preview[data-use-github-style="light"] ol[type="a s"] { + list-style-type: lower-alpha; +} + +.markdown-preview[data-use-github-style="light"] ol[type="A s"] { + list-style-type: upper-alpha; +} + +.markdown-preview[data-use-github-style="light"] ol[type="i s"] { + list-style-type: lower-roman; +} + +.markdown-preview[data-use-github-style="light"] ol[type="I s"] { + list-style-type: upper-roman; +} + +.markdown-preview[data-use-github-style="light"] ol[type="1"] { + list-style-type: decimal; +} + +.markdown-preview[data-use-github-style="light"] div>ol:not([type]) { + list-style-type: decimal; +} + +.markdown-preview[data-use-github-style="light"] ul ul, +.markdown-preview[data-use-github-style="light"] ul ol, +.markdown-preview[data-use-github-style="light"] ol ol, +.markdown-preview[data-use-github-style="light"] ol ul { + margin-top: 0; + margin-bottom: 0; +} + +.markdown-preview[data-use-github-style="light"] li>p { + margin-top: 16px; +} + +.markdown-preview[data-use-github-style="light"] li+li { + margin-top: .25em; +} + +.markdown-preview[data-use-github-style="light"] dl { + padding: 0; +} + +.markdown-preview[data-use-github-style="light"] dl dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: 600; +} + +.markdown-preview[data-use-github-style="light"] dl dd { + padding: 0 16px; + margin-bottom: 16px; +} + +.markdown-preview[data-use-github-style="light"] table th { + font-weight: 600; +} + +.markdown-preview[data-use-github-style="light"] table th, +.markdown-preview[data-use-github-style="light"] table td { + padding: 6px 13px; + border: 1px solid #d0d7de; +} + +.markdown-preview[data-use-github-style="light"] table td>:last-child { + margin-bottom: 0; +} + +.markdown-preview[data-use-github-style="light"] table tr { + background-color: #ffffff; + border-top: 1px solid hsla(210,18%,87%,1); +} + +.markdown-preview[data-use-github-style="light"] table tr:nth-child(2n) { + background-color: #f6f8fa; +} + +.markdown-preview[data-use-github-style="light"] table img { + background-color: transparent; +} + +.markdown-preview[data-use-github-style="light"] img[align=right] { + padding-left: 20px; +} + +.markdown-preview[data-use-github-style="light"] img[align=left] { + padding-right: 20px; +} + +.markdown-preview[data-use-github-style="light"] .emoji { + max-width: none; + vertical-align: text-top; + background-color: transparent; +} + +.markdown-preview[data-use-github-style="light"] span.frame { + display: block; + overflow: hidden; +} + +.markdown-preview[data-use-github-style="light"] span.frame>span { + display: block; + float: left; + width: auto; + padding: 7px; + margin: 13px 0 0; + overflow: hidden; + border: 1px solid #d0d7de; +} + +.markdown-preview[data-use-github-style="light"] span.frame span img { + display: block; + float: left; +} + +.markdown-preview[data-use-github-style="light"] span.frame span span { + display: block; + padding: 5px 0 0; + clear: both; + color: #1F2328; +} + +.markdown-preview[data-use-github-style="light"] span.align-center { + display: block; + overflow: hidden; + clear: both; +} + +.markdown-preview[data-use-github-style="light"] span.align-center>span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: center; +} + +.markdown-preview[data-use-github-style="light"] span.align-center span img { + margin: 0 auto; + text-align: center; +} + +.markdown-preview[data-use-github-style="light"] span.align-right { + display: block; + overflow: hidden; + clear: both; +} + +.markdown-preview[data-use-github-style="light"] span.align-right>span { + display: block; + margin: 13px 0 0; + overflow: hidden; + text-align: right; +} + +.markdown-preview[data-use-github-style="light"] span.align-right span img { + margin: 0; + text-align: right; +} + +.markdown-preview[data-use-github-style="light"] span.float-left { + display: block; + float: left; + margin-right: 13px; + overflow: hidden; +} + +.markdown-preview[data-use-github-style="light"] span.float-left span { + margin: 13px 0 0; +} + +.markdown-preview[data-use-github-style="light"] span.float-right { + display: block; + float: right; + margin-left: 13px; + overflow: hidden; +} + +.markdown-preview[data-use-github-style="light"] span.float-right>span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: right; +} + +.markdown-preview[data-use-github-style="light"] code, +.markdown-preview[data-use-github-style="light"] tt { + padding: .2em .4em; + margin: 0; + font-size: 85%; + white-space: break-spaces; + background-color: rgba(175,184,193,0.2); + border-radius: 6px; +} + +.markdown-preview[data-use-github-style="light"] code br, +.markdown-preview[data-use-github-style="light"] tt br { + display: none; +} + +.markdown-preview[data-use-github-style="light"] del code { + text-decoration: inherit; +} + +.markdown-preview[data-use-github-style="light"] samp { + font-size: 85%; +} + +.markdown-preview[data-use-github-style="light"] pre code { + font-size: 100%; +} + +.markdown-preview[data-use-github-style="light"] pre>code { + padding: 0; + margin: 0; + word-break: normal; + white-space: pre; + background: transparent; + border: 0; +} + +.markdown-preview[data-use-github-style="light"] .highlight { + margin-bottom: 16px; +} + +.markdown-preview[data-use-github-style="light"] .highlight pre { + margin-bottom: 0; + word-break: normal; +} + +.markdown-preview[data-use-github-style="light"] .highlight pre, +.markdown-preview[data-use-github-style="light"] pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + color: #1F2328; + background-color: #f6f8fa; + border-radius: 6px; +} + +.markdown-preview[data-use-github-style="light"] pre code, +.markdown-preview[data-use-github-style="light"] pre tt { + display: inline; + max-width: auto; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; +} + +.markdown-preview[data-use-github-style="light"] .csv-data td, +.markdown-preview[data-use-github-style="light"] .csv-data th { + padding: 5px; + overflow: hidden; + font-size: 12px; + line-height: 1; + text-align: left; + white-space: nowrap; +} + +.markdown-preview[data-use-github-style="light"] .csv-data .blob-num { + padding: 10px 8px 9px; + text-align: right; + background: #ffffff; + border: 0; +} + +.markdown-preview[data-use-github-style="light"] .csv-data tr { + border-top: 0; +} + +.markdown-preview[data-use-github-style="light"] .csv-data th { + font-weight: 600; + background: #f6f8fa; + border-top: 0; +} + +.markdown-preview[data-use-github-style="light"] [data-footnote-ref]::before { + content: "["; +} + +.markdown-preview[data-use-github-style="light"] [data-footnote-ref]::after { + content: "]"; +} + +.markdown-preview[data-use-github-style="light"] .footnotes { + font-size: 12px; + color: #656d76; + border-top: 1px solid #d0d7de; +} + +.markdown-preview[data-use-github-style="light"] .footnotes ol { + padding-left: 16px; +} + +.markdown-preview[data-use-github-style="light"] .footnotes ol ul { + display: inline-block; + padding-left: 16px; + margin-top: 16px; +} + +.markdown-preview[data-use-github-style="light"] .footnotes li { + position: relative; +} + +.markdown-preview[data-use-github-style="light"] .footnotes li:target::before { + position: absolute; + top: -8px; + right: -8px; + bottom: -8px; + left: -24px; + pointer-events: none; + content: ""; + border: 2px solid #0969da; + border-radius: 6px; +} + +.markdown-preview[data-use-github-style="light"] .footnotes li:target { + color: #1F2328; +} + +.markdown-preview[data-use-github-style="light"] .footnotes .data-footnote-backref g-emoji { + font-family: monospace; +} + +.markdown-preview[data-use-github-style="light"] .pl-c { + color: #57606a; +} + +.markdown-preview[data-use-github-style="light"] .pl-c1, +.markdown-preview[data-use-github-style="light"] .pl-s .pl-v { + color: #0550ae; +} + +.markdown-preview[data-use-github-style="light"] .pl-e, +.markdown-preview[data-use-github-style="light"] .pl-en { + color: #6639ba; +} + +.markdown-preview[data-use-github-style="light"] .pl-smi, +.markdown-preview[data-use-github-style="light"] .pl-s .pl-s1 { + color: #24292f; +} + +.markdown-preview[data-use-github-style="light"] .pl-ent { + color: #116329; +} + +.markdown-preview[data-use-github-style="light"] .pl-k { + color: #cf222e; +} + +.markdown-preview[data-use-github-style="light"] .pl-s, +.markdown-preview[data-use-github-style="light"] .pl-pds, +.markdown-preview[data-use-github-style="light"] .pl-s .pl-pse .pl-s1, +.markdown-preview[data-use-github-style="light"] .pl-sr, +.markdown-preview[data-use-github-style="light"] .pl-sr .pl-cce, +.markdown-preview[data-use-github-style="light"] .pl-sr .pl-sre, +.markdown-preview[data-use-github-style="light"] .pl-sr .pl-sra { + color: #0a3069; +} + +.markdown-preview[data-use-github-style="light"] .pl-v, +.markdown-preview[data-use-github-style="light"] .pl-smw { + color: #953800; +} + +.markdown-preview[data-use-github-style="light"] .pl-bu { + color: #82071e; +} + +.markdown-preview[data-use-github-style="light"] .pl-ii { + color: #f6f8fa; + background-color: #82071e; +} + +.markdown-preview[data-use-github-style="light"] .pl-c2 { + color: #f6f8fa; + background-color: #cf222e; +} + +.markdown-preview[data-use-github-style="light"] .pl-sr .pl-cce { + font-weight: bold; + color: #116329; +} + +.markdown-preview[data-use-github-style="light"] .pl-ml { + color: #3b2300; +} + +.markdown-preview[data-use-github-style="light"] .pl-mh, +.markdown-preview[data-use-github-style="light"] .pl-mh .pl-en, +.markdown-preview[data-use-github-style="light"] .pl-ms { + font-weight: bold; + color: #0550ae; +} + +.markdown-preview[data-use-github-style="light"] .pl-mi { + font-style: italic; + color: #24292f; +} + +.markdown-preview[data-use-github-style="light"] .pl-mb { + font-weight: bold; + color: #24292f; +} + +.markdown-preview[data-use-github-style="light"] .pl-md { + color: #82071e; + background-color: #ffebe9; +} + +.markdown-preview[data-use-github-style="light"] .pl-mi1 { + color: #116329; + background-color: #dafbe1; +} + +.markdown-preview[data-use-github-style="light"] .pl-mc { + color: #953800; + background-color: #ffd8b5; +} + +.markdown-preview[data-use-github-style="light"] .pl-mi2 { + color: #eaeef2; + background-color: #0550ae; +} + +.markdown-preview[data-use-github-style="light"] .pl-mdr { + font-weight: bold; + color: #8250df; +} + +.markdown-preview[data-use-github-style="light"] .pl-ba { + color: #57606a; +} + +.markdown-preview[data-use-github-style="light"] .pl-sg { + color: #8c959f; +} + +.markdown-preview[data-use-github-style="light"] .pl-corl { + text-decoration: underline; + color: #0a3069; +} + +.markdown-preview[data-use-github-style="light"] 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-preview[data-use-github-style="light"] g-emoji img { + width: 1em; + height: 1em; +} + +.markdown-preview[data-use-github-style="light"] .task-list-item { + list-style-type: none; +} + +.markdown-preview[data-use-github-style="light"] .task-list-item label { + font-weight: 400; +} + +.markdown-preview[data-use-github-style="light"] .task-list-item.enabled label { + cursor: pointer; +} + +.markdown-preview[data-use-github-style="light"] .task-list-item+.task-list-item { + margin-top: 4px; +} + +.markdown-preview[data-use-github-style="light"] .task-list-item .handle { + display: none; +} + +.markdown-preview[data-use-github-style="light"] .task-list-item-checkbox { + margin: 0 .2em .25em -1.4em; + vertical-align: middle; +} + +.markdown-preview[data-use-github-style="light"] .contains-task-list:dir(rtl) .task-list-item-checkbox { + margin: 0 -1.6em .25em .2em; +} + +.markdown-preview[data-use-github-style="light"] .contains-task-list { + position: relative; +} + +.markdown-preview[data-use-github-style="light"] .contains-task-list:hover .task-list-item-convert-container, +.markdown-preview[data-use-github-style="light"] .contains-task-list:focus-within .task-list-item-convert-container { + display: block; + width: auto; + height: 24px; + overflow: visible; + clip: auto; +} + +.markdown-preview[data-use-github-style="light"] ::-webkit-calendar-picker-indicator { + filter: invert(50%); +} + +.markdown-preview[data-use-github-style="light"] .markdown-alert { + padding: 8px 16px; + margin-bottom: 16px; + color: inherit; + border-left: .25em solid #d0d7de; +} + +.markdown-preview[data-use-github-style="light"] .markdown-alert>:first-child { + margin-top: 0; +} + +.markdown-preview[data-use-github-style="light"] .markdown-alert>:last-child { + margin-bottom: 0; +} + +.markdown-preview[data-use-github-style="light"] .markdown-alert .markdown-alert-title { + display: flex; + font-weight: 500; + align-items: center; + line-height: 1; +} + +.markdown-preview[data-use-github-style="light"] .markdown-alert.markdown-alert-note { + border-left-color: #0969da; +} + +.markdown-preview[data-use-github-style="light"] .markdown-alert.markdown-alert-note .markdown-alert-title { + color: #0969da; +} + +.markdown-preview[data-use-github-style="light"] .markdown-alert.markdown-alert-important { + border-left-color: #8250df; +} + +.markdown-preview[data-use-github-style="light"] .markdown-alert.markdown-alert-important .markdown-alert-title { + color: #8250df; +} + +.markdown-preview[data-use-github-style="light"] .markdown-alert.markdown-alert-warning { + border-left-color: #9a6700; +} + +.markdown-preview[data-use-github-style="light"] .markdown-alert.markdown-alert-warning .markdown-alert-title { + color: #9a6700; +} + +.markdown-preview[data-use-github-style="light"] .markdown-alert.markdown-alert-tip { + border-left-color: #1f883d; +} + +.markdown-preview[data-use-github-style="light"] .markdown-alert.markdown-alert-tip .markdown-alert-title { + color: #1a7f37; +} + +.markdown-preview[data-use-github-style="light"] .markdown-alert.markdown-alert-caution { + border-left-color: #cf222e; +} + +.markdown-preview[data-use-github-style="light"] .markdown-alert.markdown-alert-caution .markdown-alert-title { + color: #d1242f; +} diff --git a/packages/markdown-preview/lib/extension-helper.js b/packages/markdown-preview/lib/extension-helper.js index e29b94329..3173da37f 100644 --- a/packages/markdown-preview/lib/extension-helper.js +++ b/packages/markdown-preview/lib/extension-helper.js @@ -13,12 +13,12 @@ function getUserLanguageIds() { let pairs = usersLanguageIDs.split(","); for (let i = 0; i < pairs.length; i++) { - let split = pairs[i].split(":"); - obj[split[0].trim()] = split[1].trim(); + let split = pairs[i].split(":"); + obj[split[0].trim()] = split[1].trim(); } return obj; - + } catch(err) { atom.notifications.addError(`Unable to load Markdown Preview Custom Syntax Highlighting Language Identifiers\n${err.toString()}`); return {}; @@ -61,7 +61,7 @@ function getLanguageIds() { } module.exports = { - scopeForFenceName (fenceName) { + scopeForFenceName(fenceName) { fenceName = fenceName.toLowerCase() let scopesByFenceName = getLanguageIds(); diff --git a/packages/markdown-preview/lib/markdown-preview-view.js b/packages/markdown-preview/lib/markdown-preview-view.js index 40ee87b98..1f6410d4a 100644 --- a/packages/markdown-preview/lib/markdown-preview-view.js +++ b/packages/markdown-preview/lib/markdown-preview-view.js @@ -7,11 +7,11 @@ const fs = require('fs-plus') const renderer = require('./renderer') module.exports = class MarkdownPreviewView { - static deserialize (params) { + static deserialize(params) { return new MarkdownPreviewView(params) } - constructor ({ editorId, filePath }) { + constructor({ editorId, filePath }) { this.editorId = editorId this.filePath = filePath this.element = document.createElement('div') @@ -34,7 +34,7 @@ module.exports = class MarkdownPreviewView { } } - serialize () { + serialize() { return { deserializer: 'MarkdownPreviewView', filePath: this.getPath() != null ? this.getPath() : this.filePath, @@ -42,19 +42,19 @@ module.exports = class MarkdownPreviewView { } } - copy () { + copy() { return new MarkdownPreviewView({ editorId: this.editorId, filePath: this.getPath() != null ? this.getPath() : this.filePath }) } - destroy () { + destroy() { this.disposables.dispose() this.element.remove() } - registerScrollCommands () { + registerScrollCommands() { this.disposables.add( atom.commands.add(this.element, { 'core:move-up': () => { @@ -79,20 +79,20 @@ module.exports = class MarkdownPreviewView { ) } - onDidChangeTitle (callback) { + onDidChangeTitle(callback) { return this.emitter.on('did-change-title', callback) } - onDidChangeModified (callback) { + onDidChangeModified(callback) { // No op to suppress deprecation warning return new Disposable() } - onDidChangeMarkdown (callback) { + onDidChangeMarkdown(callback) { return this.emitter.on('did-change-markdown', callback) } - subscribeToFilePath (filePath) { + subscribeToFilePath(filePath) { this.file = new File(filePath) this.emitter.emit('did-change-title') this.disposables.add( @@ -102,7 +102,7 @@ module.exports = class MarkdownPreviewView { return this.renderMarkdown() } - resolveEditor (editorId) { + resolveEditor(editorId) { const resolve = () => { this.editor = this.editorForId(editorId) @@ -127,7 +127,7 @@ module.exports = class MarkdownPreviewView { } } - editorForId (editorId) { + editorForId(editorId) { for (const editor of atom.workspace.getTextEditors()) { if (editor.id != null && editor.id.toString() === editorId.toString()) { return editor @@ -136,7 +136,7 @@ module.exports = class MarkdownPreviewView { return null } - handleEvents () { + handleEvents() { const lazyRenderMarkdown = _.debounce(() => this.renderMarkdown(), 250) this.disposables.add( atom.grammars.onDidAddGrammar(() => lazyRenderMarkdown()) @@ -171,11 +171,11 @@ module.exports = class MarkdownPreviewView { 'markdown-preview:reset-zoom': () => { this.element.style.zoom = 1 }, - 'markdown-preview:toggle-break-on-single-newline' () { + 'markdown-preview:toggle-break-on-single-newline'() { const keyPath = 'markdown-preview.breakOnSingleNewline' atom.config.set(keyPath, !atom.config.get(keyPath)) }, - 'markdown-preview:toggle-github-style' () { + 'markdown-preview:toggle-github-style'() { const keyPath = 'markdown-preview.useGitHubStyle' atom.config.set(keyPath, !atom.config.get(keyPath)) } @@ -226,10 +226,20 @@ module.exports = class MarkdownPreviewView { ) ) + this.disposables.add( + atom.config.observe('markdown-preview.gitHubStyleMode', gitHubStyleMode => { + this.gitHubStyleMode = gitHubStyleMode + if (this.useGitHubStyle) { + this.element.setAttribute('data-use-github-style', gitHubStyleMode) + } + }) + ) + this.disposables.add( atom.config.observe('markdown-preview.useGitHubStyle', useGitHubStyle => { + this.useGitHubStyle = useGitHubStyle if (useGitHubStyle) { - this.element.setAttribute('data-use-github-style', '') + this.element.setAttribute('data-use-github-style', this.gitHubStyleMode) } else { this.element.removeAttribute('data-use-github-style') } @@ -253,7 +263,7 @@ module.exports = class MarkdownPreviewView { } } - renderMarkdown () { + renderMarkdown() { if (!this.loaded) { this.showLoading() } @@ -266,7 +276,7 @@ module.exports = class MarkdownPreviewView { .catch(reason => this.showError({ message: reason })) } - getMarkdownSource () { + getMarkdownSource() { if (this.file && this.file.getPath()) { return this.file .read() @@ -287,7 +297,7 @@ module.exports = class MarkdownPreviewView { } } - async getHTML () { + async getHTML() { const source = await this.getMarkdownSource() if (source == null) { @@ -297,7 +307,7 @@ module.exports = class MarkdownPreviewView { return renderer.toHTML(source, this.getPath(), this.getGrammar()) } - async renderMarkdownText (text) { + async renderMarkdownText(text) { const { scrollTop } = this.element try { @@ -318,7 +328,7 @@ module.exports = class MarkdownPreviewView { } } - getTitle () { + getTitle() { if (this.file != null && this.getPath() != null) { return `${path.basename(this.getPath())} Preview` } else if (this.editor != null) { @@ -328,11 +338,11 @@ module.exports = class MarkdownPreviewView { } } - getIconName () { + getIconName() { return 'markdown' } - getURI () { + getURI() { if (this.file != null) { return `markdown-preview://${this.getPath()}` } else { @@ -340,7 +350,7 @@ module.exports = class MarkdownPreviewView { } } - getPath () { + getPath() { if (this.file != null) { return this.file.getPath() } else if (this.editor != null) { @@ -348,16 +358,16 @@ module.exports = class MarkdownPreviewView { } } - getGrammar () { + getGrammar() { return this.editor != null ? this.editor.getGrammar() : undefined } - getDocumentStyleSheets () { + getDocumentStyleSheets() { // This function exists so we can stub it return document.styleSheets } - getTextEditorStyles () { + getTextEditorStyles() { const textEditorStyles = document.createElement('atom-styles') textEditorStyles.initialize(atom.styles) textEditorStyles.setAttribute('context', 'atom-text-editor') @@ -369,7 +379,7 @@ module.exports = class MarkdownPreviewView { .map(styleElement => styleElement.innerText) } - getMarkdownPreviewCSS () { + getMarkdownPreviewCSS() { const markdownPreviewRules = [] const ruleRegExp = /\.markdown-preview/ const cssUrlRegExp = /url\(atom:\/\/markdown-preview\/assets\/(.*)\)/ @@ -401,7 +411,7 @@ module.exports = class MarkdownPreviewView { }) } - showError (result) { + showError(result) { this.element.textContent = '' const h2 = document.createElement('h2') h2.textContent = 'Previewing Markdown Failed' @@ -413,7 +423,7 @@ module.exports = class MarkdownPreviewView { } } - showLoading () { + showLoading() { this.loading = true this.element.textContent = '' const div = document.createElement('div') @@ -422,7 +432,7 @@ module.exports = class MarkdownPreviewView { this.element.appendChild(div) } - selectAll () { + selectAll() { if (this.loading) { return } @@ -434,7 +444,7 @@ module.exports = class MarkdownPreviewView { selection.addRange(range) } - async copyToClipboard () { + async copyToClipboard() { if (this.loading) { return } @@ -464,7 +474,7 @@ module.exports = class MarkdownPreviewView { } } - getSaveDialogOptions () { + getSaveDialogOptions() { let defaultPath = this.getPath() if (defaultPath) { defaultPath += '.html' @@ -479,7 +489,7 @@ module.exports = class MarkdownPreviewView { return { defaultPath } } - async saveAs (htmlFilePath) { + async saveAs(htmlFilePath) { if (this.loading) { atom.notifications.addWarning( 'Please wait until the Markdown Preview has finished loading before saving' @@ -504,7 +514,7 @@ module.exports = class MarkdownPreviewView { ${title} - ${htmlBody} + ${htmlBody} ` + '\n' // Ensure trailing newline fs.writeFileSync(htmlFilePath, html) diff --git a/packages/markdown-preview/package-lock.json b/packages/markdown-preview/package-lock.json new file mode 100644 index 000000000..887d4d766 --- /dev/null +++ b/packages/markdown-preview/package-lock.json @@ -0,0 +1,651 @@ +{ + "name": "markdown-preview", + "version": "0.160.2", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "markdown-preview", + "version": "0.160.2", + "license": "MIT", + "dependencies": { + "cheerio": "^1.0.0-rc.3", + "dedent": "^1.5.3", + "dompurify": "^2.0.17", + "emoji-images": "^0.1.1", + "fs-plus": "^3.0.0", + "github-markdown-css": "^5.5.1", + "marked": "5.0.3", + "underscore-plus": "^1.0.0", + "yaml-front-matter": "^4.1.1" + }, + "devDependencies": { + "temp": "^0.8.1" + }, + "engines": { + "atom": "*" + } + }, + "node_modules/@types/node": { + "version": "11.13.7", + "license": "MIT" + }, + "node_modules/argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "dependencies": { + "sprintf-js": "~1.0.2" + } + }, + "node_modules/async": { + "version": "1.5.2", + "license": "MIT" + }, + "node_modules/balanced-match": { + "version": "1.0.0", + "license": "MIT" + }, + "node_modules/boolbase": { + "version": "1.0.0", + "license": "ISC" + }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/cheerio": { + "version": "1.0.0-rc.3", + "license": "MIT", + "dependencies": { + "css-select": "~1.2.0", + "dom-serializer": "~0.1.1", + "entities": "~1.1.1", + "htmlparser2": "^3.9.1", + "lodash": "^4.15.0", + "parse5": "^3.0.1" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/commander": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz", + "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==", + "engines": { + "node": ">= 6" + } + }, + "node_modules/concat-map": { + "version": "0.0.1", + "license": "MIT" + }, + "node_modules/css-select": { + "version": "1.2.0", + "license": "BSD-like", + "dependencies": { + "boolbase": "~1.0.0", + "css-what": "2.1", + "domutils": "1.5.1", + "nth-check": "~1.0.1" + } + }, + "node_modules/css-what": { + "version": "2.1.3", + "license": "BSD-2-Clause", + "engines": { + "node": "*" + } + }, + "node_modules/dedent": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz", + "integrity": "sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==", + "peerDependencies": { + "babel-plugin-macros": "^3.1.0" + }, + "peerDependenciesMeta": { + "babel-plugin-macros": { + "optional": true + } + } + }, + "node_modules/dom-serializer": { + "version": "0.1.1", + "license": "MIT", + "dependencies": { + "domelementtype": "^1.3.0", + "entities": "^1.1.1" + } + }, + "node_modules/domelementtype": { + "version": "1.3.1", + "license": "BSD-2-Clause" + }, + "node_modules/domhandler": { + "version": "2.4.2", + "license": "BSD-2-Clause", + "dependencies": { + "domelementtype": "1" + } + }, + "node_modules/dompurify": { + "version": "2.4.7", + "license": "(MPL-2.0 OR Apache-2.0)" + }, + "node_modules/domutils": { + "version": "1.5.1", + "dependencies": { + "dom-serializer": "0", + "domelementtype": "1" + } + }, + "node_modules/emoji-images": { + "version": "0.1.1" + }, + "node_modules/entities": { + "version": "1.1.2", + "license": "BSD-2-Clause" + }, + "node_modules/esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/fs-plus": { + "version": "3.1.1", + "license": "MIT", + "dependencies": { + "async": "^1.5.2", + "mkdirp": "^0.5.1", + "rimraf": "^2.5.2", + "underscore-plus": "1.x" + } + }, + "node_modules/fs.realpath": { + "version": "1.0.0", + "license": "ISC" + }, + "node_modules/github-markdown-css": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-5.5.1.tgz", + "integrity": "sha512-2osyhNgFt7DEHnGHbgIifWawAqlc68gjJiGwO1xNw/S48jivj8kVaocsVkyJqUi3fm7fdYIDi4C6yOtcqR/aEQ==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/glob": { + "version": "7.1.3", + "license": "ISC", + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + } + }, + "node_modules/htmlparser2": { + "version": "3.10.1", + "license": "MIT", + "dependencies": { + "domelementtype": "^1.3.1", + "domhandler": "^2.3.0", + "domutils": "^1.5.1", + "entities": "^1.1.1", + "inherits": "^2.0.1", + "readable-stream": "^3.1.1" + } + }, + "node_modules/inflight": { + "version": "1.0.6", + "license": "ISC", + "dependencies": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "node_modules/inherits": { + "version": "2.0.3", + "license": "ISC" + }, + "node_modules/js-yaml": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", + "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", + "dependencies": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/lodash": { + "version": "4.17.21", + "license": "MIT" + }, + "node_modules/marked": { + "version": "5.0.3", + "license": "MIT", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 18" + } + }, + "node_modules/minimatch": { + "version": "3.0.4", + "license": "ISC", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/minimist": { + "version": "0.0.8", + "license": "MIT" + }, + "node_modules/mkdirp": { + "version": "0.5.1", + "license": "MIT", + "dependencies": { + "minimist": "0.0.8" + }, + "bin": { + "mkdirp": "bin/cmd.js" + } + }, + "node_modules/nth-check": { + "version": "1.0.2", + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "~1.0.0" + } + }, + "node_modules/once": { + "version": "1.4.0", + "license": "ISC", + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/parse5": { + "version": "3.0.3", + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/path-is-absolute": { + "version": "1.0.1", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/readable-stream": { + "version": "3.3.0", + "license": "MIT", + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/rimraf": { + "version": "2.6.3", + "license": "ISC", + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + } + }, + "node_modules/safe-buffer": { + "version": "5.1.2", + "license": "MIT" + }, + "node_modules/sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==" + }, + "node_modules/string_decoder": { + "version": "1.2.0", + "license": "MIT", + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, + "node_modules/temp": { + "version": "0.8.4", + "dev": true, + "license": "MIT", + "dependencies": { + "rimraf": "~2.6.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/underscore": { + "version": "1.13.1", + "license": "MIT" + }, + "node_modules/underscore-plus": { + "version": "1.7.0", + "dependencies": { + "underscore": "^1.9.1" + } + }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "license": "MIT" + }, + "node_modules/wrappy": { + "version": "1.0.2", + "license": "ISC" + }, + "node_modules/yaml-front-matter": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/yaml-front-matter/-/yaml-front-matter-4.1.1.tgz", + "integrity": "sha512-ULGbghCLsN8Hs8vfExlqrJIe8Hl2TUjD7/zsIGMP8U+dgRXEsDXk4yydxeZJgdGiimP1XB7zhmhOB4/HyfqOyQ==", + "dependencies": { + "commander": "^6.2.0", + "js-yaml": "^3.14.1" + }, + "bin": { + "yaml-front-matter": "bin/js-yaml-front.js" + } + } + }, + "dependencies": { + "@types/node": { + "version": "11.13.7" + }, + "argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "requires": { + "sprintf-js": "~1.0.2" + } + }, + "async": { + "version": "1.5.2" + }, + "balanced-match": { + "version": "1.0.0" + }, + "boolbase": { + "version": "1.0.0" + }, + "brace-expansion": { + "version": "1.1.11", + "requires": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "cheerio": { + "version": "1.0.0-rc.3", + "requires": { + "css-select": "~1.2.0", + "dom-serializer": "~0.1.1", + "entities": "~1.1.1", + "htmlparser2": "^3.9.1", + "lodash": "^4.15.0", + "parse5": "^3.0.1" + } + }, + "commander": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz", + "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==" + }, + "concat-map": { + "version": "0.0.1" + }, + "css-select": { + "version": "1.2.0", + "requires": { + "boolbase": "~1.0.0", + "css-what": "2.1", + "domutils": "1.5.1", + "nth-check": "~1.0.1" + } + }, + "css-what": { + "version": "2.1.3" + }, + "dedent": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz", + "integrity": "sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==", + "requires": {} + }, + "dom-serializer": { + "version": "0.1.1", + "requires": { + "domelementtype": "^1.3.0", + "entities": "^1.1.1" + } + }, + "domelementtype": { + "version": "1.3.1" + }, + "domhandler": { + "version": "2.4.2", + "requires": { + "domelementtype": "1" + } + }, + "dompurify": { + "version": "2.4.7" + }, + "domutils": { + "version": "1.5.1", + "requires": { + "dom-serializer": "0", + "domelementtype": "1" + } + }, + "emoji-images": { + "version": "0.1.1" + }, + "entities": { + "version": "1.1.2" + }, + "esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==" + }, + "fs-plus": { + "version": "3.1.1", + "requires": { + "async": "^1.5.2", + "mkdirp": "^0.5.1", + "rimraf": "^2.5.2", + "underscore-plus": "1.x" + } + }, + "fs.realpath": { + "version": "1.0.0" + }, + "github-markdown-css": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-5.5.1.tgz", + "integrity": "sha512-2osyhNgFt7DEHnGHbgIifWawAqlc68gjJiGwO1xNw/S48jivj8kVaocsVkyJqUi3fm7fdYIDi4C6yOtcqR/aEQ==" + }, + "glob": { + "version": "7.1.3", + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + }, + "htmlparser2": { + "version": "3.10.1", + "requires": { + "domelementtype": "^1.3.1", + "domhandler": "^2.3.0", + "domutils": "^1.5.1", + "entities": "^1.1.1", + "inherits": "^2.0.1", + "readable-stream": "^3.1.1" + } + }, + "inflight": { + "version": "1.0.6", + "requires": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "inherits": { + "version": "2.0.3" + }, + "js-yaml": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", + "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", + "requires": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + } + }, + "lodash": { + "version": "4.17.21" + }, + "marked": { + "version": "5.0.3" + }, + "minimatch": { + "version": "3.0.4", + "requires": { + "brace-expansion": "^1.1.7" + } + }, + "minimist": { + "version": "0.0.8" + }, + "mkdirp": { + "version": "0.5.1", + "requires": { + "minimist": "0.0.8" + } + }, + "nth-check": { + "version": "1.0.2", + "requires": { + "boolbase": "~1.0.0" + } + }, + "once": { + "version": "1.4.0", + "requires": { + "wrappy": "1" + } + }, + "parse5": { + "version": "3.0.3", + "requires": { + "@types/node": "*" + } + }, + "path-is-absolute": { + "version": "1.0.1" + }, + "readable-stream": { + "version": "3.3.0", + "requires": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + } + }, + "rimraf": { + "version": "2.6.3", + "requires": { + "glob": "^7.1.3" + } + }, + "safe-buffer": { + "version": "5.1.2" + }, + "sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==" + }, + "string_decoder": { + "version": "1.2.0", + "requires": { + "safe-buffer": "~5.1.0" + } + }, + "temp": { + "version": "0.8.4", + "dev": true, + "requires": { + "rimraf": "~2.6.2" + } + }, + "underscore": { + "version": "1.13.1" + }, + "underscore-plus": { + "version": "1.7.0", + "requires": { + "underscore": "^1.9.1" + } + }, + "util-deprecate": { + "version": "1.0.2" + }, + "wrappy": { + "version": "1.0.2" + }, + "yaml-front-matter": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/yaml-front-matter/-/yaml-front-matter-4.1.1.tgz", + "integrity": "sha512-ULGbghCLsN8Hs8vfExlqrJIe8Hl2TUjD7/zsIGMP8U+dgRXEsDXk4yydxeZJgdGiimP1XB7zhmhOB4/HyfqOyQ==", + "requires": { + "commander": "^6.2.0", + "js-yaml": "^3.14.1" + } + } + } +} diff --git a/packages/markdown-preview/package.json b/packages/markdown-preview/package.json index 67134120c..0bb4a6e75 100644 --- a/packages/markdown-preview/package.json +++ b/packages/markdown-preview/package.json @@ -8,11 +8,16 @@ "engines": { "atom": "*" }, + "scripts": { + "generate-github-markdown-css": "node scripts/generate-github-markdown-css.js" + }, "dependencies": { "cheerio": "^1.0.0-rc.3", + "dedent": "^1.5.3", "dompurify": "^2.0.17", "emoji-images": "^0.1.1", "fs-plus": "^3.0.0", + "github-markdown-css": "^5.5.1", "marked": "5.0.3", "underscore-plus": "^1.0.0", "yaml-front-matter": "^4.1.1" @@ -26,25 +31,30 @@ "configSchema": { "breakOnSingleNewline": { "type": "boolean", + "order": 1, "default": false, "description": "In Markdown, a single newline character doesn't cause a line break in the generated HTML. In GitHub Flavored Markdown, that is not true. Enable this config option to insert line breaks in rendered HTML for single newlines in Markdown source." }, "liveUpdate": { "type": "boolean", + "order": 2, "default": true, "description": "Re-render the preview as the contents of the source changes, without requiring the source buffer to be saved. If disabled, the preview is re-rendered only when the buffer is saved to disk." }, "openPreviewInSplitPane": { + "order": 3, "type": "boolean", "default": true, "description": "Open the preview in a split pane. If disabled, the preview is opened in a new tab in the same pane." }, "allowUnsafeProtocols": { + "order": 4, "type": "boolean", "default": false, "description": "Allow HTML attributes to use protocols normally considered unsafe such as `file://` and absolute paths on Windows." }, "grammars": { + "order": 0, "type": "array", "default": [ "source.gfm", @@ -57,12 +67,36 @@ "description": "List of scopes for languages for which previewing is enabled. See [this README](https://github.com/pulsar-edit/spell-check#readme) for more information on finding the correct scope for a specific language." }, "useGitHubStyle": { - "title": "Use GitHub.com style", + "order": 5, + "title": "Use GitHub.com Style", "type": "boolean", "default": false, "description": "Use the same CSS styles for preview as the ones used on GitHub.com." }, + "gitHubStyleMode": { + "order": 6, + "title": "GitHub.com Style Mode", + "type": "string", + "default": "auto", + "description": "Whether to use light-mode GitHub CSS, dark-mode GitHub CSS, or system default (based on your operating system preferences). Has no effect unless **Use GitHub.com Style** is enabled.", + "enum": [ + { + "value": "auto", + "description": "System Default" + }, + { + "value": "light", + "description": "Light" + }, + { + "value": "dark", + "description": "Dark" + } + ] + }, "syntaxHighlightingLanguageIdentifier": { + "order": 7, + "title": "Syntax Highlighting Language Identifiers", "description": "Syntax Highlighting System to use for code block language identification. See [the README](https://github.com/pulsar-edit/pulsar/tree/master/packages/markdown-preview#readme) for details.", "type": "string", "default": "linguist", @@ -86,14 +120,14 @@ ] }, "customSyntaxHighlightingLanguageIdentifiers": { - "description": "Custom comma seperated list of Syntax Language Identifiers to map to any language. See [the README](https://github.com/pulsar-edit/pulsar/tree/master/packages/markdown-preview#readme) for usage.", + "description": "Comma-separated list of syntax language identifiers to map to any language. See [the README](https://github.com/pulsar-edit/pulsar/tree/master/packages/markdown-preview#readme) for usage.", "type": "string", "default": "" }, "useOriginalParser": { - "description": "Wether to use the original Markdown Parser, or the new Pulsar one.", + "description": "When checked, will use the original Markdown parser for `markdown-preview` (`marked`). When unchecked, will use the new Markdown parser built into Pulsar (`markdown-it`).", "type": "boolean", - "default": "true" + "default": true } } } diff --git a/packages/markdown-preview/scripts/generate-github-markdown-css.js b/packages/markdown-preview/scripts/generate-github-markdown-css.js new file mode 100644 index 000000000..c95aef9fe --- /dev/null +++ b/packages/markdown-preview/scripts/generate-github-markdown-css.js @@ -0,0 +1,38 @@ + +// Run this script whenever the `github-markdown-css` dependency is updated in +// order to regenerate GitHub styles. + +const fs = require('fs/promises'); +const path = require('path'); +const dedent = require('dedent'); + +const ASSETS = path.resolve(__dirname, '..', 'assets') + +const ASSET_LIGHT = require.resolve('github-markdown-css/github-markdown-light.css') +const ASSET_DARK = require.resolve('github-markdown-css/github-markdown-dark.css') + +async function run() { + let lightContents = (await fs.readFile(ASSET_LIGHT)).toString(); + let darkContents = (await fs.readFile(ASSET_DARK)).toString(); + + let lightCSSAuto = lightContents.replace(/\.markdown-body\b/g, '.markdown-preview[data-use-github-style="auto"]'); + let darkCSSAuto = darkContents.replace(/\.markdown-body\b/g, '.markdown-preview[data-use-github-style="auto"]'); + + const autoCSSMode = dedent` + @media (prefers-color-scheme: light) { + ${lightCSSAuto} + } + @media (prefers-color-scheme: dark) { + ${darkCSSAuto} + } + `; + + let lightCSSMode = lightContents.replace(/\.markdown-body\b/g, '.markdown-preview[data-use-github-style="light"]'); + let darkCSSMode = darkContents.replace(/\.markdown-body\b/g, '.markdown-preview[data-use-github-style="dark"]'); + + await fs.writeFile(path.join(ASSETS, 'github-markdown-auto.css'), autoCSSMode); + await fs.writeFile(path.join(ASSETS, 'github-markdown-light.css'), lightCSSMode); + await fs.writeFile(path.join(ASSETS, 'github-markdown-dark.css'), darkCSSMode); +} + +run() diff --git a/packages/markdown-preview/spec/.eslintrc b/packages/markdown-preview/spec/.eslintrc new file mode 100644 index 000000000..1aee0ae4d --- /dev/null +++ b/packages/markdown-preview/spec/.eslintrc @@ -0,0 +1,12 @@ +{ + "env": { "jasmine": true }, + "rules": { + "node/no-unpublished-require": "off", + "node/no-extraneous-require": "off", + "no-unused-vars": "off", + "no-empty": "off" + }, + "globals": { + "waitsForPromise": true + } +} diff --git a/packages/markdown-preview/styles/markdown-preview-github.less b/packages/markdown-preview/styles/markdown-preview-github.less index fedb5cbc3..b85498358 100644 --- a/packages/markdown-preview/styles/markdown-preview-github.less +++ b/packages/markdown-preview/styles/markdown-preview-github.less @@ -1,33 +1,44 @@ // GitHub.com styles -// These are the GitHub Flavored Markdown styles also found on github.com. -// They can be anabled in the markdown-preview settings by turning on "Use GitHub.com styles". +// These are the GitHub Flavored Markdown styles also found on github.com. They +// can be enabled in the `markdown-preview` settings by turning on "Use +// GitHub.com Styles." +// +// We define styles for both dark mode and light mode. A specific mode can be +// opted into via the “GitHub.com Style Mode” setting… or else the user can +// leave the setting on “System Default” to use whatever mode the OS has +// decided to use. -@import (reference) "../assets/primer-markdown"; +// The GitHub styles are imported from the `github-markdown-css` package, then +// customized via the `generate-github-markdown-css` task and written to the +// `assets` directory. The task applies some simple transformations to the CSS +// and handles the light-mode/dark-mode logic. +// +// We import these files as `less` files (even though they're ordinary CSS) +// because that forces Less to process them instead of leaving them for the +// standard `@import` directive in CSS. Less can resolve these relative paths, +// but CSS can't. +@import (less) "../assets/github-markdown-auto.css"; +@import (less) "../assets/github-markdown-light.css"; +@import (less) "../assets/github-markdown-dark.css"; -.markdown-preview[data-use-github-style] { +// After we import these rules, we define some overrides; these are needed +// because some UI theme style rules could bleed into Markdown preview areas in +// situations where GitHub relies on browser defaults or fails to envision the +// presence of other possible style rules. Since we don't know what rules the +// user's UI theme has defined, we need to be a bit more paranoid. - // Includes GitHub.com styles from `../assets/primer-markdown.less`. - // Source: https://github.com/primer/primer/tree/master/modules/primer-markdown - .markdown-body(); - - - // The styles below override/complement the GitHub.com styles - // It's needed because some markup or global styles are different +// Overrides for all themes. +.markdown-preview-additions() { padding: 30px; font-size: 16px; - color: #333; - background-color: #fff; overflow: scroll; - a { - color: #337ab7; - } - code { color: inherit; + border: inherit; } atom-text-editor { @@ -37,4 +48,45 @@ border-radius: 4px; overflow: auto; } + +} + +// Overrides for dark mode. +.markdown-preview-additions-dark() { + .markdown-preview-additions(); + color: rgb(230, 237, 243); + background-color: rgb(13, 17, 23); + a { + color: rgb(69, 147, 248); + } +} + +// Overrides for light mode. +.markdown-preview-additions-light() { + .markdown-preview-additions(); + color: rgb(31, 35, 40); + background-color: rgb(255, 255, 255); + a { + color: rgb(11, 105, 218); + } +} + +.markdown-preview[data-use-github-style="light"] { + .markdown-preview-additions-light(); +} + +@media (prefers-color-scheme: light) { + .markdown-preview[data-use-github-style="auto"] { + .markdown-preview-additions-light(); + } +} + +.markdown-preview[data-use-github-style="dark"] { + .markdown-preview-additions-dark(); +} + +@media (prefers-color-scheme: dark) { + .markdown-preview[data-use-github-style="auto"] { + .markdown-preview-additions-dark(); + } }