render.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <!DOCTYPE html>
  2. <html lang="zh-cmn-Hans">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
  7. <meta name="theme-color" content="#f1f7fe">
  8. <meta name="apple-mobile-web-app-capable" content="yes">
  9. <meta name="mobile-web-app-capable" content="yes"/>
  10. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11. <title>Vditor: ♏ An In-browser Markdown editor, support WYSIWYG, Instant Rendering (Typora-like) and Split View
  12. modes. 一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。</title>
  13. <meta name="description"
  14. content="Vditor 支持三种所见即所得(wysiwyg)、即时渲染(ir)、分屏预览(sv)模式,支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
  15. <meta property="og:description"
  16. content="Vditor 支持三种所见即所得(wysiwyg)、即时渲染(ir)、分屏预览(sv)模式,支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
  17. <meta name="twitter:description" property="og:description" itemprop="description"
  18. content="Vditor 支持三种所见即所得(wysiwyg)、即时渲染(ir)、分屏预览(sv)模式,支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
  19. <link rel="dns-prefetch" href="//cdn.jsdelivr.net/"/>
  20. <link rel="preconnect" href="https://cdn.jsdelivr.net">
  21. <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
  22. <link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
  23. <link rel="shortcut icon" type="image/x-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
  24. <meta name="copyright" content="B3log"/>
  25. <meta http-equiv="Window-target" content="_top"/>
  26. <meta property="og:locale" content="zh-cmn-Hans"/>
  27. <meta property="og:title"
  28. content="Vditor: ♏ An In-browser Markdown editor, support WYSIWYG, Instant Rendering (Typora-like) and Split View modes. 一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。"/>
  29. <meta property="og:site_name" content="Blog-vditor"/>
  30. <meta property="og:url" content="https://b3log.org/vditor"/>
  31. <meta name="twitter:card" content="summary"/>
  32. <meta name="twitter:domain" content="b3log.org"/>
  33. <meta name="twitter:title" property="og:title" itemprop="b3log vditor"
  34. content="Vditor: ♏ An In-browser Markdown editor, support WYSIWYG, Instant Rendering (Typora-like) and Split View modes. 一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。"/>
  35. <meta name="twitter:site" content="@B3logOS"/>
  36. <meta name="twitter:url" content="https://b3log.org/vditor"/>
  37. <meta property="og:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
  38. <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
  39. <style>
  40. body {
  41. margin: 0;
  42. }
  43. .nav {
  44. text-align: center;
  45. margin: 20px 0
  46. }
  47. .link {
  48. cursor: pointer;
  49. color: #4285f4;
  50. }
  51. #previewWrap {
  52. padding: 0 226px 20px 20px;
  53. }
  54. #preview {
  55. margin: 0 auto;
  56. max-width: 768px;
  57. }
  58. #outline {
  59. display: none;
  60. position: fixed;
  61. width: 186px;
  62. top: 64px;
  63. right: 20px;
  64. bottom: 20px;
  65. overflow: auto;
  66. font-size: 12px;
  67. border-left: 1px solid var(--border-color);
  68. border-right: 0;
  69. --border-color: #eee;
  70. --toolbar-icon-hover-color: #4285f4;
  71. --textarea-text-color: #616161;
  72. --hover-background-color: #f6f8fa;
  73. }
  74. #outline.dark {
  75. --border-color: #d1d5da;
  76. --toolbar-icon-hover-color: #fff;
  77. --textarea-text-color: #a6aab0;
  78. --hover-background-color: #444d56;
  79. }
  80. .vditor-reset ul[data-style="*"] {
  81. list-style-type: disc
  82. }
  83. .vditor-reset ul[data-style="*"] ul {
  84. list-style-type: circle
  85. }
  86. .vditor-reset ul[data-style="*"] ul ul {
  87. list-style-type: square
  88. }
  89. .vditor-reset ul[data-style="+"] {
  90. list-style-type: "\2764";
  91. }
  92. .vditor-reset ul[data-style="+"] ul {
  93. list-style-type: "\1f49a"
  94. }
  95. .vditor-reset ul[data-style="+"] ul ul {
  96. list-style-type: "\1f49b"
  97. }
  98. .vditor-reset ul[data-style="-"] {
  99. list-style-type: korean-hangul-formal
  100. }
  101. .vditor-reset ul[data-style="-"] ul {
  102. list-style-type: decimal-leading-zero
  103. }
  104. .vditor-reset ul[data-style="-"] ul ul {
  105. list-style-type: lower-alpha
  106. }
  107. .vditor-reset ol[data-style="1)"] {
  108. list-style-type: simp-chinese-formal
  109. }
  110. .vditor-reset ol[data-style="1)"] ol {
  111. list-style-type: simp-chinese-informal
  112. }
  113. .vditor-reset ol[data-style="1)"] ol ol {
  114. list-style-type: trad-chinese-formal
  115. }
  116. @media screen and (max-width: 768px) {
  117. #previewWrap {
  118. padding: 0 20px 20px 0;
  119. }
  120. #outline {
  121. display: none !important;
  122. }
  123. }
  124. </style>
  125. </head>
  126. <body>
  127. <div class="vditor-reset nav">
  128. <a class="link" href="https://b3log.org/vditor" target="_blank">官网</a> &nbsp; &nbsp;
  129. <a class="link" href="/">Editor</a> &nbsp; &nbsp;
  130. <button onclick="setTheme('dark')">Dark Mode</button> &nbsp; &nbsp;
  131. <button onclick="setTheme('light')">Light Mode</button>
  132. </div>
  133. <div class="markdown-list nav">
  134. <span class="link" data-file="zh_CN">zh_CN</span> &nbsp; &nbsp;
  135. <span class="link" data-file="ko_KR">ko_KR</span> &nbsp; &nbsp;
  136. <span class="link" data-file="cute-list">cute-list</span> &nbsp; &nbsp;
  137. <span class="link" data-file="entity">entity</span> &nbsp; &nbsp;
  138. </div>
  139. <div id="previewWrap">
  140. <div id="preview" class="preview"></div>
  141. </div>
  142. <div id="outline"></div>
  143. </body>
  144. </html>