Skip to content

Commit

Permalink
change default markdown css and hljs js css to option for users
Browse files Browse the repository at this point in the history
  • Loading branch information
@CHENXCHEN
CHENXCHEN committed Nov 24, 2017
1 parent 2ee9789 commit bed3595
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 37 deletions.
4 changes: 3 additions & 1 deletion .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ module.exports = {
//
'no-unused-vars':0,
// else 强制换行
'brace-style':0
'brace-style':0,
// 允许多个空格
'no-multi-spaces': 0,
}
}
4 changes: 3 additions & 1 deletion src/dev/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
<button @click="imgreplace">imgreplace</button>
<mavon-editor ref=md :subfield="subfield" :code_style="code_style" :toolbarsFlag="toolbarsFlag" :editable="editable"
:language="d_language" @change="change" @save="saveone" :ishljs="true" class="item-editor" v-model="help1"
:external_link="external_link"
@imgAdd="$imgAdd" @imgDel="$imgDel" @subfieldtoggle="$subfieldtoggle" @previewtoggle="$previewtoggle"></mavon-editor>

<button ref="diy" type="button" @click="$click('selftest')" class="op-icon fa fa-mavon-align-left"
Expand Down Expand Up @@ -74,7 +75,8 @@
editable: true,
toolbarsFlag: true,
img_file: {},
code_style: 'code-hybrid'
code_style: 'solarized-dark',
external_link: null
}
},
created () {
Expand Down
39 changes: 24 additions & 15 deletions src/lib/core/highlight.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,55 @@
* @Email: [email protected]
* @Filename: highlight.js
* @Last modified by: chc
* @Last modified time: 2017-11-23T17:22:52+08:00
* @Last modified time: 2017-11-24T19:55:22+08:00
* @License: MIT
* @Copyright: 2017
*/

// import hljs from 'highlight.js-async-webpack'
import hljsLangs from './hljs/lang.hljs.js'
import {
loadScript
} from './extra-function.js'
function highLightCode(str, callback) {
function highLightCode(str, callback, hljsLangFuc, hljsFuc) {
var hljs = window.hljs;
if (!hljs) {
console.warn('hljs parsing file is missing. mavon-editor will autoload https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js');
loadScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js', function() {
_highLightCode(str, callback);
if (typeof hljsFuc !== 'function') {
console.warn('external_link.hljs_js is not a function, hljs can not load by mavon-editor, if you want to disabled this log, set external_link.hljs_js to function');
callback(str);
return;
}
var url = hljsFuc();
console.warn('hljs parsing file is missing. mavon-editor will autoload', url);
loadScript(url, function() {
_highLightCode(str, callback, hljsLangFuc);
});
} else {
_highLightCode(str, callback);
if (typeof hljsLangFuc === 'function') {
_highLightCode(str, callback, hljsLangFuc);
} else {
console.warn('external_link.hljs_lang is not a function, hljs will not to work');
callback(str);
}
}
}
function _highLightCode(str, callback) {
function _highLightCode(str, callback, hljsLangFuc) {
var dom = document.createElement('div');
var hljs = window.hljs;
dom.innerHTML = str;
var pre_code = dom.querySelectorAll('pre > div.hljs > code');
if (pre_code && hljs) {
if (pre_code && hljs && (typeof hljsLangFuc === 'function')) {
var flag = 0;
var cnt = 0;
var i = 0;
var deal = 0;
var not_include_lang = {}; // these lang parse file need to be include.
var url = '';
for (i = 0; i < pre_code.length; i++) {
var lang = pre_code[i].className.toLowerCase();
if (lang.length > 0) {
cnt = cnt + 1;
// if this lang parse file missing
if (!hljs.getLanguage(lang) && hljsLangs[lang]) {
not_include_lang[lang] = 1;
url = hljsLangFuc(lang);
if (!hljs.getLanguage(lang) && !not_include_lang.hasOwnProperty(lang) && url.length > 0) {
not_include_lang[lang] = url;
}
}
}
Expand All @@ -54,8 +64,7 @@ function _highLightCode(str, callback) {
}
}
for (i = 0; i < need_langs.length; i++) {
var script = document.createElement('script');
var url = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/' + need_langs[i] + '.min.js';
url = not_include_lang[need_langs[i]];
loadScript(url, function() {
deal = deal + 1;
if (deal === need_langs.length) {
Expand Down
8 changes: 4 additions & 4 deletions src/lib/core/markdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* @Email: [email protected]
* @Filename: markdown.js
* @Last modified by: chc
* @Last modified time: 2017-11-23T17:21:36+08:00
* @Last modified time: 2017-11-24T19:34:03+08:00
* @License: MIT
* @Copyright: 2017
*/
Expand Down Expand Up @@ -58,9 +58,9 @@ markdown.use(emoji)
.use(sup)
.use(sub)
.use(container)
.use(container, 'hljs-left')/*align left */
.use(container, 'hljs-center')/*align center */
.use(container, 'hljs-right')/*align right */
.use(container, 'hljs-left') /* align left */
.use(container, 'hljs-center')/* align center */
.use(container, 'hljs-right')/* align right */
.use(deflist)
.use(abbr)
.use(footnote)
Expand Down
85 changes: 69 additions & 16 deletions src/mavon-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@
import {autoTextarea} from 'auto-textarea'
import {keydownListen} from './lib/core/keydown-listen.js'
import hljsCss from './lib/core/hljs/lang.hljs.css.js'
import hljsLangs from './lib/core/hljs/lang.hljs.js'
import {
fullscreenchange,
windowResize,
Expand All @@ -105,13 +106,6 @@
var s_md_toolbar_left = require('./components/s-md-toolbar-left.vue')
var s_md_toolbar_right = require('./components/s-md-toolbar-right.vue')
import hljs from './lib/core/highlight.js'
markdown.renderAsync = function (src, env, fuc, _env) {
env = env || {};
_env = _env || {};
var _res = markdown.renderer.render(this.parse(src, env), this.options, env);
if(_env['ishljs'] === false) fuc(_res)
else hljs(_res, fuc);
}
export default {
props: {
// 是否渲染滚动条样式(webkit)
Expand Down Expand Up @@ -171,8 +165,12 @@
},
ishljs: {
type: Boolean,
default: false
}
default: true
},
external_link: {
type: Object,
default: null
},
},
data() {
return {
Expand Down Expand Up @@ -219,10 +217,41 @@
currentTimeout: '',
s_markdown: markdown,
// s_tomarkdown: tomarkdown,
d_image_file: []
d_image_file: [],
s_external_link: {
markdown_css: function() {
return 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.9.0/github-markdown.min.css';
},
hljs_js: function() {
return 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js';
},
hljs_lang: function(lang) {
return 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/' + lang + '.min.js';
},
hljs_css: function(css) {
if(hljsCss[css]) {
return 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/' + css + '.min.css';
}
return '';
}
}
};
},
created() {
var $vm = this;
markdown.renderAsync = function (src, env, fuc, _env) {
env = env || {};
_env = _env || {};
var _res = markdown.renderer.render(this.parse(src, env), this.options, env);
if(_env['ishljs'] === false) fuc(_res)
else {
if($vm.external_link === null) {
hljs(_res, fuc, $vm.s_external_link.hljs_lang, $vm.s_external_link.hljs_js);
} else {
hljs(_res, fuc, $vm.external_link.hljs_lang, $vm.external_link.hljs_js);
}
}
}
// 初始化语言
this.initLanguage();
this.$nextTick(() => {
Expand All @@ -248,7 +277,15 @@
this.d_value = this.value;
// 将help添加到末尾
document.body.appendChild(this.$refs.help);
loadLink('https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.9.0/github-markdown.min.css')
if ($vm.external_link === null) {
loadLink($vm.s_external_link.markdown_css());
} else {
if (typeof $vm.external_link.markdown_css === 'function') {
loadLink($vm.external_link.markdown_css());
} else if($vm.external_link.markdown_css != false) {
console.error('external_link.markdown_css is not a function, if you want to disabled it, set external_link.markdown_css to function or false');
}
}
$vm.codeStyleChange($vm.code_style, true)
},
beforeDestroy() {
Expand Down Expand Up @@ -471,11 +508,27 @@
},
codeStyleChange(val, isInit) {
isInit = isInit ? isInit : false;
if(hljsCss[val]) {
loadLink('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/' + val + '.min.css');
} else if(isInit) {
console.warn('hljs color scheme', val, 'do not exist, loading default github.min.css');
loadLink('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css')
var url = '';
if (this.external_link === null) {
url = this.s_external_link.hljs_css(val);
if (url.length == 0 && isInit) {
console.warn('hljs color scheme', val, 'do not exist, loading default github');
url = this.s_external_link('github')
}
} else {
if (typeof this.external_link.hljs_css != 'function') {
if (this.external_link.hljs_css != false)
console.error('external_link.hljs_css is not a function, if you want to disabled this error log, set external_link.hljs_css to function or false');
return;
}
url = this.external_link.hljs_css(val);
if (url.length == 0 && isInit) {
console.warn('hljs color scheme', val, 'do not exist, loading default github');
url = this.external_link.hljs_css('github')
}
}
if (url.length > 0) {
loadLink(url)
} else {
console.warn('hljs color scheme', val, 'do not exist, hljs color scheme will not change');
}
Expand Down

0 comments on commit bed3595

Please sign in to comment.