测试rehype-pretty-code功能

高亮线

在里面放置一个数字范围。

import { getHighlighter } from 'shiki';
 
async function main() {
  const highlighter = await getHighlighter({ theme: 'nord' });
  const html = highlighter.codeToHtml(`console.log('hello')`, { lang: 'js' });
  console.log(html);
}
main();

样式：该线条具有一个属性，可让您通过 CSS 设置样式。<span>data-highlighted-line

按 ID 对突出显示的行进行分组

#在之后放置一个 id 。这样你就可以根据 id 为线条设置不同的颜色或样式。

import { getHighlighter } from 'shiki';
 
async function main() {
  const highlighter = await getHighlighter({ theme: 'nord' });
  const html = highlighter.codeToHtml(`console.log('hello')`, { lang: 'js' });
  console.log(html);
}
main();

样式：该线条具有一个属性，可让您通过 CSS 设置样式。<span>data-highlighted-line-id="<id>"

高亮字符

您可以使用以下任一方式 // ""

  const apple = 1;
  function appleFn = () => {
    return apple + 2;
  }
  if (apple === 9)  {
    return null;
  }

还可以突出显示字符的不同部分：

  const apple = 1;
  const carrot = 3;
  function appleFn = () => {
    return apple + 2 + carrot;
  }
  if (apple === 9)  {
    return null;
  }
  console.log(carrot)

样式：字符通过 CSS接收样式属性。<span>data-highlighted-chars

若要突出显示第三至第五个实例carrot，可以在最后一个之后放置一个数字范围/。仅突出显示的第三至第五个实例carrot以及的任何实例 apple。

   const apple = 1;
    const carrot = 3;
    function appleFn = () => {
      return apple + 2 + carrot;
    }
    if (apple === 9)  {
      return null;
    }
    console.log(carrot)

按 ID 对突出显示的字符进行分组

在字符后放置一个 id #。这样你就可以根据 id 为字符赋予不同的颜色。

const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");

样式：字符通过 CSS接收样式属性。<span>data-chars-id="<id>"

标题

test.tsx

const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");

字幕

在代码块下方添加标题，文本放在双引号 ( "") 内：

const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");

测试一下

function add(a, b) {
  return a + b;
}