https://github.com/egoist/vue-highlight-component

highlight code using highlight.js and vue component.
https://github.com/egoist/vue-highlight-component

vue

Last synced: 14 days ago
JSON representation

highlight code using highlight.js and vue component.

• Host: GitHub
• URL: https://github.com/egoist/vue-highlight-component
• Owner: egoist
• License: mit
• Created: 2017-07-14T10:39:53.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-12-25T14:43:24.000Z (almost 3 years ago)
• Last Synced: 2024-10-03T12:37:45.438Z (about 1 month ago)
• Topics: vue
• Language: JavaScript
• Homepage:
• Size: 32.2 KB
• Stars: 37
• Watchers: 5
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-highlight-component

[![NPM version](https://img.shields.io/npm/v/vue-highlight-component.svg?style=flat)](https://npmjs.com/package/vue-highlight-component) [![NPM downloads](https://img.shields.io/npm/dm/vue-highlight-component.svg?style=flat)](https://npmjs.com/package/vue-highlight-component) [![CircleCI](https://circleci.com/gh/egoist/vue-highlight-component/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-highlight-component/tree/master)  [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/egoist/donate)

## Install

```bash

yarn add highlight.js vue-highlight-component

```

## Usage

```vue

  {{ code }}

import hljs from 'highlight.js'

import Highlight from 'vue-highlight-component'

// Register the language if it's not supported by default

hljs.registerLanguage('swift', require('highlight.js/lib/languages/swift'))

export default {

  data() {

    return {

      code: `your swift code...`

    }

  },

  components: {

    Highlight

  }

}

```

You can also use a prop `code` to set the code you wanna highlight:

```vue

  

```

Prop `language` is optional since highlight.js could automatically infer the language if it's not set.

## Related

- [vue-prism-component](https://github.com/egoist/vue-prism-component): highlight code using prism.js and vue component

## Contributing

1. Fork it!

2. Create your feature branch: `git checkout -b my-new-feature`

3. Commit your changes: `git commit -am 'Add some feature'`

4. Push to the branch: `git push origin my-new-feature`

5. Submit a pull request :D

## Author

**vue-highlight-component** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.


Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-highlight-component/contributors)).

> [egoistian.com](https://egoistian.com) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)