yarn add highlight.js vue-highlight-component<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>
<!-- Don't forget to include a preferred theme -->
<style src="highlight.js/styles/github.css"></style>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.
- vue-prism-component: highlight code using prism.js and vue component
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
vue-highlight-component © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
egoistian.com · GitHub @egoist · Twitter @_egoistlily