用flowchart为markdown添加流程图

举个例子如下，根据这个例子大家就能看懂我到底是怎么实现的

里程图

window.onload = function () {

var chart;

var code =$('code.language-flow').text();

if (chart) {

chart.clean();

}

chart = flowchart.parse(code);

chart.drawSVG('canvas', {

// 'x': 30,

// 'y': 50,

'line-width': 3,

'maxWidth': 3,//ensures the flowcharts fits within a certian width

'line-length': 50,

'text-margin': 10,

'font-size': 14,

'font': 'normal',

'font-family': 'Helvetica',

'font-weight': 'normal',

'font-color': 'black',

'line-color': 'black',

'element-color': 'black',

'fill': 'white',

'yes-text': 'yes',

'no-text': 'no',

'arrow-end': 'block',

'scale': 1,

'symbols': {

'start': {

'font-color': 'red',

'element-color': 'green',

'fill': 'yellow'

},

'end':{

'class': 'end-element'

}

},

'flowstate' : {

'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},

'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},

'future' : { 'fill' : '#FFFF99'},

'request' : { 'fill' : 'blue'},

'invalid': {'fill' : '#444444'},

'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },

'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }

}

});

};

st=>start: 用户登陆

op=>operation: 登陆操作

cond=>condition: 登陆成功 Yes or No?

e=>end: 进入后台

st->op->cond

cond(yes)->e

cond(no)->op

记住要先导入raphael.js在flowchart.js，因为flowchart.js依赖与第一个js。

为markdown添加语法着色

我是为markdowpad做的语法着色有需要的可以看下

设置css样式

/* code */

/* =======================================*/

code[class*="language-"],

pre[class*="language-"] {

color: white;

background: none;

font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;

text-align: left;

text-shadow: 0 -.1em .2em black;

white-space: pre;

word-spacing: normal;

word-break: normal;

word-wrap: normal;

line-height: 1.5;

-moz-tab-size: 4;

-o-tab-size: 4;

tab-size: 4;

-webkit-hyphens: none;

-moz-hyphens: none;

-ms-hyphens: none;

hyphens: none;

}

pre[class*="language-"],

:not(pre) > code[class*="language-"] {

background: hsl(0, 0%, 8%); /* #141414 */

}

/* Code blocks */

pre[class*="language-"] {

border-radius: .5em;

border: .3em solid hsl(0, 0%, 33%); /* #282A2B */

box-shadow: 1px 1px .5em black inset;

margin: .5em 0;

overflow: auto;

padding: 1em;

}

pre[class*="language-"]::-moz-selection {

/* Firefox */

background: hsl(200, 4%, 16%); /* #282A2B */

}

pre[class*="language-"]::selection {

/* Safari */

background: hsl(200, 4%, 16%); /* #282A2B */

}

/* Text Selection colour */

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,

code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {

text-shadow: none;

background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */

}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,

code[class*="language-"]::selection, code[class*="language-"] ::selection {

text-shadow: none;

background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */

}

/* Inline code */

:not(pre) > code[class*="language-"] {

border-radius: .3em;

border: .13em solid hsl(0, 0%, 33%); /* #545454 */

box-shadow: 1px 1px .3em -.1em black inset;

padding: .15em .2em .05em;

white-space: normal;

}

.token.comment,

.token.prolog,

.token.doctype,

.token.cdata {

color: hsl(0, 0%, 47%); /* #777777 */

}

.token.punctuation {

opacity: .7;

}

.namespace {

opacity: .7;

}

.token.tag,

.token.boolean,

.token.number,

.token.deleted {

color: hsl(14, 58%, 55%); /* #CF6A4C */

}

.token.keyword,

.token.property,

.token.selector,

.token.constant,

.token.symbol,

.token.builtin {

color: hsl(53, 89%, 79%); /* #F9EE98 */

}

.token.attr-name,

.token.attr-value,

.token.string,

.token.char,

.token.operator,

.token.entity,

.token.url,

.language-css .token.string,

.style .token.string,

.token.variable,

.token.inserted {

color: hsl(76, 21%, 52%); /* #8F9D6A */

}

.token.atrule {

color: hsl(218, 22%, 55%); /* #7587A6 */

}

.token.regex,

.token.important {

color: hsl(42, 75%, 65%); /* #E9C062 */

}

.token.important,

.token.bold {

font-weight: bold;

}

.token.italic {

font-style: italic;

}

.token.entity {

cursor: help;

}

pre[data-line] {

padding: 1em 0 1em 3em;

position: relative;

}

/* Markup */

