demarcate.js 使用教程

2024-08-31 01:50:56作者：明树来

1、项目介绍

demarcate.js 是一个基于 jQuery 的 Markdown 编辑器，允许用户直接在页面上的 HTML 元素中编辑和生成 Markdown 文本。它支持大多数浏览器，包括移动浏览器，并且从版本 2.0.0 开始，没有必需的依赖项。你可以选择包含 keymaster.js 用于键盘绑定，以及 showdown.js 如果你希望将 Markdown 转换回 HTML。demarcate.js 是由 William Hart 开发的，并且根据 MIT 许可证提供。

2、项目快速启动

安装

你可以通过 Bower 安装 demarcate.js：

bower install demarcate

然后在你的项目中包含这些文件：

<script src="bower_components/demarcate/bin/demarcate.js"></script>

使用

首先，在你的 HTML 文件中添加一个元素：

<div id="editor"></div>

然后，在页面底部添加以下脚本以启用编辑器：

<script type="text/javascript">
  demarcate.enable(document.getElementById("editor"));
  // 或者使用 jQuery:
  // demarcate.enable($("#editor")[0]);
</script>

3、应用案例和最佳实践

案例一：简单的 Markdown 编辑器

假设你需要一个简单的 Markdown 编辑器来编辑博客文章，你可以使用 demarcate.js 来实现：

<!DOCTYPE html>
<html>
<head>
  <title>Markdown 编辑器</title>
  <script src="bower_components/demarcate/bin/demarcate.js"></script>
</head>
<body>
  <div id="editor"></div>
  <script type="text/javascript">
    demarcate.enable(document.getElementById("editor"));
  </script>
</body>
</html>

最佳实践

模块化使用：尽量将 demarcate.js 作为一个独立的模块引入，避免全局污染。
事件监听：使用 demarcateEditorUpdated 事件来实时获取编辑器的内容。

4、典型生态项目

showdown.js

showdown.js 是一个 Markdown 到 HTML 的转换器，可以与 demarcate.js 结合使用，实现 Markdown 编辑和预览功能：

<script src="bower_components/showdown/dist/showdown.min.js"></script>
<script type="text/javascript">
  var converter = new showdown.Converter();
  document.getElementById("preview").innerHTML = converter.makeHtml(demarcate.parse());
</script>

keymaster.js

keymaster.js 是一个简单的键盘快捷键库，可以与 demarcate.js 结合使用，提供快捷键格式化选项：

<script src="bower_components/keymaster/keymaster.js"></script>

通过这些生态项目的结合，可以大大增强 demarcate.js 的功能和用户体验。

登录后查看全文

项目优选

收起

kernel

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

本项目是CANN提供的transformer类大模型算子库，实现网络在NPU上加速计算。

作为 Ascend for PyTorch 社区的核心组件，TorchNPU 是昇腾专为 PyTorch 打造的深度学习适配插件，使 PyTorch 框架能够直接调用昇腾 NPU，为开发者提供昇腾 AI 处理器的超强算力。

本项目是CANN提供的神经网络类计算算子库，实现网络在NPU上加速计算。

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

JiuwenSwarm 是一款基于openJiuwen开发的智能AI Agent，它能够将大语言模型的强大能力，通过你日常使用的各类通讯应用，直接延伸至你的指尖。

CANNBot 是面向 CANN 开发的用于提升开发效率的系列智能体，本仓库为其提供可复用的 Skills 模块。

openJiuwen agent-studio提供零码、低码可视化开发和工作流编排，模型、知识库、插件等各资源管理能力

TSX

4.42 K

714