diff --git a/docs/.eleventy.js b/docs/.eleventy.js index 87dc13b5faf..374ab1b93e5 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -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"); @@ -208,7 +208,6 @@ module.exports = function(eleventyConfig) { return generateAlertMarkup("important", tokens, idx); } }) - .use(preWrapperPlugin) .use(lineNumberPlugin) .disable("code"); diff --git a/docs/src/_plugins/md-syntax-highlighter.js b/docs/src/_plugins/md-syntax-highlighter.js index c886043821b..9ae0dcd26cc 100644 --- a/docs/src/_plugins/md-syntax-highlighter.js +++ b/docs/src/_plugins/md-syntax-highlighter.js @@ -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 = ""; @@ -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 `
${result}
`;
-};
-
-/**
- *
- * 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 `${result}
`;
};
/**
@@ -93,15 +79,13 @@ const lineNumberPlugin = (md) => {
const lineNumbersWrapperCode = ` `;
const finalCode = rawCode
- .replace(/<\/div>$/, `${lineNumbersWrapperCode}`)
+ .replace(/<\/pre>\n/, `${lineNumbersWrapperCode}`)
.replace(/"(language-\S*?)"/, '"$1 line-numbers-mode"')
.replace(//, ``)
- .replace(//, ``);
return finalCode;
};
};
module.exports.highlighter = highlighter;
-module.exports.preWrapperPlugin = preWrapperPlugin;
module.exports.lineNumberPlugin = lineNumberPlugin;
diff --git a/docs/src/assets/scss/syntax-highlighter.scss b/docs/src/assets/scss/syntax-highlighter.scss
index 18269425cb1..2b729e5ea4e 100644
--- a/docs/src/assets/scss/syntax-highlighter.scss
+++ b/docs/src/assets/scss/syntax-highlighter.scss
@@ -32,7 +32,7 @@ pre[class*="language-"] {
}
/* Code blocks */
-div[class*="language-"] {
+pre[class*="language-"] {
padding: 1.5rem;
margin: 1.5rem 0;
overflow: auto;
@@ -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-"],
@@ -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;
}
}