修复代码高亮异常

Former-commit-id: 474a7f85f000818c4476749358ed23bce510c486 [formerly 474a7f85f000818c4476749358ed23bce510c486 [formerly 474a7f85f000818c4476749358ed23bce510c486 [formerly 474a7f85f000818c4476749358ed23bce510c486 [formerly a2a16dba80a4df41e3b73b9699909ec07a342a63 [formerly 8a98f227c3d4360e2845b61fc6f26b64ab755d28]]]]]
Former-commit-id: 71291296093c5d4c3db05851c18a6698aa1c3645
Former-commit-id: 8e33c11261d76f8c2a7d0400eb5dafe732885479
Former-commit-id: 10c4883814f552e3feb14f3d2fcb7abf972d7a9d [formerly 9ee51cca396c744c534813d1dcc82114ed8d2ebf]
Former-commit-id: 37ec1d8735b4f14306535702e719211d5583223c
Former-commit-id: 5afbb2d7ed07912e03e0282d72d0b613005639d0
Former-commit-id: 44db664bfe868d691c612c4c9b11285e6c36dec1
Former-commit-id: e89b1ff374aff4d54dd74185dc948505621e13a0
Former-commit-id: e7df5c58193b23b2d7e95a269816e589c22bad79
This commit is contained in:
liyang 2018-08-29 16:23:07 +08:00
parent d241282c48
commit 9e8a9fa336
2 changed files with 199 additions and 6 deletions

View File

@ -6,8 +6,9 @@
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| code | 代码字符串 | 非 | String | | console.log('you lost code prop') |
| code | 代码字符串 | 非 | String | | |
| format-html | 是否格式化 HTML | 非 | Boolean | | false |
| lang | 首选语言 | 非 | String | | |
::: tip
format 建议只在内容为 HTML 的时候打开,如果内容不是 HTML设置为 true 会有负面效果
@ -21,4 +22,183 @@ format 建议只在内容为 HTML 的时候打开,如果内容不是 HTML
::: tip
本框架只是提供代码高亮的简单实现,如需实现更高级的设置请修改组件代码
:::
:::
## 支持的语言
* `1c`
* `abnf`
* `accesslog`
* `actionscript`
* `ada`
* `apache`
* `applescript`
* `cpp`
* `arduino`
* `armasm`
* `xml`
* `asciidoc`
* `aspectj`
* `autohotkey`
* `autoit`
* `avrasm`
* `awk`
* `axapta`
* `bash`
* `basic`
* `bnf`
* `brainfuck`
* `cal`
* `capnproto`
* `ceylon`
* `clean`
* `clojure`
* `clojure-repl`
* `cmake`
* `coffeescript`
* `coq`
* `cos`
* `crmsh`
* `crystal`
* `cs`
* `csp`
* `css`
* `d`
* `markdown`
* `dart`
* `delphi`
* `diff`
* `django`
* `dns`
* `dockerfile`
* `dos`
* `dsconfig`
* `dts`
* `dust`
* `ebnf`
* `elixir`
* `elm`
* `ruby`
* `erb`
* `erlang-repl`
* `erlang`
* `excel`
* `fix`
* `flix`
* `fortran`
* `fsharp`
* `gams`
* `gauss`
* `gcode`
* `gherkin`
* `glsl`
* `go`
* `golo`
* `gradle`
* `groovy`
* `haml`
* `handlebars`
* `haskell`
* `haxe`
* `hsp`
* `htmlbars`
* `http`
* `hy`
* `inform7`
* `ini`
* `irpf90`
* `java`
* `javascript`
* `jboss-cli`
* `json`
* `julia`
* `julia-repl`
* `kotlin`
* `lasso`
* `ldif`
* `leaf`
* `less`
* `lisp`
* `livecodeserver`
* `livescript`
* `llvm`
* `lsl`
* `lua`
* `makefile`
* `mathematica`
* `matlab`
* `maxima`
* `mel`
* `mercury`
* `mipsasm`
* `mizar`
* `perl`
* `mojolicious`
* `monkey`
* `moonscript`
* `n1ql`
* `nginx`
* `nimrod`
* `nix`
* `nsis`
* `objectivec`
* `ocaml`
* `openscad`
* `oxygene`
* `parser3`
* `pf`
* `php`
* `pony`
* `powershell`
* `processing`
* `profile`
* `prolog`
* `protobuf`
* `puppet`
* `purebasic`
* `python`
* `q`
* `qml`
* `r`
* `rib`
* `roboconf`
* `routeros`
* `rsl`
* `ruleslanguage`
* `rust`
* `scala`
* `scheme`
* `scilab`
* `scss`
* `shell`
* `smali`
* `smalltalk`
* `sml`
* `sqf`
* `sql`
* `stan`
* `stata`
* `step21`
* `stylus`
* `subunit`
* `swift`
* `taggerscript`
* `yaml`
* `tap`
* `tcl`
* `tex`
* `thrift`
* `tp`
* `twig`
* `typescript`
* `vala`
* `vbnet`
* `vbscript`
* `vbscript-html`
* `verilog`
* `vhdl`
* `vim`
* `x86asm`
* `xl`
* `xquery`
* `zephir`

View File

@ -1,11 +1,11 @@
<template>
<pre class="d2-highlight" v-html="highlightHTML"></pre>
<pre class="d2-highlight hljs" v-html="highlightHTML"></pre>
</template>
<script>
// https://highlightjs.org/usage/
// http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
import './styles/atom-one-light.css'
import './styles/github-gist.css'
import htmlFormat from './libs/htmlFormat'
import highlight from 'highlight.js'
export default {
@ -14,12 +14,17 @@ export default {
code: {
type: String,
required: false,
default: `console.log('you lost code prop')`
default: ''
},
formatHtml: {
type: Boolean,
required: false,
default: false
},
lang: {
type: String,
required: false,
default: ''
}
},
data () {
@ -38,7 +43,15 @@ export default {
methods: {
highlight () {
const code = this.formatHtml ? htmlFormat(this.code) : this.code
this.highlightHTML = highlight.highlightAuto(code).value
this.highlightHTML = highlight.highlightAuto(code, [
this.lang,
'html',
'javascript',
'json',
'css',
'scss',
'less'
]).value
}
}
}