vue-highlight-component

highlight code using highlight.js and vue component.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-highlight-component
3711.0.07 years ago7 years agoMinified + gzip package size for vue-highlight-component in KB

Readme

vue-highlight-component
NPM version NPM downloads CircleCI donate

Install

yarn add highlight.js vue-highlight-component

Usage

<template>
  <highlight language="swift">{{ code }}</highlight>
</template>

<script>
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
  }
}
</script>

You can also use a prop code to set the code you wanna highlight:
<template>
  <highlight :code="code"></highlight>
</template>

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

Related

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, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
egoistian.com · GitHub @egoist · Twitter @remrinrin