feat: code highlighting client-side

This commit is contained in:
Nicolas Giard 2018-09-16 22:30:24 -04:00
parent 1bc98068e9
commit d393a95495
6 changed files with 32 additions and 81 deletions

View File

@ -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

View File

@ -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;
}
}
}
}

View File

@ -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

View File

@ -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')
})
}
}

View File

@ -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>`
}
})

View File

@ -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