Блог

Главная - Вопросы по программированию - Как использовать плагин для библиотеки markdown-it-vue?

Как использовать плагин для библиотеки markdown-it-vue?

#vue.js #markdown

Вопрос:

Я использую markdown vue, который является плагином для vue. В нем говорится, что в него должны быть встроены функции верхнего и нижнего индексов, однако, когда я запускаю код для нижнего индекса, я получаю что-то похожее на это

   y = x b   e
   i   i     i

Чтобы иметь эту функциональность, я пытаюсь использовать этот плагин, но мне трудно понять, как он должен быть зарегистрирован в глобальном масштабе с MarkdownItVue помощью плагина. Я пытался это сделать…

 import MarkdownItVue from 'markdown-it-vue'
import MarkdownItSub from 'markdown-it-sub'

MarkdownItVue.use(MarkdownItSub)
Vue.use(MarkdownItVue)

Но это работает…

Я тоже рад изменить подходы, если есть более простое решение для MarkdownItVue

Обновить

index.html

 <!DOCTYPE html>
<head>
    <title>Hello World</title>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script src="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.umd.min.js"></script>
    
    <div id="app">
        <div>
            {{ msg }}
        </div>
        <markdown-it-vue :content="msg" class="md-body"></markdown-it-vue>
    </div>
    <script src="app.js"></script>
</body>

app.js

 new Vue ({
    el: '#app',
    data() {
        return {
            msg: "$y_i = x_i   \epsilon_i$"
        }
    }
})

Комментарии:

1. Все еще нет ответа на этот вопрос? Я пытаюсь использовать «markdown-it-attrs» в сочетании с этой библиотекой, но я не могу заставить ее работать.

2. В итоге я выбрал React, потому что он хорошо работает, но я думаю, что ответ, предоставленный @MichaelLevy, должен быть тем, что вы ищете

Ответ №1:

Похоже, по умолчанию он работает просто отлично. Смотрите пример.

В любом случае из документов видно, что если вам нужно установить дополнительные markdown-it плагины, это нужно сделать на экземпляре компонента

 const vm = new Vue({
  el: "#app",
  data() {
    return {
      content: "H~2~0 - 29^th^"
    }
  }
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.css">

<div id="app">
 <markdown-it-vue :content="content">
 </markdown-it-vue>
</div>

Комментарии:

1. Я сделал обновление, я все еще не вижу, чтобы оно отображалось так, как я ожидал

2. Я не могу использовать import здесь на SO в выполняемых примерах, поэтому мне приходится использовать <script> теги для импорта библиотек. Но это не важно (и это не то, что вы должны делать). Дело в том, что рендеринг работает так, как ожидалось (пример выполнения = доказательство), так что, возможно, проблема в синтаксисе MD, который вы используете. Смотрите мои ( H~2~0 - 29^th^ ) и ваши. Ваш даже не работает на онлайн- площадке

Ответ №2:

Для рендеринга в латексе требуется таблица стилей из markdown-it-vue . Убедитесь, что вы включаете его в качестве <link> :

 <link rel="stylesheet" href="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.css">
 
 new Vue({
  el: "#app",
  data() {
    return {
      content: "$y_i = x_i   \epsilon_i$"
    }
  }
}) 
 <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.css">

<div id="app">
  <markdown-it-vue class="md-body" :content="content"></markdown-it-vue>
</div>

Или импортировать файл из markdown-it-vue/dist/markdown-it-vue.css :

ДЕМОНСТРАЦИЯ

Комментарии:

1. Я не знаю, но результат этого кажется очень похожим на результат, о котором идет речь (который ОП не понравился)

2. Да, это возможно. Однако строка после этого примера гласит: In order to have this functionality, I'm trying to use this plugin . Может быть, он действительно хочет этого, но не видел этого, поэтому он попробовал этот плагин.

Метки: