Open incrypto32 opened 4 years ago
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));
},
},
},
});
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.
The documentation only mentions code highlighting needs Prism.But how can i configure it?