Select only a subset of hljs languages (#70)

This commit is contained in:
Mikhail Oleynikov 2021-01-05 18:22:26 +03:00 committed by GitHub
parent 937b00cfcc
commit 0d6f2f93bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 6 deletions

View File

@ -1,7 +1,7 @@
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
padding: 0.5rem !important;
background: #F0F0F0
}
@ -92,4 +92,4 @@ pre {
word-break: normal;
font-family: monospace;
}
}
}

View File

@ -5,7 +5,7 @@
:members="members"
:current-member="currentMember"
>
<div v-compiled-markdown="body" class="markdown-body"></div>
<div v-compiled-markdown="body" v-highlightjs class="markdown-body"></div>
</ModPage>
</template>

View File

@ -1,11 +1,57 @@
import Vue from 'vue'
import hljs from 'highlight.js'
import hljs from 'highlight.js/lib/core'
// Scripting
import javascript from 'highlight.js/lib/languages/javascript'
import python from 'highlight.js/lib/languages/python'
import lua from 'highlight.js/lib/languages/lua'
// Coding
import java from 'highlight.js/lib/languages/java'
import kotlin from 'highlight.js/lib/languages/kotlin'
import scala from 'highlight.js/lib/languages/scala'
import groovy from 'highlight.js/lib/languages/groovy'
// Configs
import gradle from 'highlight.js/lib/languages/gradle'
import json from 'highlight.js/lib/languages/json'
import ini from 'highlight.js/lib/languages/ini'
import yaml from 'highlight.js/lib/languages/yaml'
import xml from 'highlight.js/lib/languages/xml'
import properties from 'highlight.js/lib/languages/properties'
/* REGISTRATION */
// Scripting
hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('python', python)
hljs.registerLanguage('lua', lua)
// Coding
hljs.registerLanguage('java', java)
hljs.registerLanguage('kotlin', kotlin)
hljs.registerLanguage('scala', scala)
hljs.registerLanguage('groovy', groovy)
// Configs
hljs.registerLanguage('gradle', gradle)
hljs.registerLanguage('json', json)
hljs.registerLanguage('ini', ini)
hljs.registerLanguage('yaml', yaml)
hljs.registerLanguage('xml', xml)
hljs.registerLanguage('properties', properties)
/* ALIASES */
// Scripting
hljs.registerAliases(['js'], 'javascript')
hljs.registerAliases(['py'], 'python')
// Coding
hljs.registerAliases(['kt'], 'kotlin')
// Configs
hljs.registerAliases(['json5'], 'json')
hljs.registerAliases(['toml'], 'ini')
hljs.registerAliases(['yml'], 'yaml')
hljs.registerAliases(['html', 'htm', 'xhtml', 'mcui', 'fxml'], 'xml')
Vue.directive('highlightjs', {
deep: true,
bind(el, binding) {
// on first bind, highlight all targets
const targets = el.querySelectorAll('code')
const targets = el.querySelectorAll('pre > code')
targets.forEach((target) => {
// if a value is directly assigned to the directive, use this
// instead of the element content.
@ -17,7 +63,7 @@ Vue.directive('highlightjs', {
},
componentUpdated(el, binding) {
// after an update, re-fill the content and then highlight
const targets = el.querySelectorAll('code')
const targets = el.querySelectorAll('pre > code')
targets.forEach((target) => {
if (binding.value) {
target.textContent = binding.value