Я пытаюсь добавить shikiji-transformers в свой астропроект. Что бы я ни пытался сделать, я не могу заставить пример работать.
export function foo() {
console.info('Highlighted') // [!code highlight]
}
Мне нужны следующие зависимости:
"dependencies": {
"@astrojs/mdx": "^2.1.1",
"astro": "^4.4.0",
"astro-compress": "^2.2.10",
"shikiji-transformers": "^0.10.2",
}
И следующий конфиг:
import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import * as transformers from 'shikiji-transformers';
const isProduction = process.env.NODE_ENV === 'production';
// https://astro.build/config
export default defineConfig({
site: "https://www.sanderboer.nl/",
prefetch: true,
markdown: {
syntaxHighlight: "shiki",
shikiConfig: {
// https://docs.astro.build/en/guides/markdown-content/#shiki-configuration
// https://shikiji.netlify.app/packages/transformers
transformers: Object.values(transformers)
},
},
integrations: [
mdx(),
],
});
Я использую конфигурацию, как описана в астродокументации, но безуспешно.
В отрендеренном выводе я получаю
так и есть, но строка console.info('Highlighted') не выделена так, как должна быть





Вам необходимо импортировать найденный в документации преобразователь и передать его в конфиг:
import { defineConfig } from "astro/config";
import { transformerNotationHighlight } from 'shikiji-transformers';
export default defineConfig({
markdown: {
syntaxHighlight: "shiki",
shikiConfig: {
// https://docs.astro.build/en/guides/markdown-content/#shiki-configuration
// https://shikiji.netlify.app/packages/transformers
transformers: [
transformerNotationHighlight()
],
},
},
});
Спасибо! Я неправильно прочитал документацию, и мне все равно нужно было вызвать преобразователь вместо того, чтобы «просто» передавать их в массив.
Я столкнулся с этой проблемой, и решение здесь не помогло мне.
Кажется, пакет Shiki не назначает классы тегам pre и span фрагментов кода там, где это необходимо (Shiki предназначен для добавления класса, который вы затем можете стилизовать, например, выделяя строку кода или показывая удаленный и добавленный код. .)
В конце концов я обнаружил лучший пакет, который намного проще в использовании. Название Экспрессивный Код.
не уверен, что понимаю. опубликованный вами снимок экрана с отрисованным выводом выделен синтаксисом?