marked-emoji-test.html 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <title>Marked Emoji Test</title>
  5. <meta charset="UTF-8">
  6. <meta name="description" content="" />
  7. <meta name="keywords" content="" />
  8. <link rel="stylesheet" href="../dist/css/editormd.min.css" />
  9. <style>
  10. 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,
  11. article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  12. margin:0;
  13. padding:0;
  14. }
  15. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}
  16. audio, canvas, video {display: inline-block;}
  17. body, button, input, select, textarea {font:12px/1.5 Tahoma, "Hiragino Sans GB", "Microsoft Yahei", Arial;}
  18. body{font-size:12px;color:#666;background:#fff url(../images/) no-repeat left top;}
  19. body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;padding: 15px;}
  20. a{color:#444;text-decoration: none;}
  21. a:hover{color:#065BC2;text-decoration: none;}
  22. .clear{zoom:1;}
  23. .clear:after{content:"";height:0;visibility:hidden;clear:both;display:block;}
  24. img{border:none;vertical-align: middle;}
  25. ul, ol {margin-left: 18px;}
  26. table {
  27. margin: 10px 0;
  28. border-collapse: collapse;
  29. }
  30. table th, table td {
  31. padding: 5px 8px;
  32. border: 1px solid #ddd;
  33. }
  34. pre {
  35. padding:8px;border-radius:3px;border:1px solid #ddd;background:#f6f6f6;margin: 15px 0;display: inline-block;
  36. }
  37. pre code {
  38. }
  39. .editormd-logo,
  40. .editormd-logo-4x {
  41. font-family: editormd-logo;
  42. speak: none;
  43. font-style: normal;
  44. font-weight: 400;
  45. font-variant: normal;
  46. text-transform: none;
  47. font-size: inherit;
  48. line-height: 1;
  49. display: inline-block;
  50. text-rendering: auto;
  51. vertical-align: inherit;
  52. -webkit-font-smoothing: antialiased;
  53. -moz-osx-font-smoothing: grayscale;
  54. }
  55. .editormd-logo:before,
  56. .editormd-logo-4x:before {
  57. content: "\e1987";
  58. }
  59. .editormd-logo-4x {
  60. font-size:4em;
  61. }
  62. </style>
  63. </head>
  64. <body>
  65. <i class="editormd-logo editormd-logo-4x"></i><br/>
  66. <pre id="md">&gt; Blockquotes
  67. dasfsadfasdf:fa-edit: :warning: :smiley:dsafsdfsad\:fdsfdf\:f dfdf: :fa-save::fa-star: :fa-truck:
  68. **fdfasd:smiley:dsfsdfsfd** ~~fsdfds:smiley:dfsdfsdf :fa-info:~~
  69. *dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf*
  70. ___Emphasis :fa-gear: Italic:smiley:___ __Emphasis:smiley:__
  71. # H1 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf
  72. ## H2 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf
  73. ### H3 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf
  74. #### H4 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf
  75. ##### H5 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf
  76. ###### H6 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-star:dsfsdf
  77. [:smiley:](http://www.emoji-cheat-sheet.com/ "link + emoji") link + emoji
  78. - dafssdfsdaf:smiley:dfsdfsdf
  79. - dafssdfsdaf:smiley:dfsdfsdf
  80. - dafssdfsdaf:smiley:dfsdfsdf
  81. - dafss:fa-truck:dfsdaf:smiley:dfsdfsdf
  82. - dafssd: :fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck:
  83. + dafssdfsdaf:smiley:dfsdfsdf
  84. + dafss:fa-truck:dfsdaf:smiley:dfsdfsdf
  85. 1. :smiley:第一行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-save:: :fa-truck:
  86. - dafssdfsdaf:smiley:dfsdfsdf
  87. - dafss:fa-truck:dfsdaf:smiley:dfsdfsdf
  88. 2. :smiley:第二行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck:
  89. 3. 第三行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-save:: :fa-truck:
  90. &gt; Blockquotes
  91. &gt; dd:smiley:引用文本(Blockquotes:smiley:)fdasfad :fa-star:: dfd :fa-truck:
  92. |:100: First Header | Second:smiley: Header:smiley: |
  93. | ------------- | ------------- |
  94. | Content:fa-truck: Cell | :smiley:Content Cell :smiley: |
  95. | Con:fa-truck:tent Cell:bangbang: | Content Cell dfsdfsdf :fa-star: :dfdf :fa-truck: |
  96. :fa-heart:fasdfsdfsfddffd:editormd-logo: :editormd-logo: :editormd-logo-4x:
  97. dfasfasdfasdf:bangbang:
  98. This is an H1 :editormd-logo-4x:
  99. =============
  100. This :fa-save:: :fa-truck:is an H2 :100:
  101. -------------
  102. </pre>
  103. <script src="../examples/js/jquery.min.js"></script>
  104. <script src="../lib/marked.min.js"></script>
  105. <script type="text/javascript">
  106. $(function() {
  107. var markedRenderer = new marked.Renderer();
  108. var markdownToC = markdownToC || [];
  109. var emojiReg = /:([\-\w]+):/g;
  110. var faIconReg = /:fa-([\w]+):/g;
  111. var editormdLogoReg = /:(editormd-logo\s?-?(\w+)?):/g;
  112. console.log("markedRenderer =>", markedRenderer);
  113. markedRenderer.emoji = function(text) {
  114. console.log("emoji.text =>", text);
  115. var matchs = text.match(emojiReg);
  116. console.log(matchs);
  117. if ( matchs)
  118. {
  119. for (var i = 0, len = matchs.length; i < len; i++)
  120. {
  121. text = text.replace(new RegExp(matchs[i]), function($1, $2){
  122. var faMatchs = $1.match(faIconReg);
  123. //console.log("famatchs =>", faMatchs);
  124. var name = $1.replace(/:/g, ""); // http://www.emoji-cheat-sheet.com/graphics/emojis/smile.png
  125. console.log("replace =>", name, $1, $2);
  126. if (faMatchs)
  127. {
  128. for (var fa = 0, len1 = faMatchs.length; fa < len1; fa++)
  129. {
  130. return "<i class=\"fa "+faMatchs[fa].replace(/:/g, "")+"\"></i>";
  131. }
  132. }
  133. else
  134. {
  135. var emdlogoMathcs = $1.match(editormdLogoReg);
  136. if (emdlogoMathcs)
  137. {
  138. for (var x = 0, len2 = emdlogoMathcs.length; x < len2; x++)
  139. {
  140. return "<i class=\""+emdlogoMathcs[x].replace(/:/g, "")+"\"></i>";
  141. }
  142. }
  143. else
  144. {
  145. return "<img src=\"http://www.emoji-cheat-sheet.com/graphics/emojis/"+name+".png\" />";
  146. }
  147. }
  148. //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\" />";
  149. });
  150. }
  151. console.log(emojiReg.exec(text));
  152. console.log(text, emojiReg.test(text), faIconReg.test(text));
  153. }
  154. return text;
  155. };
  156. markedRenderer.blockquote = function (quote){
  157. console.log("quote =>", quote);
  158. return "<blockquote>\n"+quote+"</blockquote>\n";
  159. };
  160. markedRenderer.tablecell = function (content,flags){
  161. console.log(content);
  162. var type=flags.header?"th":"td";
  163. var tag=flags.align?"<"+type+' style="text-align:'+flags.align+'">':"<"+type+">";
  164. return tag+this.emoji(content)+"</"+type+">\n";
  165. }
  166. markedRenderer.heading = function (text,level,raw){
  167. return"<h"+level+' id="'+this.options.headerPrefix+raw.toLowerCase().replace(/[^\w]+/g,"-")+'">'+this.emoji(text)+"</h"+level+">\n"
  168. };
  169. markedRenderer.listitem = function (text){
  170. return "<li>" + this.emoji(text) + "</li>\n";
  171. };
  172. markedRenderer.paragraph = function(text) {
  173. console.log("paragraph =>", text, text.match(emojiReg));
  174. return "<p>" + this.emoji(text) + "</p>\n";
  175. };
  176. marked.setOptions({
  177. renderer : markedRenderer,
  178. gfm : true,
  179. tables : true,
  180. breaks : true,
  181. pedantic : false,
  182. smartLists : true,
  183. smartypants : true
  184. });
  185. var mdsrc = $("#md").html();
  186. var md = marked(mdsrc);
  187. //console.log(mdsrc);
  188. $("body").append(md);
  189. });
  190. </script>
  191. </body>
  192. </html>