深圳全飞鸿

标题: editor.md的编辑 [打印本页]
作者: syant    时间: 前天 00:14
标题: editor.md的编辑
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Editor.md Example</title>
  7.     <link rel="stylesheet" href="/lib/editor.md/css/editormd.min.css" />
  8. </head>
  9. <body>
  10.     <div id="editor" style="width: 90%; margin: 0 auto;"></div>

  12.     <script src="/lib/jquery/jquery-1.11.1.min.js" charset="utf-8"></script>
  13.     <script src="/lib/editor.md/editormd.min.js" charset="utf-8"></script>
  14.     <script>
  15.         var editor = editormd("editor", {
  16.             width: "100%",
  17.             height: 640,
  18.             path: "/lib/editor.md/lib/",
  19.             markdown: "## 这是 Markdown 内容\n\n- 项目 1\n- 项目 2",  // 示例Markdown内容
  20.             previewCodeHighlight: true,  // 启用代码高亮
  21.             watch: false,  // 禁用实时编辑模式
  22.             toolbarIcons: [],  // 禁用工具栏
  23.             readOnly: true,  // 设置为只读模式，不允许编辑
  24.         });
  25.     </script>
  26. </body>
  27. </html>
复制代码
显示：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Markdown to HTML using marked.js</title>
  7.     <style>
  8.         #content {
  9.             margin: 2px;
  10.             padding: 20px;
  11.             background-color: #f9f9f9;
  12.             border-radius: 5px;
  13.             border: 1px solid #ddd;
  14.         }
  15.     </style>
  16. </head>
  17. <body>

  19.     <div id="content"></div> <!-- 用来显示渲染后的 HTML -->

  21.     <!-- 引入 marked.min.js -->
  22.     <script src="/lib/editor.md/lib/marked.min.js"></script>

  24.     <script>
  25.         // 你想要渲染的 Markdown 内容
  26.         var markdownContent = `
  27. # 这是一个 Markdown 示例

  29. - 项目 1
  30. - 项目 2
  31. - 项目 3

  33. ## 二级标题

  35. 这是一个代码块：

  37. \`\`\`javascript
  38. console.log('Hello, world!');
  39. \`\`\`
  40.         `;

  42.         // 将 Markdown 转换为 HTML
  43.         var htmlContent = marked(markdownContent);

  45.         // 将渲染后的 HTML 插入到页面中
  46.         document.getElementById('content').innerHTML = htmlContent;
  47.     </script>

  49. </body>
  50. </html>
复制代码






欢迎光临 深圳全飞鸿 (http://www.nagomes.com/disc/) Powered by Discuz! X3.2