.language-markup .token.tag,

.language-markup .token.attr-name,

.language-markup .token.punctuation {

color: hsl(33, 33%, 52%); /* #AC885B */

}

/* Make the tokens sit above the line highlight so the colours don't look faded. */

.token {

position: relative;

z-index: 1;

}

.line-highlight {

background: hsla(0, 0%, 33%, 0.25); /* #545454 */

background: linear-gradient(to right, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */

border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */

border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */

left: 0;

line-height: inherit;

margin-top: 0.75em; /* Same as .prism’s padding-top */

padding: inherit 0;

pointer-events: none;

position: absolute;

right: 0;

white-space: pre;

z-index: 0;

}

.line-highlight:before,

.line-highlight[data-end]:after {

background-color: hsl(215, 15%, 59%); /* #8794A6 */

border-radius: 999px;

box-shadow: 0 1px white;

color: hsl(24, 20%, 95%); /* #F5F2F0 */

content: attr(data-start);

font: bold 65%/1.5 sans-serif;

left: .6em;

min-width: 1em;

padding: 0 .5em;

position: absolute;

text-align: center;

text-shadow: none;

top: .4em;

vertical-align: .3em;

}

.line-highlight[data-end]:after {

bottom: .4em;

content: attr(data-end);

top: auto;

}

记下来是导入js

js的源码如下

/* http://prismjs.com/download.html?themes=prism-twilight&languages=markup+css+clike+javascript+java+python */

var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof s)){h.lastIndex=0;var _=h.exec(w),P=1;if(!_&&m&&b!=t.length-1){if(h.lastIndex=k,_=h.exec(e),!_)break;for(var A=_.index+(d?_[1].length:0),j=_.index+_[0].length,x=b,O=k,N=t.length;N>x&&(j>O||!t[x].type&&!t[x-1].greedy);++x)O+=t[x].length,A>=O&&(++b,k=O);if(t[b]instanceof s||t[x-1].greedy)continue;P=x-b,w=e.slice(k,O),_.index-=k}if(_){d&&(p=_[1].length);var A=_.index+p,_=_[0].slice(p),j=A+_.length,S=w.slice(0,A),C=w.slice(j),M=[b,P];S&&(++b,k+=S.length,M.push(S));var E=new s(g,f?n.tokenize(_,f):_,y,_,m);if(M.push(E),C&&M.push(C),Array.prototype.splice.apply(t,M),1!=P&&n.matchGrammar(e,t,a,b,k,!0,g),i)break}else if(i)break}}}}},tokenize:function(e,t){var a=[e],r=t.rest;if(r){for(var l in r)t[l]=r[l];delete t.rest}return n.matchGrammar(e,a,t,0,0,!1),a},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var l={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if(e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o=Object.keys(l.attributes).map(function(e){return e+'="'+(l.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return""+l.content+""+l.tag+">"},!_self.document)return _self.addEventListener?(n.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,l=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,n.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);

Prism.languages.markup={comment://,prolog://,doctype:/\s\S]+?>/i,cdata://i,tag:{pattern:/\/=$\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^\/]+/i,inside:{punctuation:/^\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;

Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(

Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(?:true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};

Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+(?:[Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<<?=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(

Prism.languages.java=Prism.languages.extend("clike",{keyword:/\b(?:abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while)\b/,number:/\b0b[01]+\b|\b0x[\da-f]*\.?[\da-fp\-]+\b|\b\d*\.?\d+(?:e[+-]?\d+)?[df]?\b/i,operator:{pattern:/(^|[^.])(?:\+[+=]?|-[-=]?|!=?|<<?=?|>>?>?=?|==?|&[&=]?|\|[|=]?|\*=?|\/=?|%=?|\^=?|[?:~])/m,lookbehind:!0}}),Prism.languages.insertBefore("java","function",{annotation:{alias:"punctuation",pattern:/(^|[^.])@\w+/,lookbehind:!0}});

Prism.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0},"triple-quoted-string":{pattern:/("""|''')[\s\S]+?\1/,greedy:!0,alias:"string"},string:{pattern:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,greedy:!0},"function":{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},keyword:/\b(?:as|assert|async|await|break|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|nonlocal|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,"boolean":/\b(?:True|False|None)\b/,number:/\b-?(?:0[bo])?(?:(?:\d|0x[\da-f])[\da-f]*\.?\d*|\.\d+)(?:e[+-]?\d+)?j?\b/i,operator:/[-+%=]=?|!=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]|\b(?:or|and|not)\b/,punctuation:/[{}[\];(),.:]/};

效果图