Add support for line highlights

Author: Chalarangelo

content/snippets/demo/s/test-snippet.md

@@ -96,7 +96,13 @@ This is a code block without a language. It doesn't appear very often, yet it's
 Let's also ensure lines wrap on their, as needed. Might come in handy!
 ```
 
-#### No language, yes title
+### Titles
+
+```js title="This is a title"
+const x = 'this is a title';
+```
+
+#### Without language
 
 ```text title="No language"
 No languge here
@@ -112,6 +118,15 @@ No languge here
 }
 ```
 
+### Highlighted lines
+
+```js {1} {3-4}
+const x = 10;
+x += 5;
+const y = 20;
+console.log(x + y);
+```
+
 ## Other elements
 
 There's a few more elements and some cases we should cover just to be safe.

src/astro/styles/_code.scss

@@ -92,6 +92,10 @@ pre {
     min-height: calc(var(--line-height-normal) * 1em);
     // Apply the layout bleed for the inline padding.
     padding-inline: var(--layout-bleed-width);
+
+    &[data-line-highlight='true'] {
+      background-color: var(--color-code-background-light);
+    }
   }
 }
 

src/lib/contentUtils/markdownParser/codeHighlighters/shiki.js

@@ -7,6 +7,7 @@ import { createOnigurumaEngine } from '@shikijs/engine-oniguruma';
 
 import { transformerColorizedBrackets } from '@shikijs/colorized-brackets';
 import { transformerColorSwatches } from './transformers/colorSwatches.js';
+import { transformerLineHighlights } from './transformers/lineHighlights.js';
 
 const loadBundledThemes = () => {
   return {
@@ -65,12 +66,13 @@ export default class ShikiHighlighter {
     return 'shiki';
   }
 
-  static async highlightCode(code, language) {
+  static async highlightCode(code, language, metadata) {
     const highlightedCode = await this.codeToHtml(code, {
       lang: language,
       theme: 'cosmos',
       transformers: [
         transformerColorSwatches(),
+        transformerLineHighlights(metadata),
         transformerColorizedBrackets({
           themes: {
             cosmos: [

src/lib/contentUtils/markdownParser/codeHighlighters/transformers/lineHighlights.js

@@ -0,0 +1,21 @@
+/**
+ * Transforms `.line`s in the code block by adding the appropriate properties
+ * to their nodes, if they are highlighted.
+ */
+export const transformerLineHighlights = ({
+  highlightedLines = new Set(),
+} = {}) => {
+  return {
+    name: 'line-higlights',
+    line(node, line) {
+      // Skip if there are no highlighted lines.
+      if (!highlightedLines.size) return node;
+
+      // If the line is highlighted, we need to add a data attribute to the
+      // node, so that we can style it with CSS.
+      if (highlightedLines.has(line)) {
+        node.properties['data-line-highlight'] = 'true';
+      }
+    },
+  };
+};

src/lib/contentUtils/markdownParser/codeHighlighters/utils/metaParser.js

@@ -263,3 +263,18 @@ export const getMetaByKey = (meta, key) => {
   const result = meta.find(item => item.key === key);
   return result ?? null;
 };
+
+export const getMetaString = (meta, key) => {
+  const result = meta.find(item => item.key === key && item.type === 'string');
+  return result ?? null;
+};
+
+export const getMetaRanges = (meta, key) => {
+  const ranges = meta.filter(item => item.key === key && item.type === 'range');
+  const allRangeValues = ranges.reduce((acc, item) => {
+    acc.push(...item.value);
+    return acc;
+  }, []);
+
+  return new Set(allRangeValues);
+};

src/lib/contentUtils/markdownParser/plugins/ast/highlightCode.js

@@ -1,7 +1,8 @@
 import { visit } from 'unist-util-visit';
 import {
   parseMeta,
-  getMetaByKey,
+  getMetaString,
+  getMetaRanges,
 } from '#src/lib/contentUtils/markdownParser/codeHighlighters/utils/metaParser.js';
 
 // Parse the language and title from the language string. Only supports
@@ -20,10 +21,11 @@ import {
 const createMetadataExtractor = languages => node => {
   const languageName = node.lang || 'text';
   const meta = parseMeta(node.meta || '');
-  const title = getMetaByKey(meta, 'title')?.value || null;
+  const title = getMetaString(meta, 'title')?.value || null;
   const languageStringLiteral = languages[languageName] || '';
+  const highlightedLines = getMetaRanges(meta, null);
 
-  return { languageName, title, languageStringLiteral };
+  return { languageName, title, languageStringLiteral, highlightedLines };
 };
 
 /**
@@ -93,7 +95,7 @@ export const highlightCode = ({ grammars, codeHighlighter }) => {
       const { languageName } = metadata;
 
       const promise = codeHighlighter
-        .highlightCode(node.value, languageName)
+        .highlightCode(node.value, languageName, metadata)
         .then(highlightedCode => {
           node.type = `html`;
           node.value = wrapHighlightedCode(highlightedCode, attributes);