https://github.com/ichsanputr/vue-code-highlighter
Vue component for highlighting code or syntax with modern style, copy functionality, multicode and powered by Highlight.js
https://github.com/ichsanputr/vue-code-highlighter
code-highlighter vue vue-syntax-highlighter
Last synced: 4 months ago
JSON representation
Vue component for highlighting code or syntax with modern style, copy functionality, multicode and powered by Highlight.js
- Host: GitHub
- URL: https://github.com/ichsanputr/vue-code-highlighter
- Owner: ichsanputr
- Created: 2024-03-02T10:36:02.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-03T02:39:26.000Z (over 1 year ago)
- Last Synced: 2025-09-19T08:30:02.282Z (9 months ago)
- Topics: code-highlighter, vue, vue-syntax-highlighter
- Language: Vue
- Homepage: https://ichsanputr.github.io/vue-code-highlighter
- Size: 678 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Code Highlighter
Vue component for highlighting code or syntax with modern style, copy functionality, multicode and powered by Highlight.js
## Installation
```bash
npm install vue-code-highlighter highlight.js
// or use yarn
yarn add vue-code-highlighter highlight.js
```
## Usage
### Importing
This package support either composition and options api with typescript or javascript.
```ts
import { VueCodeHighlighter, VueCodeHighlighterMulti } from 'vue-code-highlighter';
import 'vue-code-highlighter/dist/style.css'
```
This package does not need to call CSS from the highlight.js package because I have already wrapped it. What you need to do is install the highlight.js package.
### Example & Demo
Example code and demo available in ichsanputr.github.io/vue-code-highlighter
## Props
There are 2 types of components, namely VueCodeHighlighter and VueCodeHighlighterMulti, both of them have different props.
VueCodeHighlighter
| Attribute | Type | Is Required | Description |
|:-------------|:--------:|:------------------:|:------------------------------------------------------------------------------|
| lang | String | true | Code language from Highlighter cheatset, see [Supported language](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) |
| code | String | true | Plain code which will be displayed, please wrap your code using backticks (``) |
| title | String | no | Custom title in header |
| disableCopy | Boolean | no | Disable copy button and copy functionality to code |
| maxHeight | Number | no | (ex :max-height=300) Maximum height of the code block, which will enable scrolling if exceeded |
Example for lang props in Multi Code.
```js
const codeMulti = [
{
lang: "js",
title: "vue",
code: codeVue.value
},
{
lang: "html",
code: codeHtml.value,
title: 'html'
},
{
lang: "css",
code: codeCss.value,
},
]
```