Add an example of using with Prism.js

[dominik-korsa]

Hi! I've been trying to add Syntax Highlighting to my app, but I haven't found any resources describing how you are supposed to do this.

Could you show me an example of using this vue-markdown with Prism.js (or any other syntax highlighter)? I also think it would be a great idea to add an example to the README.md file.

[0w0zzzzzz]

I add it by referenced to #21

<template>
    <textarea v-model="input"></v-textarea>
    <vue-markdown :source="input" @rendered="update"></vue-markdown>
</template>

<script>
import VueMarkdown from "vue-markdown";
import Prism from "prismjs";
import "prismjs/themes/prism-okaidia.css";  // theme
import 'prismjs/components/prism-go.min';  // language

export default {
  components: {
    VueMarkdown
  },
  data: () => ({
    input: `\`\`\`go
    func test() int {
      return 0
    }
    \`\`\``
  }),
  methods: {
    update: function() {
      this.$nextTick(() => {
        Prism.highlightAll();
      });
    }
  }
};
</script>

And you may check whether prism-language.js extend other language like cpp. I haven't tried babel-plugin-prismjs to configure Prism. You can test it if you want a lot of language and line number.

[dominik-korsa]

Thank you very much! I also recommend you add an example and explanation to README.md for other people.

[dib-nhnl]

I tried babel-plugin-prismjs

in babel.config.js:

  "plugins": [
    ["prismjs", {
      "languages": ["javascript", "css", "markup", "json"],
      "plugins": ["line-numbers"],
      "theme": "okaidia",
      "css": true
    }]
]

It will be smarter, there is no need to have :

import "prismjs/themes/prism-okaidia.css";  // theme
import 'prismjs/components/prism-go.min';  // language

in your vue component, and more configurable.

[jaysalvat]

Hello.

The best solution to me was to create a wrapper component. Eg: MyMarkdown.vue

<template>
  <VueMarkdown v-bind="$props" />
</template>

<script>
  import VueMarkdown from 'vue-markdown'
  import Prism from 'prismjs'
  import 'prismjs/themes/prism-dark.css'

  export default {
    components: {
      VueMarkdown
    },

    props: {
      ...VueMarkdown.props,
      emoji: {
        default: false,
        type: Boolean
      },
      html: {
        default: false,
        type: Boolean
      }
    },

    mounted() {
      this.$nextTick(() => {
        Prism.highlightAll()
      });
    }
  }
</script>

And use this wrapper <MyMarkdown /> instead of VueMarkdown in other components.

Hope it helps.