marked-@at-test.html 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <title>Marked @ 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:blue;text-decoration: none;}
  21. a:hover{text-decoration: underline;}
  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. <pre id="test"> ~~@mentions~~, #refs @tylerlong `inline code @tylerlong`, [links](), **formatting**, and <del>tags</del> supported @pandao;
  66. list syntax required (any unordered or ordered list supported) @pandao;
  67. this is @pandao a complete item @pandao;
  68. link [@pandao](https://github.com/pandao "@pandao") &#64;
  69. link [&#64;pandao](https://github.com/pandao "&#64;pandao")
  70. this is an incomplete item **@pandao**;
  71. *@pandao* this is an incomplete item ___@pandao___;
  72. # Github: @pandao
  73. ## Github: @pandao
  74. ### Github: @tylerlong
  75. #### Github: @tylerlong
  76. ##### Github: @tylerlong
  77. ###### Github: @tylerlong
  78. - dafssdfsdaf@chjj dfsdfsdf
  79. - dafssdfsdaf@chjj dfsdfsdf
  80. - dafssdfsdaf@chjj dfsdfsdf
  81. - dafss@pandao dfsdaf@chjj dfsdfsdf
  82. - dafssd: @pandao fsdaf@chjj dfsdfsdf @codemirror @pandao
  83. + dafssdfsdaf@chjj dfsdfsdf
  84. + dafss@pandaodfsdaf@chjj dfsdfsdf
  85. 1. @chjj 第一行@pandao fsdaf@chjj dfsdfsdf :fa-save:: @pandao
  86. - dafssdfsdaf@chjj dfsdfsdf
  87. - dafss@pandao dfsdaf@chjj dfsdfsdf
  88. 2. @chjj 第二行@pandao fsdaf@chjj dfsdfsdf @codemirror @pandao
  89. 3. 第三行@pandao fsdaf@chjj dfsdfsdf :fa-save:: @pandao
  90. &gt; Blockquotes @pandao
  91. &gt; dd@pandao引用文本(Blockquotes @pandao)fdasfad @_pandao fdasfad @xxx454xxx fdasfad @xx_x454xxx454
  92. |@pandao First Header | Second@pandao Header@pandao |
  93. | ------------- | ------------- |
  94. | Content@pandao Cell | @pandao Content Cell @pandao|
  95. | Con@pandao tent Cell@pandao | Content@pan-dao Cell dfsdfsdf @pan_dao |
  96. dsfdf@pandao fasdfsdfsfddffd@pandao
  97. dfasfasdfasdf:bangbang:
  98. This is an H1 @pandao
  99. =============
  100. This @pandao an H2 @pandao
  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. console.log("markedRenderer =>", markedRenderer);
  110. var atReg = /@(\w+)/g;
  111. markedRenderer.at = function(text) {
  112. if (atReg.test(text))
  113. {
  114. text = text.replace(atReg, function($1, $2){
  115. console.log($1, $2);
  116. return "<a href=\"https://github.com/" + $2 + "\">" + $1 + "</a>";
  117. });
  118. }
  119. return text;
  120. };
  121. markedRenderer.link = function (href,title,text){
  122. console.log("link =>", href,title,text);
  123. if(this.options.sanitize) {
  124. try{
  125. var prot=decodeURIComponent(unescape(href)).replace(/[^\w:]/g,"").toLowerCase()
  126. }catch(e){
  127. return""
  128. }
  129. if(prot.indexOf("javascript:")===0){
  130. return""
  131. }
  132. }
  133. var out='<a href="'+href+'"';
  134. if (atReg.test(title) || atReg.test(text))
  135. {
  136. return out + " title=\"" + title.replace(/@/g, "&#64;") + "\">" + text.replace(/@/g, "&#64;") + "</a>";
  137. }
  138. if(title) {
  139. out+=' title="'+title+'"'
  140. }
  141. out+=">"+text+"</a>";
  142. return out;
  143. }
  144. markedRenderer.paragraph = function(text) {
  145. console.log("paragraph =>", text, atReg.test(text));
  146. return "<p>" + this.at(text) + "</p>\n";
  147. };
  148. markedRenderer.heading = function (text,level,raw){
  149. return"<h"+level+' id="'+this.options.headerPrefix+raw.toLowerCase().replace(/[^\w]+/g,"-")+'">'+this.at(text)+"</h"+level+">\n"
  150. };
  151. markedRenderer.listitem = function (text){
  152. return "<li>" + this.at(text) + "</li>\n";
  153. };
  154. markedRenderer.tablecell = function (content,flags){
  155. console.log(content);
  156. var type=flags.header?"th":"td";
  157. var tag=flags.align?"<"+type+' style="text-align:'+flags.align+'">':"<"+type+">";
  158. return tag+this.at(content)+"</"+type+">\n";
  159. }
  160. marked.setOptions({
  161. renderer : markedRenderer,
  162. gfm : true,
  163. tables : true,
  164. breaks : true,
  165. pedantic : false,
  166. smartLists : true,
  167. smartypants : true
  168. });
  169. var markdown = $("#test").html();
  170. var md = marked(markdown);
  171. //console.log(markdown);
  172. $("body").append(md);
  173. });
  174. </script>
  175. </body>
  176. </html>