marked-todo-list-test.html 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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="../examples/css/style.css" />
  9. </head>
  10. <body>
  11. <script src="../examples/js/jquery.min.js"></script>
  12. <script src="../lib/marked.min.js"></script>
  13. <script type="text/javascript">
  14. $(function() {
  15. var markedRenderer = new marked.Renderer();
  16. var markdownToC = markdownToC || [];
  17. console.log("markedRenderer =>", markedRenderer);
  18. markedRenderer.listitem = function(text) {
  19. if (/^\s*\[[x\s]\]\s*/.test(text))
  20. {
  21. console.log("is todo list =>", text);
  22. text = text.replace(/^\s*\[\s\]\s*/, '<input type="checkbox" class="task-list-item-checkbox"> ')
  23. .replace(/^\s*\[x\]\s*/, '<input type="checkbox" class="task-list-item-checkbox" checked disabled /> ');
  24. return '<li style="list-style: none">' + text + '</li>';
  25. }
  26. else
  27. {
  28. return '<li>' + text + '</li>';
  29. }
  30. };
  31. marked.setOptions({
  32. renderer : markedRenderer,
  33. gfm : true,
  34. tables : true,
  35. breaks : true,
  36. pedantic : false,
  37. smartLists : true,
  38. smartypants : true
  39. });
  40. var todoListMarkdown = [
  41. "- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported;",
  42. "- [x] list syntax required (any unordered or ordered list supported);",
  43. "- [x] this is a complete item;",
  44. "- [ ] this is an incomplete item;",
  45. "- [ ] this is an incomplete item;"
  46. ].join("\n");
  47. var md = marked(todoListMarkdown);
  48. console.log(md);
  49. $("body").append(md);
  50. });
  51. </script>
  52. </body>
  53. </html>