@scalar/code-highlight 0.3.4 → 0.3.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @scalar/code-highlight
 
+## 0.3.6
+
+### Patch Changes
+
+- [#9508](https://github.com/scalar/scalar/pull/9508): Fix Python code samples appearing mostly unstyled by highlighting function and method call sites
+- [#9506](https://github.com/scalar/scalar/pull/9506): Add Scalar scrollbar styling to highlighted Markdown code blocks.
+
+## 0.3.5
+
+### Patch Changes
+
+- [#9451](https://github.com/scalar/scalar/pull/9451): Bundle runtime dependencies into the build so CommonJS-only packages (like `extend` and `debug`) no longer leak to consumers and break Vite dev under pnpm
+
 ## 0.3.4
 
 ### Patch Changes

package/dist/chunks/code.js

@@ -0,0 +1,124 @@
+import { i as lowlightLanguageMappings, t as rehypeHighlight } from "./rehype-highlight.js";
+import { n as rehypeStringify, s as rehypeParse, t as unified } from "./lib.js";
+import { t as visit } from "./lib2.js";
+//#region src/code/line-numbers.ts
+function isText(element) {
+	return element?.type === "text";
+}
+function isElement(node) {
+	return node?.type === "element";
+}
+function textElement(value) {
+	return {
+		type: "text",
+		value
+	};
+}
+function lineBreak() {
+	return {
+		type: "text",
+		value: "\n"
+	};
+}
+/**
+* Adds lines to code blocks
+*/
+function codeBlockLinesPlugin() {
+	return (tree) => {
+		visit(tree, "element", (node, _i, parent) => {
+			if (parent?.type === "element" && parent.tagName === "pre" && node.tagName === "code") {
+				let numLines = 0;
+				node.children = addLines(node);
+				node.children.forEach((child) => {
+					if (child.type === "element" && child.tagName === "span") {
+						const lastChild = child.children[child.children.length - 1];
+						if (lastChild && (!isText(lastChild) || isText(lastChild) && !hasLineBreak(lastChild))) {
+							child.children.push(lineBreak());
+							numLines++;
+						}
+					}
+				});
+				node.properties.style = [`--line-count: ${numLines};`, `--line-digits: ${numLines.toString().length};`];
+			}
+		});
+	};
+}
+/**
+* Adds lines to a node recursively and returns them
+*
+* @param node - The node to add lines to
+* @param lines - The current lines
+* @param copyParent - Whether to copy the parent node to save the original node styles
+*/
+function addLines(node, lines = [], copyParent) {
+	const line = () => lines[lines.length - 1] ?? (lines.push(createLine()) && lines[lines.length - 1] || void 0);
+	node.children.forEach((child) => {
+		if (isText(child) && hasLineBreak(child)) {
+			const split = child.value.split(/\n/);
+			split.forEach((content, i) => {
+				if (copyParent) line()?.children.push({
+					...node,
+					children: [textElement(content)]
+				});
+				else line()?.children.push(textElement(content));
+				i !== split.length - 1 && lines.push(createLine());
+			});
+		} else if (isElement(child) && child.children.some(hasLineBreak)) addLines(child, lines, true);
+		else line()?.children.push(child);
+	});
+	return lines;
+}
+/**
+* Creates a new line element
+*
+* @param children - The children the line should have initially
+*/
+function createLine(...children) {
+	return {
+		type: "element",
+		tagName: "span",
+		properties: { class: ["line"] },
+		children
+	};
+}
+/**
+* Checks if a node has a line break
+*
+* @param node - The node to check
+*/
+function hasLineBreak(node) {
+	return isText(node) && /\r?\n/.test(node.value) || isElement(node) && node.children.some(hasLineBreak);
+}
+//#endregion
+//#region src/code/highlight.ts
+/**
+* Syntax highlights a code string using the `rehype-highlight` library.
+*/
+function syntaxHighlight(codeString, options) {
+	const credentials = (typeof options?.maskCredentials === "string" ? [options.maskCredentials] : options?.maskCredentials ?? []).filter((c) => {
+		if (c.length < 3) return false;
+		return true;
+	});
+	const className = `language-${lowlightLanguageMappings[options.lang] ?? options.lang}`;
+	const nullPlugin = (() => {});
+	const htmlString = unified().use(rehypeParse, { fragment: true }).use(injectRawCodeStringPlugin(codeString)).use(rehypeHighlight, { languages: options.languages }).use(options?.lineNumbers ? codeBlockLinesPlugin : nullPlugin).use(rehypeStringify).processSync(`<pre><code class="${className}"></code></pre>`).toString();
+	return credentials.length ? credentials.reduce((acc, credential) => acc.split(credential).join(`<span class="credential"><span class="credential-value">${credential}</span></span>`), htmlString) : htmlString;
+}
+/**
+* To prevent unified from parsing any content of the code string we inject
+* it as a raw text node into the AST tree as a child of the code element
+*/
+function injectRawCodeStringPlugin(rawCodeString) {
+	return () => (tree) => {
+		visit(tree, "element", (node) => {
+			if (node.tagName === "code") node.children.push({
+				type: "text",
+				value: rawCodeString
+			});
+		});
+	};
+}
+//#endregion
+export { syntaxHighlight as t };
+
+//# sourceMappingURL=code.js.map

package/dist/chunks/code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.js","names":[],"sources":["../../src/code/line-numbers.ts","../../src/code/highlight.ts"],"sourcesContent":["import type { Element, ElementContent, Root, Text } from 'hast'\nimport { visit } from 'unist-util-visit'\n\n// ---------------------------------------------------------------------------\n// Line Numbering plugin\n\nfunction isText(element?: ElementContent): element is Text {\n  return element?.type === 'text'\n}\n\nfunction isElement(node?: ElementContent): node is Element {\n  return node?.type === 'element'\n}\n\nfunction textElement(value: string): Text {\n  return { type: 'text', value }\n}\n\nfunction lineBreak(): Text {\n  return { type: 'text', value: '\\n' }\n}\n\n/**\n * Adds lines to code blocks\n */\nexport function codeBlockLinesPlugin() {\n  return (tree: Root) => {\n    visit(tree, 'element', (node: Element, _i, parent: Root | Element | null) => {\n      if (parent?.type === 'element' && parent.tagName === 'pre' && node.tagName === 'code') {\n        let numLines = 0\n\n        // Wraps each line in a span\n        node.children = addLines(node)\n\n        // Adds a line break to the end of each line\n        node.children.forEach((child: ElementContent) => {\n          if (child.type === 'element' && child.tagName === 'span') {\n            const lastChild: ElementContent | undefined = child.children[child.children.length - 1]\n\n            if (lastChild && (!isText(lastChild) || (isText(lastChild) && !hasLineBreak(lastChild)))) {\n              child.children.push(lineBreak())\n              numLines++\n            }\n          }\n        })\n\n        // We need to maintain a count of the total lines to allow space for the labels\n        node.properties.style = [`--line-count: ${numLines};`, `--line-digits: ${numLines.toString().length};`]\n      }\n    })\n\n    // console.log('NUMBER OF LINES IS: ', numLines)\n  }\n}\n\n/**\n * Adds lines to a node recursively and returns them\n *\n * @param node - The node to add lines to\n * @param lines - The current lines\n * @param copyParent - Whether to copy the parent node to save the original node styles\n */\nfunction addLines(node: Element, lines: Element[] = [], copyParent?: boolean): Element[] {\n  const line = () => lines[lines.length - 1] ?? ((lines.push(createLine()) && lines[lines.length - 1]) || undefined)\n\n  node.children.forEach((child: ElementContent) => {\n    if (isText(child) && hasLineBreak(child)) {\n      const split: string[] = child.value.split(/\\n/)\n\n      split.forEach((content: string, i: number) => {\n        if (copyParent) {\n          line()?.children.push({ ...node, children: [textElement(content)] })\n        } else {\n          line()?.children.push(textElement(content))\n        }\n\n        i !== split.length - 1 && lines.push(createLine())\n      })\n    } else if (isElement(child) && child.children.some(hasLineBreak)) {\n      addLines(child, lines, true)\n    } else {\n      line()?.children.push(child)\n    }\n  })\n\n  return lines\n}\n\n/**\n * Creates a new line element\n *\n * @param children - The children the line should have initially\n */\nfunction createLine(...children: ElementContent[]): Element {\n  return {\n    type: 'element',\n    tagName: 'span',\n    properties: { class: ['line'] },\n    children,\n  }\n}\n\n/**\n * Checks if a node has a line break\n *\n * @param node - The node to check\n */\nfunction hasLineBreak(node: ElementContent): boolean {\n  return (isText(node) && /\\r?\\n/.test(node.value)) || (isElement(node) && node.children.some(hasLineBreak))\n}\n","import type { Element, Root } from 'hast'\nimport type { LanguageFn } from 'highlight.js'\nimport rehypeParse from 'rehype-parse'\nimport rehypeStringify from 'rehype-stringify'\nimport { type Plugin, unified } from 'unified'\nimport { visit } from 'unist-util-visit'\n\nimport { lowlightLanguageMappings } from '@/constants'\nimport { rehypeHighlight } from '@/rehype-highlight'\n\nimport { codeBlockLinesPlugin } from './line-numbers'\n\n/**\n * Syntax highlights a code string using the `rehype-highlight` library.\n */\nexport function syntaxHighlight(\n  codeString: string,\n  options: {\n    lang: string\n    languages: Record<string, LanguageFn>\n    lineNumbers?: boolean\n    maskCredentials?: string | string[]\n  },\n) {\n  // Simple restriction on credentials to prevent unexpected behavior\n  const credentials = (\n    typeof options?.maskCredentials === 'string' ? [options.maskCredentials] : (options?.maskCredentials ?? [])\n  ).filter((c) => {\n    // Credentials must be at least 3 characters to mask.\n    if (c.length < 3) {\n      return false\n    }\n\n    return true\n  })\n\n  // Classname is used by lowlight to select the language model\n  const className = `language-${lowlightLanguageMappings[options.lang] ?? options.lang}`\n\n  // biome-ignore lint/suspicious/noEmptyBlockStatements: empty plugin\n  const nullPlugin = (() => {}) satisfies Plugin\n\n  const html = unified()\n    // Parses markdown\n    .use(rehypeParse, { fragment: true })\n    // Raw code string must be injected after initial hast parsing\n    // so that HTML code is not parsed into the hast tree\n    .use(injectRawCodeStringPlugin(codeString))\n    // Syntax highlighting\n    .use(rehypeHighlight, {\n      languages: options.languages,\n    })\n    .use(options?.lineNumbers ? codeBlockLinesPlugin : nullPlugin)\n    // Converts the HTML AST to a string\n    .use(rehypeStringify)\n    // Run the pipeline\n    .processSync(`<pre><code class=\"${className}\"></code></pre>`)\n\n  const htmlString = html.toString()\n\n  // Replace any credentials with a wrapper element\n  return credentials.length\n    ? credentials.reduce(\n        (acc, credential) =>\n          acc\n            .split(credential)\n            .join(`<span class=\"credential\"><span class=\"credential-value\">${credential}</span></span>`),\n        htmlString,\n      )\n    : htmlString\n}\n\n/**\n * To prevent unified from parsing any content of the code string we inject\n * it as a raw text node into the AST tree as a child of the code element\n */\nfunction injectRawCodeStringPlugin(rawCodeString: string) {\n  return () => (tree: Root) => {\n    visit(tree, 'element', (node: Element) => {\n      if (node.tagName === 'code') {\n        node.children.push({\n          type: 'text',\n          value: rawCodeString,\n        })\n      }\n    })\n  }\n}\n"],"mappings":"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"}