How to enable code highliting?

[incrypto32]

How to enable code highliting?

[gitpaladin]

First you should install prism npm

npm install prismjs --save

Extend VueMarkdown component, when the source is changed, use Prism to hightligh

// Import prism components whatever you like.
const Prism = require('prismjs/components/prism-core');
require('prismjs/plugins/toolbar/prism-toolbar.js');
require('prismjs/plugins/show-language/prism-show-language.js');
require('prismjs/plugins/line-numbers/prism-line-numbers.js');
require('prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.js');
require('prismjs/components/prism-clike.js');
require('prismjs/components/prism-c.js');
require('prismjs/components/prism-cpp.js');
require('prismjs/components/prism-ini.js');
require('prismjs/components/prism-bash.js');
require('prismjs/components/prism-python.js');
require('prismjs/components/prism-protobuf.js');
require('prismjs/components/prism-json.js');
require('prismjs/components/prism-javascript.js');

// Extended the VueMarkdownBase
import VueMarkdownBase from 'vue-markdown';
VueMarkdownBase.props.anchorAttributes.default = () => ({ target: '_blank' });

Vue.component('VueMarkdown', {
  extends: VueMarkdownBase,

  watch: {
    source: {
      immediate: true,
      handler() {
        // After the content of markdown is rendered, use Prism to hilight the code blocks.
        this.$nextTick(() => Prism.highlightAllUnder(this.$el));
      },
    },
  },
});

The more reasonable solution

Provide a global API to initialize vue-markdown. Something like below:

Vue.use(VueMarkdown, {
  prism:  require('prismjs/components/prism-core')
});

Then use the property prism to highlight code on the next tick inside the component. If the property is not provided, disable highlight feature.