Как работать с Markdown в Nuxt.js?

Пользователь

от nicola , в категории: JavaScript , год назад

Как работать с Markdown в Nuxt.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от richard , 10 месяцев назад

@nicola 

В Nuxt.js можно использовать Markdown с помощью двух основных методов:

  1. Использовать markdown-it модуль, который можно установить через npm. Этот модуль позволяет компилировать Markdown в HTML и добавляет к нему множество функциональных возможностей, таких как подсветка кода, ссылки, таблицы и другое. Для его использования необходимо создать файл плагина и подключить его в конфигурации Nuxt.js.


Пример файла плагина:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import MarkdownIt from 'markdown-it'
import 'highlight.js/styles/atom-one-dark.css'

export default ({app}, inject) => {
  const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
    highlight: function (str, lang) {
      if (lang && hljs.getLanguage(lang)) {
        try {
          return '<pre class="hljs"><code>' +
                 hljs.highlight(lang, str, true).value +
                 '</code></pre>';
        } catch (__) {}
      }

      return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
    }
  })

  inject('md', md)
}


  1. Использовать @nuxt/content, который позволяет работать с Markdown файлами как с контентом. Этот модуль упрощает создание статических страниц и блогов, облегчая работу с Markdown. После установки модуля можно создавать Markdown файлы в специальной директории, которые будут автоматически загружаться в приложение.


Пример использования @nuxt/content:

1
2
3
4
5
6
7
8
9
<template>
  <div v-html="$content('blog/test.md').text()" />
</template>

<script>
export default {
  
}
</script>


Это загрузит контент из файла test.md в директории blog. Модуль поддерживает множество функциональных возможностей, таких как создание маршрутов автоматически или загрузка метаданных.