vue-highlight.js v3.1.0
Vue Highlight.js
š Highlight.js syntax highlighter component for Vue.
āļø Installation
Via npm:
npm install highlight.js vue-highlight.js
Or Yarn:
yarn add highlight.js vue-highlight.js
š¬ Demo
Go to https://gluons.github.io/vue-highlight.js
š Usage
Main file:
import Vue from 'vue';
import VueHighlightJS from 'vue-highlight.js';
// Highlight.js languages
import javascript from 'highlight.js/lib/languages/javascript';
import vue from 'vue-highlight.js/lib/languages/vue';
/*
* Import Highlight.js theme
* Find more: https://highlightjs.org/static/demo/
*/
import 'highlight.js/styles/default.css';
import App from './App';
/*
* Use Vue Highlight.js
*/
Vue.use(VueHighlightJS, {
// Register only languages that you want
languages: {
javascript,
vue
}
});
new Vue({
el: '#app',
render: h => h(App)
});
Vue file:
<template>
<div id="app">
<!-- Code Block -->
<highlight-code lang="javascript">
let str = 'Hello, World!';
console.log(str);
</highlight-code>
<!-- Inline Code Block -->
<highlight-code lang="javascript" inline>alert('Hello, World!');</highlight-code>
</div>
</template>
<script>
// JavaScript...
</script>
<style>
/* StyleSheet... */
</style>
ā Plugin Options
languages
Type: { [name: string]: HLJSLang }
Default: {}
Highlight.js languages.
Add the languages that you want to use here.
name
is the name of language to register with Highlight.js' registerLanguage(name, language)
API.
See https://github.com/isagalaev/highlight.js#commonjs about importing each language from highlight.js.
š API
<highlight-code>
Highlight.js code block.
š° Slots
Static code content.
š° Properties
lang
Type: String
Highlight.js language.
inline
Type: Boolean
Default: false
Enable inline code block when set it to true
.
code
Type: String
Code content in code block.
You can use this prop if you want to bind code content to your data source.
It's useful for dynamic code content.
Component will ignore slot
static content if you use this.
auto
Type: Boolean
Enable auto detecting code language.
Code will be detected by highlight.js'
highlightAuto
function.
Component will ignore lang
prop if you use this.
ā FAQ
How to write HTML code inside slot?
You have to escape all HTML tags before add it into slot.
If you didn't do that, browser will interpret those tags as HTML element.
ā¹ļø See isagalaev/highlight.js#866If you use
code
property instead ofslot
, you don't need to worry about this.
Vue Highlight.js will automatically escape it for you.Why did I get
SyntaxError: Unterminated template literal
error when used<script></script>
incode
property?If you add
</script>
at anywhere insidescript
tag, although it's astring
inside quotes, it will always close thescript
tag.
ā¹ļø See "Unterminated template literal" syntax error when literal contains script tag
3 years ago
3 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago