mirror of
https://github.com/keanuplayz/dotfiles.git
synced 2024-08-15 02:33:12 +00:00
[scripts] Vendor markdown2htmldoc
This commit is contained in:
parent
741325991a
commit
d2f868ca9e
15 changed files with 1738 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
node_modules
|
5
script-resources/markdown2htmldoc/.eslintrc.yml
Normal file
5
script-resources/markdown2htmldoc/.eslintrc.yml
Normal file
|
@ -0,0 +1,5 @@
|
|||
extends:
|
||||
- eslint-config-dmitmel/presets/node
|
||||
- eslint-config-dmitmel/presets/formatting
|
||||
rules:
|
||||
node/shebang: off
|
1
script-resources/markdown2htmldoc/.prettierrc.js
Normal file
1
script-resources/markdown2htmldoc/.prettierrc.js
Normal file
|
@ -0,0 +1 @@
|
|||
module.exports = require('eslint-config-dmitmel/prettier.config.js');
|
1
script-resources/markdown2htmldoc/.yarnrc
Normal file
1
script-resources/markdown2htmldoc/.yarnrc
Normal file
|
@ -0,0 +1 @@
|
|||
ignore-optional true
|
136
script-resources/markdown2htmldoc/main.js
Executable file
136
script-resources/markdown2htmldoc/main.js
Executable file
|
@ -0,0 +1,136 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
const fs = require('fs');
|
||||
const pathM = require('path');
|
||||
const argparse = require('argparse');
|
||||
const markdownIt = require('markdown-it');
|
||||
const markdownItTaskCheckbox = require('markdown-it-task-checkbox');
|
||||
const markdownItEmoji = require('markdown-it-emoji');
|
||||
const markdownItHeaderAnchors = require('./markdown-it-header-anchors');
|
||||
const Prism = require('prismjs/components/prism-core');
|
||||
const loadPrismLanguages = require('prismjs/components/');
|
||||
const PRISM_COMPONENTS = require('prismjs/components.js');
|
||||
|
||||
// TODO: integrate <https://github.com/PrismJS/prism-themes>
|
||||
const PRISM_THEMES = Object.keys(PRISM_COMPONENTS.themes).filter((k) => k !== 'meta');
|
||||
|
||||
let parser = new argparse.ArgumentParser();
|
||||
|
||||
parser.add_argument('INPUT_FILE', {
|
||||
nargs: argparse.OPTIONAL,
|
||||
help: '(stdin by default)',
|
||||
});
|
||||
parser.add_argument('OUTPUT_FILE', {
|
||||
nargs: argparse.OPTIONAL,
|
||||
help: '(stdout by default)',
|
||||
});
|
||||
|
||||
parser.add_argument('--input-encoding', {
|
||||
default: 'utf-8',
|
||||
help: '(utf-8 by default)',
|
||||
});
|
||||
parser.add_argument('--output-encoding', {
|
||||
default: 'utf-8',
|
||||
help: '(utf-8 by default)',
|
||||
});
|
||||
|
||||
parser.add_argument('--theme', {
|
||||
choices: ['dotfiles', 'github', 'none'],
|
||||
default: 'dotfiles',
|
||||
});
|
||||
parser.add_argument('--syntax-theme', {
|
||||
choices: [...PRISM_THEMES, 'none', 'dotfiles'],
|
||||
});
|
||||
|
||||
parser.add_argument('--stylesheet', {
|
||||
nargs: argparse.ZERO_OR_MORE,
|
||||
});
|
||||
parser.add_argument('--script', {
|
||||
nargs: argparse.ZERO_OR_MORE,
|
||||
});
|
||||
|
||||
let args = parser.parse_args();
|
||||
|
||||
loadPrismLanguages(); // loads all languages
|
||||
|
||||
let md = markdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
highlight: (code, lang) => {
|
||||
if (lang && Object.prototype.hasOwnProperty.call(Prism.languages, lang)) {
|
||||
return Prism.highlight(code, Prism.languages[lang], lang);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
});
|
||||
md.use(markdownItTaskCheckbox);
|
||||
md.use(markdownItEmoji, { shortcuts: {} });
|
||||
md.use(markdownItHeaderAnchors);
|
||||
|
||||
let markdownDocument = fs.readFileSync(args.INPUT_FILE || 0, args.input_encoding);
|
||||
let renderedMarkdown = md.render(markdownDocument);
|
||||
|
||||
let stylesheetsTexts = [];
|
||||
let scriptsTexts = [];
|
||||
let syntaxThemeName = 'dotfiles';
|
||||
|
||||
if (args.theme === 'dotfiles') {
|
||||
stylesheetsTexts.push(fs.readFileSync(require.resolve('./themes-out/my.css'), 'utf-8'));
|
||||
} else if (args.theme === 'github') {
|
||||
stylesheetsTexts.push(fs.readFileSync(require.resolve('./themes-out/github.css'), 'utf-8'));
|
||||
} else {
|
||||
syntaxThemeName = 'none';
|
||||
}
|
||||
|
||||
syntaxThemeName = args.syntax_theme || syntaxThemeName;
|
||||
if (syntaxThemeName && syntaxThemeName !== 'none') {
|
||||
stylesheetsTexts.push(
|
||||
fs.readFileSync(
|
||||
require.resolve(
|
||||
syntaxThemeName === 'dotfiles'
|
||||
? './themes-out/my-prismjs-theme.css'
|
||||
: `prismjs/themes/${syntaxThemeName}.css`,
|
||||
),
|
||||
'utf-8',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
for (let stylesheetPath of args.stylesheet || []) {
|
||||
stylesheetsTexts.push(fs.readFileSync(stylesheetPath));
|
||||
}
|
||||
|
||||
for (let scriptPath of args.script || []) {
|
||||
scriptsTexts.push(fs.readFileSync(scriptPath));
|
||||
}
|
||||
|
||||
let renderedHtmlDocument = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>${pathM.basename(args.INPUT_FILE || '<stdin>')}</title>
|
||||
${stylesheetsTexts
|
||||
.map((s) => {
|
||||
let st = s.trim();
|
||||
return !st.includes('\n') ? `<style>${st}</style>` : `<style>\n${s}\n</style>`;
|
||||
})
|
||||
.join('\n')}
|
||||
</head>
|
||||
<body>
|
||||
<article class="markdown-body">
|
||||
${renderedMarkdown}
|
||||
</article>
|
||||
${scriptsTexts
|
||||
.map((s) => {
|
||||
let st = s.trim();
|
||||
return !st.includes('\n') ? `<script>${st}</script>` : `<script>\n${s}\n</script>`;
|
||||
})
|
||||
.join('\n')}
|
||||
</body>
|
||||
</html>
|
||||
`.trim();
|
||||
|
||||
fs.writeFileSync(args.OUTPUT_FILE || 1, renderedHtmlDocument, args.output_encoding);
|
|
@ -0,0 +1,48 @@
|
|||
const GithubSlugger = require('github-slugger');
|
||||
|
||||
const OCTICON_LINK_ICON_SVG = [
|
||||
// Basically copied from Github's HTML. Also see
|
||||
// <https://stackoverflow.com/a/34249810/12005228>. I wonder what other
|
||||
// attributes can be thrown out to make this image smaller? After all, it is
|
||||
// duplicated for each and every heading.
|
||||
'<svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">',
|
||||
'<path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path>',
|
||||
'</svg>',
|
||||
].join('');
|
||||
|
||||
function markdownItHeaderAnchors(md) {
|
||||
let slugger = new GithubSlugger();
|
||||
|
||||
let defaultRender =
|
||||
md.renderer.rules.heading_open ||
|
||||
((tokens, idx, options, _env, self) => self.renderToken(tokens, idx, options));
|
||||
|
||||
// eslint-disable-next-line camelcase
|
||||
md.renderer.rules.heading_open = (tokens, idx, opts, env, self) => {
|
||||
let renderedHeadingOpen = defaultRender(tokens, idx, opts, env, self);
|
||||
|
||||
let innerText = '';
|
||||
let headingContentToken = tokens[idx + 1];
|
||||
headingContentToken.children.forEach((child) => {
|
||||
switch (child.type) {
|
||||
case 'html_block':
|
||||
case 'html_inline':
|
||||
break;
|
||||
case 'emoji':
|
||||
innerText += child.markup;
|
||||
break;
|
||||
default:
|
||||
innerText += child.content;
|
||||
}
|
||||
});
|
||||
|
||||
if (innerText.length > 0) {
|
||||
let id = md.utils.escapeHtml(slugger.slug(innerText));
|
||||
renderedHeadingOpen += `<a id="${id}" class="anchor" href="#${id}" aria-hidden="true">${OCTICON_LINK_ICON_SVG}</a>`;
|
||||
}
|
||||
|
||||
return renderedHeadingOpen;
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = markdownItHeaderAnchors;
|
28
script-resources/markdown2htmldoc/package.json
Normal file
28
script-resources/markdown2htmldoc/package.json
Normal file
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"theme:build": "sass --no-source-map --style=compressed themes-src/:themes-out/",
|
||||
"theme:watch": "sass --no-source-map --style=compressed --watch themes-src/:themes-out/"
|
||||
},
|
||||
"dependencies": {
|
||||
"argparse": "^2.0.1",
|
||||
"github-markdown-css": "^4.0.0",
|
||||
"github-slugger": "^1.4.0",
|
||||
"markdown-it": "^12.2.0",
|
||||
"markdown-it-admonition": "^1.0.4",
|
||||
"markdown-it-emoji": "^2.0.0",
|
||||
"markdown-it-footnote": "^3.0.3",
|
||||
"markdown-it-task-checkbox": "^1.0.6",
|
||||
"prismjs": "^1.25.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-dmitmel": "dmitmel/eslint-config-dmitmel",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
"prettier": "^2.4.1",
|
||||
"sass": "^1.42.0"
|
||||
}
|
||||
}
|
3
script-resources/markdown2htmldoc/setup.sh
Executable file
3
script-resources/markdown2htmldoc/setup.sh
Executable file
|
@ -0,0 +1,3 @@
|
|||
#!/usr/bin/env sh
|
||||
|
||||
yarn install --production
|
1
script-resources/markdown2htmldoc/themes-out/github.css
Normal file
1
script-resources/markdown2htmldoc/themes-out/github.css
Normal file
File diff suppressed because one or more lines are too long
|
@ -0,0 +1 @@
|
|||
.markdown-body code,.markdown-body pre{font-family:"Ubuntu Mono",monospace;-moz-tab-size:4;-o-tab-size:4;tab-size:4}.markdown-body pre{background-color:#2d2d2d;color:#d3d0c8}.markdown-body pre::-moz-selection,.markdown-body pre::selection,.markdown-body pre ::-moz-selection,.markdown-body pre ::selection{background-color:#515151;color:#d3d0c8}.token.symbol{color:#905}.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.url{text-decoration:underline}.token.entity{cursor:help}.token.attr-equals,.token.punctuation,.token.operator,.token.combinator{color:#d3d0c8}.token.comment,.token.doctype,.token.doctype>.token.punctuation,.token.cdata,.token.cdata>.token.punctuation,.token.prolog,.token.blockquote,.token.hr{color:#747369}.token.variable,.token.parameter,.token.constant,.token.tag,.token.property,.token.deleted,.token.selector{color:#f2777a}.token.boolean,.token.number,.token.unit,.token.attr-name,.token.color.hexcode,.token.list,.token.nil,.token.nil.keyword{color:#f99157}.token.class-name,.token.maybe-class-name,.token.builtin,.token.variable.dom,.token.macro,.token.interpolation-punctuation,.language-json .token.property{color:#fc6}.token.string,.token.char,.token.attr-value,.token.attr-value>.token.punctuation:not(.attr-equals),.token.inserted{color:#9c9}.token.regex,.token.pseudo-class,.token.pseudo-element,.token.entity,.token.important{color:#6cc}.token.function,.token.coord,.token.url,.token.heading,.token.title,.token.heading>.token.important,.token.title>.token.punctuation{color:#69c}.token.keyword,.token.operator.arrow,.token.rule{color:#c9c}
|
1
script-resources/markdown2htmldoc/themes-out/my.css
Normal file
1
script-resources/markdown2htmldoc/themes-out/my.css
Normal file
File diff suppressed because one or more lines are too long
24
script-resources/markdown2htmldoc/themes-src/github.scss
Normal file
24
script-resources/markdown2htmldoc/themes-src/github.scss
Normal file
|
@ -0,0 +1,24 @@
|
|||
// See also:
|
||||
// <https://github.com/primer/css/tree/main/src/markdown> <-- Nice.
|
||||
// <https://github.com/primer/css/tree/main/src/base>
|
||||
// <https://github.com/primer/css/blob/main/src/base/typography-base.scss>
|
||||
// <https://github.com/primer/css/blob/main/src/base/kbd.scss>
|
||||
|
||||
@use '../node_modules/github-markdown-css/github-markdown.css';
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
box-sizing: border-box;
|
||||
min-width: 200px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 32px;
|
||||
@media (max-width: 768px - 1px) {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
@use '../../../colorschemes/out/prismjs-theme.css';
|
464
script-resources/markdown2htmldoc/themes-src/my.scss
Normal file
464
script-resources/markdown2htmldoc/themes-src/my.scss
Normal file
|
@ -0,0 +1,464 @@
|
|||
// My GLORIOUS theme for rendered Markdown documents (But may come in handy for
|
||||
// other projects? Who knows!). Integrated with my colorscheme generators, best
|
||||
// paired with my very own syntax highlighting theme. Based on
|
||||
// sindresorhus/github-markdown-css[1] and primer/css[2]. By the way, here[3]
|
||||
// is the first ever public version of the Markdown styles. Also, GitLab's
|
||||
// stylesheet can be found here[4], it supports way more syntactical features.
|
||||
//
|
||||
// [1]: <https://github.com/sindresorhus/github-markdown-css/blob/1485dd78f5e744ef36e946e5ae44838e3906f9d8/github-markdown.css>
|
||||
// [2]: <https://github.com/primer/css/tree/63764f7edd59c5f4949c91e5373471aa8b0d4865>
|
||||
// [3]: <https://github.com/primer/primer-markdown/tree/fa1aa995def5b85cfb8f3c414cded8cb6559292c>
|
||||
// [4]: <https://gitlab.com/gitlab-org/gitlab/-/blob/7a6e4f24d0d828500a7c7b6eb84973a1b4c35534/app/assets/stylesheets/framework/typography.scss>
|
||||
//
|
||||
// User-Agent stylesheets (<https://stackoverflow.com/a/6867287/12005228>):
|
||||
// Firefox: <https://searchfox.org/mozilla-central/source/layout/style/res/html.css>
|
||||
// Chromium: <https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css/html.css>
|
||||
|
||||
@use 'sass:math';
|
||||
@use 'sass:color';
|
||||
|
||||
// NOTE: GitHub uses an ancient version of normalize.css:
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/normalize.scss>
|
||||
@use '../node_modules/normalize.css/normalize.css';
|
||||
|
||||
@use '../../../colorschemes/out/_colorscheme.scss';
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// CONFIGURATION CONSTANTS AND FUNCTIONS
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/support/variables/typography.scss#L34-L38>
|
||||
$font-default: 'Ubuntu', sans-serif;
|
||||
$font-monospace: 'Ubuntu Mono', monospace;
|
||||
// https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/support/variables/typography.scss#L29-L32
|
||||
$line-height-headings: 1.25;
|
||||
$line-height-code-blocks: 1.3;
|
||||
$line-height-default: 1.5;
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/support/variables/typography.scss#L40-L42>
|
||||
$font-size-default: 16px;
|
||||
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/support/variables/misc.scss#L3-L12>
|
||||
$border-radius: 4px;
|
||||
@function border($width: 1px, $style: solid, $color: colorscheme.$base-02) {
|
||||
@return $width $style $color;
|
||||
}
|
||||
|
||||
$paragraph-spacing: 1em;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// MIXINS AND FUNCTIONS
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
@mixin clearfix {
|
||||
&::after,
|
||||
&::before {
|
||||
display: table;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cancel-out-child-margins {
|
||||
& > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
& > :last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// BASE STYLES
|
||||
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss>
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss>
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L1-L4>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L15-L21>
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L7-L11>
|
||||
body {
|
||||
color: colorscheme.$fg;
|
||||
background-color: colorscheme.$bg;
|
||||
font-family: $font-default;
|
||||
font-size: $font-size-default;
|
||||
line-height: $line-height-default;
|
||||
word-wrap: break-word;
|
||||
|
||||
$tab-size: 4;
|
||||
-moz-tab-size: $tab-size;
|
||||
-o-tab-size: $tab-size;
|
||||
tab-size: $tab-size;
|
||||
|
||||
&::-moz-selection,
|
||||
&::selection,
|
||||
& ::-moz-selection,
|
||||
& ::selection {
|
||||
color: colorscheme.$selection-fg;
|
||||
background-color: colorscheme.$selection-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Also called `.markdown-body` by GitHub.
|
||||
article {
|
||||
min-width: 200px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 32px;
|
||||
@media (max-width: 768px - 1px) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
@include clearfix();
|
||||
@include cancel-out-child-margins();
|
||||
}
|
||||
|
||||
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/octicons.scss>
|
||||
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/typography-base.scss#L81-L88>
|
||||
.octicon {
|
||||
display: inline-block;
|
||||
overflow: visible !important; // Not sure about this.
|
||||
vertical-align: text-bottom;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L23-L30>
|
||||
a {
|
||||
color: colorscheme.$base-0D;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L35-L44>
|
||||
&:not([href]) {
|
||||
color: unset;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L37-L50>
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L75-L82>
|
||||
hr {
|
||||
margin-top: $paragraph-spacing * 1.5;
|
||||
margin-bottom: $paragraph-spacing * 1.5;
|
||||
border: border($width: 0.2em);
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
// Set up paragraph margins for paragraphs themselves and other elements that
|
||||
// will appear at the top level.
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L63-L73>
|
||||
dl,
|
||||
details,
|
||||
table,
|
||||
blockquote,
|
||||
ul,
|
||||
ol,
|
||||
pre,
|
||||
p {
|
||||
margin-top: $paragraph-spacing;
|
||||
margin-bottom: $paragraph-spacing;
|
||||
}
|
||||
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L84-L98>
|
||||
blockquote {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 1em;
|
||||
border-left: border($width: 0.25em);
|
||||
@include cancel-out-child-margins();
|
||||
}
|
||||
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/base.scss#L78-L85>
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/images.scss#L5-L22>
|
||||
img {
|
||||
max-width: 100%;
|
||||
// Fixes manually specified widths for images.
|
||||
box-sizing: content-box;
|
||||
background-color: colorscheme.$bg;
|
||||
|
||||
&[align='left'],
|
||||
&[align='right'] {
|
||||
margin: 0.5em 1.25em;
|
||||
}
|
||||
|
||||
&[align='left'] {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&[align='right'] {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ins,
|
||||
del {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ins {
|
||||
color: colorscheme.$base-0B;
|
||||
}
|
||||
|
||||
del {
|
||||
color: colorscheme.$base-08;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: colorscheme.$base-0A;
|
||||
color: colorscheme.$bg;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// HEADINGS
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/headings.scss>
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/headings.scss#L5-L15>
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: $paragraph-spacing * 1.5;
|
||||
margin-bottom: $paragraph-spacing * 1;
|
||||
padding-bottom: 0.3em;
|
||||
border-bottom: border();
|
||||
// Make the headers less bold, the default font-weight is 700.
|
||||
font-weight: 600;
|
||||
line-height: $line-height-headings;
|
||||
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L51-L61>
|
||||
.anchor {
|
||||
float: left;
|
||||
$size: 16px;
|
||||
$offset: 4px;
|
||||
padding-right: $offset;
|
||||
margin-left: -($size + $offset);
|
||||
|
||||
// Undo the default styles for links.
|
||||
color: unset;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
> * {
|
||||
visibility: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.anchor > * {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.anchor > * {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// CODE
|
||||
// <https://github.com/primer/css/blob/39274b353b6bfc43016c23599076bc3e03f0c1c1/src/markdown/code.scss>
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/typography-base.scss#L65-L79>
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-family: $font-monospace;
|
||||
}
|
||||
|
||||
// Inline code snippets.
|
||||
code {
|
||||
padding: 0.2em 0.3em;
|
||||
color: inherit;
|
||||
background-color: rgba(colorscheme.$base-03, 0.2);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// Code blocks.
|
||||
pre {
|
||||
padding: 1em;
|
||||
overflow: auto;
|
||||
color: colorscheme.$fg;
|
||||
background-color: colorscheme.$bg;
|
||||
border: border();
|
||||
border-radius: $border-radius;
|
||||
line-height: $line-height-code-blocks;
|
||||
word-wrap: normal;
|
||||
|
||||
// Undo the highlighting of inline snippets.
|
||||
code {
|
||||
padding: unset;
|
||||
background-color: unset;
|
||||
border: unset;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// KEYBOARD SHORTCUTS
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/kbd.scss>
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 0.2em 0.3em;
|
||||
vertical-align: bottom;
|
||||
|
||||
// The original stylesheet specifies both font-size and line-height in
|
||||
// pixels, but I want to do the same in relative units instead, so
|
||||
// recalculating everything proportionally.
|
||||
$orig-font-size: /* 11px */ 12px;
|
||||
$orig-line-height: 10px;
|
||||
$rel-font-size: math.div($orig-font-size, 16px) * 1em;
|
||||
$rel-line-height: math.div($orig-line-height, $orig-font-size);
|
||||
// This rule implicitly resets all inherited font-related properties.
|
||||
font: #{$rel-font-size}/#{$rel-line-height} #{$font-monospace};
|
||||
|
||||
$kbd-bg-color: if(colorscheme.$is-dark, colorscheme.$bg, colorscheme.$fg);
|
||||
$kbd-fg-color: if(colorscheme.$is-dark, colorscheme.$fg, colorscheme.$bg);
|
||||
|
||||
color: $kbd-fg-color;
|
||||
background-color: color.change($kbd-bg-color, $lightness: 10%);
|
||||
border: border($width: 0.1em, $color: color.change($kbd-bg-color, $lightness: 5%));
|
||||
border-bottom-width: 0.4em;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// TABLES
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/tables.scss>
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/tables.scss#L4-L35>
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/base.scss#L56-L59>
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
// For browsers with support for `max-content`. Not sure what this pair of
|
||||
// rules does differently from just `width: 100%`.
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/tables.scss#L32-L34>
|
||||
img {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0.4em 0.75em;
|
||||
border: border();
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color: rgba(colorscheme.$base-02, 0.1);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// LISTS
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss>
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L5-L9>
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 2em;
|
||||
|
||||
// Disable the "paragraph" margins for nested lists.
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L17-L46>
|
||||
& & {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L52-L54>
|
||||
li {
|
||||
margin-top: $paragraph-spacing * 0.25;
|
||||
margin-bottom: $paragraph-spacing * 0.25;
|
||||
}
|
||||
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L59-L65>
|
||||
dt {
|
||||
margin-top: $paragraph-spacing;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L67-L70>
|
||||
dd {
|
||||
margin-bottom: $paragraph-spacing;
|
||||
margin-left: 0;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
// Apparently not available in Primer? Had to copy from the extracted
|
||||
// production stylesheets.
|
||||
// <https://github.com/primer/css/issues/1149>
|
||||
// <https://gitlab.com/gitlab-org/gitlab/-/blob/7a6e4f24d0d828500a7c7b6eb84973a1b4c35534/app/assets/stylesheets/framework/typography.scss#L403-417>
|
||||
ul > li.task-list-item {
|
||||
list-style-type: none;
|
||||
> input[type='checkbox']:first-child {
|
||||
margin: 0 0.2em 0.25em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
1023
script-resources/markdown2htmldoc/yarn.lock
Normal file
1023
script-resources/markdown2htmldoc/yarn.lock
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue