Использование в Vue

Для работы с библиотекой Marked в Vue первым шагом является установка пакета через npm или yarn:

npm install marked

или

yarn add marked

После установки библиотеку можно импортировать в компонент:

import { marked } from 'marked';

Преобразование Markdown в HTML

Метод marked() принимает строку с Markdown-разметкой и возвращает HTML. В компоненте Vue это можно использовать, например, внутри вычисляемого свойства:

export default {
  data() {
    return {
      markdownText: '# Пример заголовка\n\nЭто **важный** текст.'
    };
  },
  computed: {
    renderedHtml() {
      return marked(this.markdownText);
    }
  }
};

В шаблоне Vue HTML можно вставлять через директиву v-html:

Настройка опций Marked

Библиотека предоставляет множество опций для управления парсингом Markdown:

marked.setOptions({
  gfm: true,               // Включение GitHub Flavored Markdown
  breaks: true,            // Перенос строк
  smartLists: true,        // Умные списки
  smartypants: true,       // Замена прямых кавычек на типографские
  headerIds: true,         // Генерация id для заголовков
  mangle: false            // Не искажать email в ссылках
});

Эти параметры можно устанавливать глобально через marked.setOptions, либо локально для отдельных вызовов:

const html = marked(this.markdownText, { gfm: false, breaks: true });

Создание пользовательских рендереров

Marked позволяет определять собственное поведение при генерации HTML с помощью класса Renderer:

const renderer = new marked.Renderer();

renderer.link = (href, title, text) => {
  return `${text}`;
};

const html = marked(this.markdownText, { renderer });

Это особенно полезно для Vue-проектов, где требуется контролировать безопасность и внешний вид ссылок, изображений или заголовков.

Интеграция с компонентом Vue

Для динамического отображения Markdown можно создать отдельный компонент:

Использование:

Такой подход позволяет переиспользовать компонент в разных частях приложения.

Безопасность при рендеринге HTML

Markdown может содержать опасный HTML-код. Для защиты используется библиотека DOMPurify:

npm install dompurify

Пример применения вместе с Marked:

import DOMPurify from 'dompurify';
import { marked } from 'marked';

export default {
  computed: {
    safeHtml() {
      const rawHtml = marked(this.source);
      return DOMPurify.sanitize(rawHtml);
    }
  }
};

Это предотвращает XSS-атаки и делает вставку Markdown в Vue безопасной.

Использование с двухсторонней привязкой

Markdown часто редактируется пользователем через textarea. Пример привязки:



export default {
  data() {
    return {
      markdownText: ''
    };
  },
  computed: {
    renderedHtml() {
      return marked(this.markdownText);
    }
  }
};

Изменения в textarea сразу отражаются на HTML.

Интеграция с Vue 3 Composition API

С использованием Composition API рендеринг Markdown можно оформить через ref и computed:

import { ref, computed } from 'vue';
import { marked } from 'marked';

export default {
  setup() {
    const markdownText = ref('# Заголовок\nТекст с **жирным** стилем');

    const htmlContent = computed(() => marked(markdownText.value));

    return { markdownText, htmlContent };
  }
};

Шаблон:

Поддержка синтаксиса GitHub Flavored Markdown

Опции gfm, tables и breaks позволяют корректно отображать таблицы, списки задач и переносы строк:

marked.setOptions({
  gfm: true,
  tables: true,
  breaks: true
});

Пример Markdown:

- [x] Задача выполнена
- [ ] Задача в процессе

Рендеринг в HTML:

    
  
  •  Задача выполнена
    • 
  
  •  Задача в процессе
    •

Поддержка синтаксиса кода

Для подсветки синтаксиса можно использовать совместно с библиотекой highlight.js:

npm install highlight.js

Настройка Marked:

import hljs from 'highlight.js';
import { marked } from 'marked';

marked.setOptions({
  highlight: function(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(code, { language: lang }).value;
    }
    return hljs.highlightAuto(code).value;
  }
});

Markdown:

```javascript
console.log('Hello Vue');

Рендеринг автоматически подсветит код соответствующими стилями.
Оглавление