Skip to content

Commit

Permalink
docs: optimize code block structure (#16669)
Browse files Browse the repository at this point in the history
* docs: optimize code block structure

* docs: fix ui for firefox

* docs: fix highlighter

* fix: do not escape text code

* Revert "fix: do not escape text code"

This reverts commit 0e5c31e.
  • Loading branch information
chenxsan committed Dec 28, 2022
1 parent 54a7ade commit 4e4049c
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 42 deletions.
3 changes: 1 addition & 2 deletions docs/.eleventy.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const Image = require("@11ty/eleventy-img");
const path = require("path");
const { slug } = require("github-slugger");
const yaml = require("js-yaml");
const { highlighter, preWrapperPlugin, lineNumberPlugin } = require("./src/_plugins/md-syntax-highlighter");
const { highlighter, lineNumberPlugin } = require("./src/_plugins/md-syntax-highlighter");
const {
DateTime
} = require("luxon");
Expand Down Expand Up @@ -208,7 +208,6 @@ module.exports = function(eleventyConfig) {
return generateAlertMarkup("important", tokens, idx);
}
})
.use(preWrapperPlugin)
.use(lineNumberPlugin)
.disable("code");

Expand Down
28 changes: 6 additions & 22 deletions docs/src/_plugins/md-syntax-highlighter.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const loadLanguages = require("prismjs/components/");
* @param {MarkdownIt} md markdown-it
* @param {string} str code
* @param {string} lang code language
* @returns
* @returns {string} highlighted result wrapped in pre
*/
const highlighter = function (md, str, lang) {
let result = "";
Expand All @@ -41,29 +41,15 @@ const highlighter = function (md, str, lang) {
loadLanguages([lang]);
result = Prism.highlight(str, Prism.languages[lang], lang);
} catch (err) {
console.log(err);
console.log(lang, err);
// we still want to wrap the result later
result = md.utils.escapeHtml(str);
}
} else {
result = md.utils.escapeHtml(str);
}

return `<pre><code>${result}</code></pre>`;
};

/**
*
* modified from https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/preWrapper.ts
* @param {MarkdownIt} md
* @license MIT License. See file header.
*/
const preWrapperPlugin = (md) => {
const fence = md.renderer.rules.fence;
md.renderer.rules.fence = (...args) => {
const [tokens, idx] = args;
const lang = tokens[idx].info.trim();
const rawCode = fence(...args);
return `<div class="language-${lang}">${rawCode}</div>`;
};
return `<pre class="language-${lang}"><code>${result}</code></pre>`;
};

/**
Expand Down Expand Up @@ -93,15 +79,13 @@ const lineNumberPlugin = (md) => {
const lineNumbersWrapperCode = `<div class="line-numbers-wrapper" aria-hidden="true">${lineNumbersCode}</div>`;

const finalCode = rawCode
.replace(/<\/div>$/, `${lineNumbersWrapperCode}</div>`)
.replace(/<\/pre>\n/, `${lineNumbersWrapperCode}</pre>`)
.replace(/"(language-\S*?)"/, '"$1 line-numbers-mode"')
.replace(/<code>/, `<code class="language-${lang}">`)
.replace(/<pre>/, `<pre class="language-${lang}">`);

return finalCode;
};
};

module.exports.highlighter = highlighter;
module.exports.preWrapperPlugin = preWrapperPlugin;
module.exports.lineNumberPlugin = lineNumberPlugin;
32 changes: 14 additions & 18 deletions docs/src/assets/scss/syntax-highlighter.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ pre[class*="language-"] {
}

/* Code blocks */
div[class*="language-"] {
pre[class*="language-"] {
padding: 1.5rem;
margin: 1.5rem 0;
overflow: auto;
Expand All @@ -43,6 +43,10 @@ div[class*="language-"] {
[data-theme="dark"] & {
color: var(--color-neutral-100);
}

&.line-numbers-mode {
padding-left: calc(1.5rem + 2.4em + 1.2rem);
}
}

:not(pre) > code[class*="language-"],
Expand Down Expand Up @@ -103,29 +107,21 @@ pre[class*="language-"] {
.line-numbers-wrapper {
position: absolute;
top: 0;
left: 1.5rem;
text-align: right;
padding-top: 1.5rem;
font-size: 1em;
font-family: var(--mono-font), Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
line-height: 1.5;
color: var(--icon-color);
}

.line-number {
user-select: none;
color: var(--icon-color);
display: inline-block;
font-variant-numeric: tabular-nums;
text-align: right;
width: 1.2em;
}

div[class*="language-"].line-numbers-mode {
position: relative;
font-variant-ligatures: none;

pre[class*="language-"] {
padding-left: calc(2.4em + 1.2rem);
margin-top: 0;
margin-bottom: 0;
.line-number {
user-select: none;
color: var(--icon-color);
display: inline-block;
font-variant-numeric: tabular-nums;
text-align: right;
width: 1.2em;
}
}

0 comments on commit 4e4049c

Please sign in to comment.