vue-highlight-component

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

• 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, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @remrinrin