<!DOCTYPE html>
<html lang="zh">
<head>
<title>Marked Emoji Test</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="../dist/css/editormd.min.css" />
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;
padding:0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}
audio, canvas, video {display: inline-block;}
body, button, input, select, textarea {font:12px/1.5 Tahoma, "Hiragino Sans GB", "Microsoft Yahei", Arial;}
body{font-size:12px;color:#666;background:#fff url(../images/) no-repeat left top;}
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;padding: 15px;}
a{color:#444;text-decoration: none;}
a:hover{color:#065BC2;text-decoration: none;}
.clear{zoom:1;}
.clear:after{content:"";height:0;visibility:hidden;clear:both;display:block;}
img{border:none;vertical-align: middle;}
ul, ol {margin-left: 18px;}
table {
margin: 10px 0;
border-collapse: collapse;
}
table th, table td {
padding: 5px 8px;
border: 1px solid #ddd;
}
pre {
padding:8px;border-radius:3px;border:1px solid #ddd;background:#f6f6f6;margin: 15px 0;display: inline-block;
}
pre code {
}
.editormd-logo,
.editormd-logo-4x {
font-family: editormd-logo;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
font-size: inherit;
line-height: 1;
display: inline-block;
text-rendering: auto;
vertical-align: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.editormd-logo:before,
.editormd-logo-4x:before {
content: "\e1987";
}
.editormd-logo-4x {
font-size:4em;
}
</style>
</head>
<body>
<i class="editormd-logo editormd-logo-4x"></i><br/>
<pre id="md">> Blockquotes
dasfsadfasdf:fa-edit: :warning: :smiley:dsafsdfsad\:fdsfdf\:f dfdf: :fa-save::fa-star: :fa-truck:
**fdfasd:smiley:dsfsdfsfd** ~~fsdfds:smiley:dfsdfsdf :fa-info:~~
*dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf*
___Emphasis :fa-gear: Italic:smiley:___ __Emphasis:smiley:__
# H1 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf
## H2 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf
### H3 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf
#### H4 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf
##### H5 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf
###### H6 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-star:dsfsdf
[:smiley:](http://www.emoji-cheat-sheet.com/ "link + emoji") link + emoji
- dafssdfsdaf:smiley:dfsdfsdf
- dafssdfsdaf:smiley:dfsdfsdf
- dafssdfsdaf:smiley:dfsdfsdf
- dafss:fa-truck:dfsdaf:smiley:dfsdfsdf
- dafssd: :fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck:
+ dafssdfsdaf:smiley:dfsdfsdf
+ dafss:fa-truck:dfsdaf:smiley:dfsdfsdf
1. :smiley:第一行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-save:: :fa-truck:
- dafssdfsdaf:smiley:dfsdfsdf
- dafss:fa-truck:dfsdaf:smiley:dfsdfsdf
2. :smiley:第二行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck:
3. 第三行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-save:: :fa-truck:
> Blockquotes
> dd:smiley:引用文本(Blockquotes:smiley:)fdasfad :fa-star:: dfd :fa-truck:
|:100: First Header | Second:smiley: Header:smiley: |
| ------------- | ------------- |
| Content:fa-truck: Cell | :smiley:Content Cell :smiley: |
| Con:fa-truck:tent Cell:bangbang: | Content Cell dfsdfsdf :fa-star: :dfdf :fa-truck: |
:fa-heart:fasdfsdfsfddffd:editormd-logo: :editormd-logo: :editormd-logo-4x:
dfasfasdfasdf:bangbang:
This is an H1 :editormd-logo-4x:
=============
This :fa-save:: :fa-truck:is an H2 :100:
-------------
</pre>
<script src="../examples/js/jquery.min.js"></script>
<script src="../lib/marked.min.js"></script>
<script type="text/javascript">
$(function() {
var markedRenderer = new marked.Renderer();
var markdownToC = markdownToC || [];
var emojiReg = /:([\-\w]+):/g;
var faIconReg = /:fa-([\w]+):/g;
var editormdLogoReg = /:(editormd-logo\s?-?(\w+)?):/g;
console.log("markedRenderer =>", markedRenderer);
markedRenderer.emoji = function(text) {
console.log("emoji.text =>", text);
var matchs = text.match(emojiReg);
console.log(matchs);
if ( matchs)
{
for (var i = 0, len = matchs.length; i < len; i++)
{
text = text.replace(new RegExp(matchs[i]), function($1, $2){
var faMatchs = $1.match(faIconReg);
//console.log("famatchs =>", faMatchs);
var name = $1.replace(/:/g, ""); // http://www.emoji-cheat-sheet.com/graphics/emojis/smile.png
console.log("replace =>", name, $1, $2);
if (faMatchs)
{
for (var fa = 0, len1 = faMatchs.length; fa < len1; fa++)
{
return "<i class=\"fa "+faMatchs[fa].replace(/:/g, "")+"\"></i>";
}
}
else
{
var emdlogoMathcs = $1.match(editormdLogoReg);
if (emdlogoMathcs)
{
for (var x = 0, len2 = emdlogoMathcs.length; x < len2; x++)
{
return "<i class=\""+emdlogoMathcs[x].replace(/:/g, "")+"\"></i>";
}
}
else
{
return "<img src=\"http://www.emoji-cheat-sheet.com/graphics/emojis/"+name+".png\" />";
}
}
//return (faIconReg.test($1)) ? "<i class=\"fa "+name+"\"></i>" : (editormdLogoReg.test($1)) ? "<i class=\""+name+"\"></i>" : "<img src=\"http://www.emoji-cheat-sheet.com/graphics/emojis/"+name+".png\" />";
});
}
console.log(emojiReg.exec(text));
console.log(text, emojiReg.test(text), faIconReg.test(text));
}
return text;
};
markedRenderer.blockquote = function (quote){
console.log("quote =>", quote);
return "<blockquote>\n"+quote+"</blockquote>\n";
};
markedRenderer.tablecell = function (content,flags){
console.log(content);
var type=flags.header?"th":"td";
var tag=flags.align?"<"+type+' style="text-align:'+flags.align+'">':"<"+type+">";
return tag+this.emoji(content)+"</"+type+">\n";
}
markedRenderer.heading = function (text,level,raw){
return"<h"+level+' id="'+this.options.headerPrefix+raw.toLowerCase().replace(/[^\w]+/g,"-")+'">'+this.emoji(text)+"</h"+level+">\n"
};
markedRenderer.listitem = function (text){
return "<li>" + this.emoji(text) + "</li>\n";
};
markedRenderer.paragraph = function(text) {
console.log("paragraph =>", text, text.match(emojiReg));
return "<p>" + this.emoji(text) + "</p>\n";
};
marked.setOptions({
renderer : markedRenderer,
gfm : true,
tables : true,
breaks : true,
pedantic : false,
smartLists : true,
smartypants : true
});
var mdsrc = $("#md").html();
var md = marked(mdsrc);
//console.log(mdsrc);
$("body").append(md);
});
</script>
</body>
</html>