https://github.com/elisiondesign/vue-code-highlight

Beautiful code highlighter as Vue.js component.
https://github.com/elisiondesign/vue-code-highlight

component prismjs syntax-highlighting vue

Last synced: 2 months ago
JSON representation

Beautiful code highlighter as Vue.js component.

• Host: GitHub
• URL: https://github.com/elisiondesign/vue-code-highlight
• Owner: elisiondesign
• License: mit
• Created: 2018-02-11T12:23:55.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T15:25:18.000Z (almost 2 years ago)
• Last Synced: 2024-11-06T06:19:11.542Z (2 months ago)
• Topics: component, prismjs, syntax-highlighting, vue
• Language: CSS
• Homepage:
• Size: 2.46 MB
• Stars: 119
• Watchers: 6
• Forks: 21
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-code-highlight

> Beautiful code syntax highlighting as Vue.js component.

## Examples

https://codesandbox.io/s/vue-code-highlight-example-63h5m

![screenshot](/public/screenshot2.png)

## Usage

```

npm install vue-code-highlight --save

```

Now, you can use this module in two diferrent ways, as a component or as a directive.

### Component

In any component:

```js

// You have to extract the component from the module

import { component as VueCodeHighlight } from 'vue-code-highlight';

components:{

  VueCodeHighlight,

  ...

}

```

```html

  

 //Paste your code here

 


```

**Props**

|Prop          |Description

|:--------------|:------------------------------------------|

| **language** | Pass language name you want to highlight. Options: https://prismjs.com/#supported-languages |

Your content will be highlighted dynamically when it updates. 

The `
` tag is required to preserve newline characters (They're stripped by default in Vue).


Window styles are already present in a component mode, but you will need to select and include a theme to properly highlight your code. (See the themes section.)

### Directive

In your main file:

```js

import VueCodeHighlight from 'vue-code-highlight';

Vue.use(VueCodeHighlight) //registers the v-highlight directive

```

And then in any Vue component:

```html



 ...



```

All markup under the div element having the following structure will be syntax highlighted.


```html


  

    //your code goes here

  



```


To give the highlighter a window look in a directive mode, also don't forget to include the `./node_modules/vue-code-highlight/themes/window.css` file somewhere in your app.

## Themes

In order to visually higlight your code, you need to select a theme from `./node_modules/vue-code-highlight/themes/` and import it somewhere into your component/application. These are just regular prism themes, so feel free to improvise.

![themes](/public/themes.png)

## Other languages

Any of the [supported languages](https://prismjs.com/index.html#supported-languages) in Prism may be used. To enable support

for them, you must import them explicitly as well as Prism's markup templating.

For example, to include PHP highlighting in your application:

```jsx

import 'prism-es6/components/prism-markup-templating';

import 'prism-es6/components/prism-php';

```