showdown.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. var placeholder = document.getElementById('placeholder');
  2. var renderer = new showdown.Converter({simplifiedAutoLink: 'true',
  3. excludeTrailingPunctuationFromURLs: 'true',
  4. strikethrough: 'true',
  5. tables: 'true',
  6. tasklists: 'true',
  7. literalMidWordUnderscores: 'true',
  8. extensions: ['headinganchor']
  9. });
  10. var toc = []; // Table of contents as a list
  11. // Parse the html's headings and construct toc[].
  12. var parseHeadings = function(html) {
  13. toc = [];
  14. var parser = new DOMParser();
  15. var htmlDoc = parser.parseFromString(html, 'text/html');
  16. var eles = htmlDoc.querySelectorAll("h1, h2, h3, h4, h5, h6");
  17. for (var i = 0; i < eles.length; ++i) {
  18. var ele = eles[i];
  19. var level = parseInt(ele.tagName.substr(1));
  20. toc.push({
  21. level: level,
  22. anchor: ele.id,
  23. title: ele.innerHTML
  24. });
  25. }
  26. delete parser;
  27. };
  28. var markdownToHtml = function(markdown, needToc) {
  29. var html = renderer.makeHtml(markdown);
  30. // Parse the html to init toc[].
  31. parseHeadings(html);
  32. if (needToc) {
  33. return html.replace(/<p>\[TOC\]<\/p>/ig, '<div class="vnote-toc"></div>');
  34. } else {
  35. return html;
  36. }
  37. };
  38. var mdHasTocSection = function(markdown) {
  39. var n = markdown.search(/(\n|^)\[toc\]/i);
  40. return n != -1;
  41. };
  42. var highlightCodeBlocks = function(doc, enableMermaid, enableFlowchart) {
  43. var codes = doc.getElementsByTagName('code');
  44. for (var i = 0; i < codes.length; ++i) {
  45. var code = codes[i];
  46. if (code.parentElement.tagName.toLowerCase() == 'pre') {
  47. if (enableMermaid && code.classList.contains('language-mermaid')) {
  48. // Mermaid code block.
  49. continue;
  50. } if (enableFlowchart && code.classList.contains('language-flowchart')) {
  51. // Flowchart code block.
  52. continue;
  53. }
  54. if (listContainsRegex(code.classList, /language-.*/)) {
  55. hljs.highlightBlock(code);
  56. }
  57. }
  58. }
  59. };
  60. var updateText = function(text) {
  61. var needToc = mdHasTocSection(text);
  62. var html = markdownToHtml(text, needToc);
  63. placeholder.innerHTML = html;
  64. handleToc(needToc);
  65. insertImageCaption();
  66. highlightCodeBlocks(document, VEnableMermaid, VEnableFlowchart);
  67. renderMermaid('language-mermaid');
  68. renderFlowchart('language-flowchart');
  69. addClassToCodeBlock();
  70. renderCodeBlockLineNumber();
  71. // If you add new logics after handling MathJax, please pay attention to
  72. // finishLoading logic.
  73. if (VEnableMathjax) {
  74. try {
  75. MathJax.Hub.Queue(["Typeset", MathJax.Hub, placeholder, finishLogics]);
  76. } catch (err) {
  77. content.setLog("err: " + err);
  78. finishLogics();
  79. }
  80. } else {
  81. finishLogics();
  82. }
  83. };
  84. var highlightText = function(text, id, timeStamp) {
  85. var html = renderer.makeHtml(text);
  86. var parser = new DOMParser();
  87. var htmlDoc = parser.parseFromString("<div id=\"showdown-container\">" + html + "</div>", 'text/html');
  88. highlightCodeBlocks(htmlDoc, false, false);
  89. html = htmlDoc.getElementById('showdown-container').innerHTML;
  90. delete parser;
  91. content.highlightTextCB(html, id, timeStamp);
  92. }
  93. var textToHtml = function(text) {
  94. var html = renderer.makeHtml(text);
  95. var parser = new DOMParser();
  96. var htmlDoc = parser.parseFromString("<div id=\"showdown-container\">" + html + "</div>", 'text/html');
  97. highlightCodeBlocks(htmlDoc, false, false);
  98. html = htmlDoc.getElementById('showdown-container').innerHTML;
  99. delete parser;
  100. var container = document.getElementById('text-to-html-div');
  101. container.innerHTML = html;
  102. html = getHtmlWithInlineStyles(container);
  103. container.innerHTML = "";
  104. content.textToHtmlCB(text, html);
  105. }