Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gluons/vue-highlight.js
đ Highlight.js syntax highlighter component for Vue.
https://github.com/gluons/vue-highlight.js
hacktoberfest highlight highlightjs syntax vue vue-component vuejs
Last synced: about 23 hours ago
JSON representation
đ Highlight.js syntax highlighter component for Vue.
- Host: GitHub
- URL: https://github.com/gluons/vue-highlight.js
- Owner: gluons
- License: mit
- Created: 2017-02-22T02:01:36.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-04-15T08:43:48.000Z (over 3 years ago)
- Last Synced: 2024-04-14T04:49:01.913Z (7 months ago)
- Topics: hacktoberfest, highlight, highlightjs, syntax, vue, vue-component, vuejs
- Language: TypeScript
- Homepage: https://git.io/vue-highlight.js
- Size: 4.02 MB
- Stars: 206
- Watchers: 4
- Forks: 23
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Highlight.js
[](https://github.com/gluons/vue-highlight.js/blob/master/LICENSE)
[](https://vuejs.org)
[](https://www.npmjs.com/package/vue-highlight.js)
[](https://www.npmjs.com/package/vue-highlight.js)
[](https://travis-ci.org/gluons/vue-highlight.js)
[](https://www.codacy.com/app/gluons/vue-highlight.js)
[](https://github.com/gluons/tslint-config-gluons)
---
> đĄ Version 4 with Highlight.js v10 support is under development.
> See [version-4](https://github.com/gluons/vue-highlight.js/tree/version-4) branch.
---
đ [Highlight.js](https://github.com/isagalaev/highlight.js) syntax highlighter component for [Vue](https://vuejs.org).
## âī¸ Installation
**Via [npm](https://www.npmjs.com):**
[](https://www.npmjs.com/package/vue-highlight.js)
```bash
npm install highlight.js vue-highlight.js
```
**Or [Yarn](https://yarnpkg.com):**
```bash
yarn add highlight.js vue-highlight.js
```
---
**For [TypeScript](https://www.typescriptlang.org/), Please install [`@types/highlight.js`](https://www.npmjs.com/package/@types/highlight.js).**
```bash
npm install --save-dev @types/highlight.js
# or
yarn add --dev @types/highlight.js
```
## đŦ Demo
Go to https://gluons.github.io/vue-highlight.js
## đ Usage
**Main file:**
There are 2 ways to import Highlight.js languages.
1. Import only languages that you want.
```js
import Vue from 'vue';
import VueHighlightJS from 'vue-highlight.js';
// Highlight.js languages (Only required languages)
import css from 'highlight.js/lib/languages/css';
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: {
css,
javascript,
vue
}
});
new Vue({
el: '#app',
render: h => h(App)
});
```
2. Import all languages.
```js
import Vue from 'vue';
import VueHighlightJS from 'vue-highlight.js';
// Highlight.js languages (All languages)
import 'vue-highlight.js/lib/allLanguages'
/*
* 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);
new Vue({
el: '#app',
render: h => h(App)
});
```
**Vue file:**
```vue
let str = 'Hello, World!';
console.log(str);
alert('Hello, World!');
// JavaScript...
/* StyleSheet... */
```
## â 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)`](https://highlightjs.readthedocs.io/en/latest/api.html#registerlanguage-name-language) API.
_See https://github.com/isagalaev/highlight.js#commonjs about importing each language from **highlight.js**._
## đ API
### ``
Highlight.js code block.
#### đ° Slots
Static code content.
#### đ° Properties
##### lang
**Type:** `String`
Highlight.js [language](http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases).
##### 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`](https://vuejs.org/v2/guide/components.html#Single-Slot) static content if you use this.**
##### auto
**Type:** `Boolean`
Enable auto detecting code language.
> Code will be detected by [highlight.js' `highlightAuto`](https://highlightjs.readthedocs.io/en/latest/api.html#highlightauto-value-languagesubset) function.
**`auto` will work well when you import all Highlight.js languages.**
**Component will ignore `lang` prop if you use `auto`.**
## â 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#866](https://github.com/isagalaev/highlight.js/issues/866)
> If you use `code` property instead of `slot`, 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 `` in `code` property?**
If you add `` at anywhere inside `script` tag, although it's a `string` inside quotes, it will **always** close the `script` tag.
âšī¸ See ["Unterminated template literal" syntax error when literal contains script tag](https://stackoverflow.com/q/36607932/1675907)