设为首页收藏本站
开启辅助访问 切换到窄版

深圳全飞鸿

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
深圳全飞鸿»论坛 › 项目管理 › 技术合作友商 › 字典-ShowDoc › editor.md的编辑
返回列表 发新帖
查看: 3|回复: 0
打印 上一主题 下一主题

editor.md的编辑

[复制链接]
syant

228

主题

466

帖子

2184

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2184
跳转到指定楼层
楼主
发表于 前天 00:14 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
  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>
复制代码


回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|nagomes  

GMT+8, 2025-5-4 17:59 , Processed in 0.027245 second(s), 21 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表