feat: code highlighting client-side
This commit is contained in:
parent
1bc98068e9
commit
d393a95495
@ -49,7 +49,7 @@
|
||||
.headline.grey--text.text--darken-3 {{title}}
|
||||
.caption.grey--text.text--darken-1 {{description}}
|
||||
v-divider
|
||||
.contents
|
||||
.contents(ref='container')
|
||||
slot(name='contents')
|
||||
|
||||
v-flex(lg3, xl2, fill-height, v-if='$vuetify.breakpoint.lgAndUp')
|
||||
@ -111,6 +111,7 @@
|
||||
|
||||
<script>
|
||||
import { StatusIndicator } from 'vue-status-indicator'
|
||||
import Prism from '@/libs/prism/prism.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -206,6 +207,9 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
Prism.highlightAllUnder(this.$refs.container)
|
||||
},
|
||||
methods: {
|
||||
toggleNavigation () {
|
||||
this.navOpen = !this.navOpen
|
||||
|
@ -77,75 +77,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
.hljs{
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1rem;
|
||||
background: #232323;
|
||||
color: #e6e1dc;
|
||||
.prismjs{
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: initial;
|
||||
background-color: mc('grey', '900');
|
||||
padding: 1rem 1rem 1rem 3rem;
|
||||
margin: 1rem 24px;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
.hljs-comment,.hljs-quote{
|
||||
color:#bc9458;
|
||||
font-style:italic
|
||||
}
|
||||
.hljs-keyword,.hljs-selector-tag{
|
||||
color:#c26230
|
||||
}
|
||||
.hljs-string,.hljs-number,.hljs-regexp,.hljs-variable,.hljs-template-variable{
|
||||
color:#a5c261
|
||||
}
|
||||
.hljs-subst{
|
||||
color:#519f50
|
||||
}
|
||||
.hljs-tag,.hljs-name{
|
||||
color:#e8bf6a
|
||||
}
|
||||
.hljs-type{
|
||||
color:#da4939
|
||||
}
|
||||
.hljs-symbol,.hljs-bullet,.hljs-built_in,.hljs-builtin-name,.hljs-attr,.hljs-link{
|
||||
color:#6d9cbe
|
||||
}
|
||||
.hljs-params{
|
||||
color:#d0d0ff
|
||||
}
|
||||
.hljs-attribute{
|
||||
color:#cda869
|
||||
}
|
||||
.hljs-meta{
|
||||
color:#9b859d
|
||||
}
|
||||
.hljs-title,.hljs-section{
|
||||
color:#ffc66d
|
||||
}
|
||||
.hljs-addition{
|
||||
background-color:#144212;
|
||||
color:#e6e1dc;
|
||||
display:inline-block;
|
||||
width:100%
|
||||
}
|
||||
.hljs-deletion{
|
||||
background-color:#600;
|
||||
color:#e6e1dc;
|
||||
display:inline-block;
|
||||
width:100%
|
||||
}
|
||||
.hljs-selector-class{
|
||||
color:#9b703f
|
||||
}
|
||||
.hljs-selector-id{
|
||||
color:#8b98ab
|
||||
}
|
||||
.hljs-emphasis{
|
||||
font-style:italic
|
||||
}
|
||||
.hljs-strong{
|
||||
font-weight:bold
|
||||
}
|
||||
.hljs-link{
|
||||
text-decoration:underline
|
||||
|
||||
> code {
|
||||
box-shadow: initial;
|
||||
display: block;
|
||||
font-size: .85rem;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
|
||||
&:after, &:before {
|
||||
content: initial;
|
||||
letter-spacing: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
key: htmlCodehighlighter
|
||||
title: Code Highlighting
|
||||
description: Syntax highlighter for programming code
|
||||
title: Code Highlighting Post-Processor
|
||||
description: Syntax detector for programming code
|
||||
author: requarks.io
|
||||
icon: palette
|
||||
enabledDefault: true
|
||||
|
@ -3,15 +3,12 @@ const hljs = require('highlight.js')
|
||||
module.exports = {
|
||||
async init($, config) {
|
||||
$('pre > code').each((idx, elm) => {
|
||||
const lang = $(elm).attr('lang')
|
||||
if (lang) {
|
||||
$(elm).html(hljs.highlight(lang, $(elm).text(), true).value)
|
||||
} else {
|
||||
const codeClasses = $(elm).attr('class') || ''
|
||||
if (codeClasses.indexOf('language-') < 0) {
|
||||
const result = hljs.highlightAuto($(elm).text())
|
||||
$(elm).html(result.value)
|
||||
$(elm).attr('lang', result.language)
|
||||
$(elm).addClass('language-', result.language)
|
||||
}
|
||||
$(elm).parent().addClass('hljs')
|
||||
$(elm).parent().addClass('prismjs line-numbers')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
@ -25,7 +25,7 @@ module.exports = {
|
||||
typographer: this.config.typographer,
|
||||
quotes: _.get(quoteStyles, this.config.quotes, quoteStyles.English),
|
||||
highlight(str, lang) {
|
||||
return `<pre><code lang="${lang}">${_.escape(str)}</code></pre>`
|
||||
return `<pre><code class="language-${lang}">${_.escape(str)}</code></pre>`
|
||||
}
|
||||
})
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
key: markdownMathjax
|
||||
title: Mathjax Pre-Processor
|
||||
description: Pre-parse TeX blocks for Mathjax
|
||||
title: Mathjax Preprocessor
|
||||
description: Prepare TeX blocks for Mathjax
|
||||
author: requarks.io
|
||||
icon: functions
|
||||
enabledDefault: false
|
||||
|
Loading…
Reference in New Issue
Block a user