Учебники Svelte Markdown, которые я видел, предполагают, что у вас есть доступ к .md файл или пишут Markdown непосредственно в предварительно обработанном файле.

Что, если вы хотите отрендерить необработанный нить что содержит Уценка? Пример использования: вам нужна гибкость, позволяющая обслуживать контент Markdown из CMS (например, Штаммы) без внесения изменений в .md файл.

Есть несколько способов добиться этого, в этом решении мы будем использовать mdsvex чтобы преобразовать Markdown в формат HTML, а затем отобразить этот HTML. mdsvex это препроцессор Markdown, который по сути является оболочкой для многомерные выражениячто делает его совместимым со Svelte.

Монтаж

Если вы не используете SvelteKitпроверьте Документы MDsveX для альтернативных установок, если вы находятся:

Начните с установки его как dev-зависимости.

npm i --save-dev mdsvex
Войти в полноэкранный режим

Выйти из полноэкранного режима

или же…

yarn add --dev mdsvex
Войти в полноэкранный режим

Выйти из полноэкранного режима

Затем обновите конфигурацию Svelte, чтобы включить extensions множество:

(Мы просто будем использовать .svelte файл, но вы также можете включить такие расширения, как .svx если вы планируете использовать эти типы файлов)

svelte.config.js

export default {
  preprocess: [
    // your existing config
  ],

  extensions: ['.svelte'], // Add this

  kit: {
    // your existing config...
  }
};
Войти в полноэкранный режим

Выйти из полноэкранного режима

Это все настройки, которые нам нужны на данный момент. ☑️

Передача скомпилированной строки в компонент

Давайте настроим загрузчик маршрутов, который имитирует получение данных из API:

+page.server.ts

import type { Load } from '@sveltejs/kit';

const MOCK_RESPONSE_FROM_API = `
## Lorem

Lorem is currently extended with the following plugins.
Instructions on how to use them in your application are linked below.

| Plugin | README |
| ------ | ------ |
| Dropbox | [plugins/dropbox/README.md](Link) |
| Medium | [plugins/medium/README.md](Link) |
| Google Analytics | [plugins/googleanalytics/README.md](Link) |
`;

export const load: Load = async () => {
    const response = MOCK_RESPONSE_FROM_API; // Get data with eg. `fetch`

    return response;
};
Войти в полноэкранный режим

Выйти из полноэкранного режима

Далее мы можем импортировать compile функция от mdsvexобъявить переменную, передающую (макет) response в него и верните его, чтобы он был доступен в нашем компоненте. Мы также зарегистрируем его, чтобы увидеть, что возвращается из compile:

+page.server.ts

import { compile } from 'mdsvex';
// ...
const compiledResponse = await compile(response);

console.log('compiledResponse is: ', compiledResponse);

return compiledResponse;
// ...
Войти в полноэкранный режим

Выйти из полноэкранного режима

консольный вывод (Учитывая, что это выполняется на стороне сервера, его можно просмотреть на терминале, а не в консоли браузера)

Консольный вывод из компиляции

Как видите, Markdown был скомпилирован в то, что выглядит как формат строки HTML, с добавлением + оператора, под ключ code.

Таким образом, мы можем обновить оператор return, чтобы он включал только то, что нам нужно:

+page.server.ts

export const load: Load = async () => {
    const res = MOCK_RESPONSE_FROM_API; // Get data with eg. `fetch`
    const compiledResponse = await compile(res);

    return { content: compiledResponse?.code };
};
Войти в полноэкранный режим

Выйти из полноэкранного режима

Рендеринг HTML непосредственно в компоненте

Теперь из нашего компонента все, что нам нужно сделать, это получить data через export letи визуализируйте его.

Обычно строки вставляются как обычный текст, а это означает, что такие символы, как < и >, не имеют специального значения. Итак, учитывая, что теперь у нас есть HTML, который мы хотим отображать напрямую, мы можем использовать HTML-теги:

<p>{@html string}</p>
Войти в полноэкранный режим

Выйти из полноэкранного режима

так что в нашем случае…

+page.svelte

<script lang="ts">
    export let data = {
        content: ''
    };
</script>

<div>{@html data.content}</div>
Войти в полноэкранный режим

Выйти из полноэкранного режима

Что дает нам нашу обработанную Markdown 🪄:

Визуализированная уценка

Примечание из документов:

Svelte не очищает выражения перед внедрением HTML. Если данные поступают из ненадежного источника, вы должны их очистить, иначе вы подвергаете своих пользователей XSS-уязвимости.

Дальнейшая настройка

compile метод принимает второй параметр, options:

interface MdsvexOptions {
    extensions: string[];
    smartypants: boolean | smartypantsOptions;
    layout: string | { [name: string]: string };
    remarkPlugins: Array<plugin> | Array<[plugin, plugin_options]>;
    rehypePlugins: Array<plugin> | Array<[plugin, plugin_options]>;
    highlight: { highlighter: Function, alias: { [alias]: lang } };
    frontmatter: { parse: Function; marker: string };
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Это означает, что вы можете преобразовать свой HTML с помощью таких инструментов, как повторно рекламировать или же замечание. Вы можете узнать больше о доступных опциях здесь.

Вот и все! 👨‍💻

Если вам нужна дополнительная информация по вышеизложенному или что-то еще связанное — ознакомьтесь с документы SvelteKit, MDX-документы или официальный Стройный диссонанс.