开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何用javascript从头开始写一个简单的markdown (语法)高亮笔？

要从头开始用JavaScript编写一个简单的Markdown语法高亮笔，可以按照以下步骤进行：

理解Markdown语法：Markdown是一种轻量级标记语言，用于简单而直观地格式化文本。了解Markdown的基本语法，包括标题、段落、列表、链接、图片等元素的表示方法。
创建HTML页面：首先，创建一个HTML页面作为展示Markdown文本和高亮效果的容器。可以使用<textarea>元素作为输入框，用于输入Markdown文本，使用<div>元素作为展示区域，用于显示高亮后的HTML内容。
获取输入的Markdown文本：使用JavaScript获取输入框中的Markdown文本内容，可以通过document.getElementById()方法获取输入框元素，并使用.value属性获取其值。
解析Markdown文本：将获取到的Markdown文本解析为HTML格式。可以使用现有的Markdown解析库，如marked.js，它可以将Markdown文本转换为HTML格式。
高亮代码块：对于Markdown中的代码块，可以使用代码高亮库来实现语法高亮效果。常用的代码高亮库有highlight.js和Prism.js，它们支持多种编程语言的语法高亮。
将解析后的HTML内容显示在页面上：将解析后的HTML内容插入到展示区域的<div>元素中，可以使用innerHTML属性将HTML内容赋值给展示区域。

以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Markdown语法高亮笔</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
  <textarea id="markdownInput" rows="10" cols="50"></textarea>
  <button onclick="highlightMarkdown()">高亮</button>
  <div id="output"></div>

  <script>
    function highlightMarkdown() {
      var markdownInput = document.getElementById("markdownInput");
      var outputDiv = document.getElementById("output");
      var markdownText = markdownInput.value;
      var htmlText = marked(markdownText);
      outputDiv.innerHTML = htmlText;
      hljs.highlightAll();
    }
  </script>
</body>
</html>

在上述示例中，我们使用了marked.js库将Markdown文本转换为HTML格式，并使用highlight.js库实现代码块的语法高亮效果。用户在输入框中输入Markdown文本后，点击"高亮"按钮，即可将高亮后的HTML内容显示在页面上。

这只是一个简单的示例，实际上，实现一个完整的Markdown语法高亮笔可能需要更复杂的逻辑和功能。但通过以上步骤，你可以从头开始用JavaScript编写一个简单的Markdown语法高亮笔。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

八款不可错过的热门 Markdown 开发包 | 码云周刊第 34 期

我使用 pandoc 来转化 markdown，但是我不想在修改文件时总是在编辑器、文字终端和浏览器间换来换去，因此我写了一个简单的编辑器，它在后台调用 pandoc 将当前编辑的 markdown 内容转化为...Markpage 让你专注于所写的内容，其他的资源都由 markpage 自动加载，无需操心每次写文档要记忆太多的资源路径如果你只想简单的用 Markdown 写个干净的文档，比起 Word 没有语法高亮的文档...项目地址： https://gitee.com/chinesetiger/markpage 柒项目名称：markdown 转换 html 工具 par 项目简介：par 是一个基于 pyPEG 写的转換...除了支持标准的 markdown语法，还支持一些扩展语法，如 github 的 markdown 扩展及自定义的扩展，可以生成 boostrap 或 semantic-ui 的一些样式，如: alert...项目地址： https://gitee.come/limodou/par 捌项目名称：Javascript 实现的 Markdown 解析器 Mdjs 项目简介：Mdjs 是一个易用轻量级的 Javascript

2.4K5 0

如何在静态页面上使用markdown排版原

”Markdown是一种轻量级标记语言，创始人是约翰·格鲁伯（John Gruber）。它允许人们 “使用易读易写的纯文本格式编写文档，然后转换成有效的 HTML 文档。”...-HTML-HTML(offline) 导出html，导出的html中包含着样式，我们可以把样式单独放在一个文件中，供其他页面使用 markdown-preview-enhanced插件的语法与markdown...基本一样，主要区别是代码块，如果要高亮，需要在```后增加代码的类型，如css，javascript，html等详细语法说明：标题 # 这是一级标题 ## 这是二级标题...语法高亮你可以给你的代码块添加任何一种语言的语法高亮例如，下面代码添加语法高亮： ```html 单行文本溢出，单行文本溢出，</div...```javascript function add(x, y) { return x + y } [代码行数](https://shd101wyy.github.io/markdown-preview-enhanced

1.3K2 0

编译原理实战入门：用 JavaScript 写一个简单的四则运算编译器（二）语法分析

四则运算的语法规则（语法规则是分层的） x* 表示 x 出现零次或多次 x | y 表示 x 或 y 将出现 ( ) 圆括号，用于语言构词的分组以下规则从左往右看，表示左边的表达式还能继续往下细分成右边的表达式...语法分析对输入的文本按照语法规则进行分析并确定其语法结构的一种过程，称为语法分析。一般语法分析的输出为抽象语法树（AST）或语法分析树（parse tree）。...但由于四则运算比较简单，所以这里采取的方案是即时地进行代码生成和错误报告，这样就不需要在内存中保存整个程序结构。先来看看怎么分析一个四则运算表达式 1 + 2 * 3。...LL(0)分析法递归下降分析法是简单高效的算法，LL(0)在此基础上多了一个步骤，当第一个 token 不足以确定元素类型时，对下一个字元采取“提前查看”，有可能会解决这种不确定性。...// 5 + 5 转换为 5 5 + 再生成代码 push 5 push 5 add 代码实现编译原理的理论知识像天书，经常让人看得云里雾里，但真正动手做起来，你会发现，其实还挺简单的。

8936 0

再也不用为排版发愁了，五分钟带你学会markdown

说白了就是用很简单的语法来标准化排版，从而大大减轻编写文档以及排版的工作。对于程序员来说，撰写文档是一个相当重要的工作，所以markdown也是必学技能。...markdown也可以展示图片，展示图片的语法和超链接几乎一模一样，只是前面多了一个感叹号。同样我们在方括号中写入图片的展示信息，圆括号中写入图片的地址。我们写的是文本和地址，如： !...即两个反引号包裹，比如：我要写一段`JavaScript`代码显示出来的会是：我要写一段JavaScript代码，当中被反引号包裹的JavaScript会高亮显示。...如果我们要展示的是多行的代码，可以输入三个反引号加上语言的名称来进行高亮展示。比如我们编写Python代码，就指定高亮的代码语法是Python，它就会按照Python的语法对关键字进行高亮。...这里简单介绍一下图床功能，因为markdown当中只是保存了图片的地址，而不是复制了一份。使用图床也就是将图片上传到云端CDN，生成一个云端的图片链接，而不是存在本地通过相对路径引用。

2.3K1 0

常用的Markdown格式的语法规则

最近开始试着学习使用Typora写文档记录东西，这篇放一些常用的Markdown使用例以便回顾，并分享给大家Markdown介绍：Markdown是一种轻量级的标记语言，它允许人们使用易读易写的纯文本格式编写文档...Markdown的语法简单直观，目的是为了让非技术人员也能快速上手，用简单的符号和指令来添加如标题、列表、链接、图片等元素。...通常来说了解 Markdown 格式化语法的最佳方式除了阅读相关语法介绍以外，还有用.txt后缀打开.md文档查看 Markdown 格式的文档相应语法Markdown的基本语法包括但不限于：1.标题字符...删除线通常在文本的两侧加两个~~示例：~~我是地平论支持者（不是）~~我是地平论支持者(不是)3.引用要创建块引用，在段落前添加一个 > 符号，引用也可以嵌套，如加两个>>三个>>> n个>>>>......为此，Markdown的语法完全由标点符号组成，这些标点符号经过精心挑选，看起来像它们的意思。例如，文字周围的星号实际上看起来像强调它（加粗）。一个列表看起来就像，嗯，列表。

1913 1

如何简单地写一篇好看的微信推送(更新)

具体的使用方法请看知乎上的哪个微信编辑器比较好用这篇文章。进阶方式——markdown 前面非常简短地介绍了一下如何用常规方法编辑公众号文章，下面就要开始今天的正题——使用markdown来排版。...Markdown 是一个 Web 上使用的文本到HTML的转换工具，可以通过简单、易读易写的文本格式生成结构化的HTML文档。...如果你对markdown有兴趣，具体对于markdown的语法及介绍请看markdown官网。而对于公众号来说，我们用的是markdown here这个浏览器插件。...上标： 210 效果 210 下标： 210 效果 210 代码片段使用两次三个英文符号 ` （Tab键上面那个按键）将代码片段包围，当然，如果你要高亮的话请在第一个...``` 旁边添加具体语言，如css、java等

8671 0

24款神级插件，让你的 vscode更牛逼

老梁这里简单列举一下老梁安装过的语言。 C/C++ 提供C++语法识别、智能补全、代码跳转、调用依赖识别等，一般来说学生党安装这一个就可以了。...Markdown markdown语法支持，可以在vscode当中编辑markdown文档，还支持图床的图片上传功能。但老梁个人还是更喜欢Typora，很少在vscode当中写文档。...Python Python的语法支持，支持Python的单测、lint、语法高亮、代码格式化、debug、jupyter等功能。...Better Comments 美化注释，可以将我们的多行注释按照类别自动高亮，如： Bracket Pair Colorizer 开发神器，当使用多层括号嵌套时，自动将不同层次的括号设置成不同的颜色...使用它搜索一下，自动推荐合适的变量名，支持中文！ Excel Viewer 顾名思义，Excel表格预览，数据分析党的神器，再也不用一个窗口看数据一个窗口写代码了。

3.5K1 0

Markdown上手指南

Markdown上手指南前言 markdown 是一门很实用的标记语言，若是有HTML 基础学起来会非常快。演示效果均是从typora 展示的,为什么用它，因为它是一个成熟的 md 编辑器！...markdown 所见即所得, 部分还增加了人性化的交互(比如代码高亮) 支持公式支持大部分的拓展语法支持主流的流程图渲染温馨提示: 已经会的不用往下面看了,这文章一开始输出的目的是给我们研发组的小伙伴快速上手的...因为前端这块的文档基本切换到MD来维护，花了点时间录制了一波GIF演示基础语法基础语法是支持度最高的,市面上主流的 markdown 解析器基本都支持。...拓展语法表格表格的语法也很简单，就是写的多一些，因为列越多写的越多。默认的列左对齐,也支持设置居中和右对齐, 横杆大于等于3，列的竖必须闭合才能代表一列！...脚注这个东西在写文献用的最多格式：声明: [^text]: description 引用: hello[^text] [^李白]: 一个喝酒的诗人床前明月光[^李白] ?

7721 0

轻松搞定MarkDown

MarkDown是什么？ MarkDown是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。它允许人们“使用易读易写的纯文本格式编写文档。...因为它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里大家不要被「标记」、「语言」所迷惑。其实，Markdown 的语法十分简单。...这里可以指定代码所属的语言，只要在第一组反引号后面添加相应的语言名称即可。这样就会以javascript的语法格式来显示所包含的代码。如何设置首行缩进？...文档中用到了MarkDown语法中的符号：符号转义：如果你的描述中需要用到 markdown 的符号，比如 _ # * 等，但又不想它被转义，这时候可以在这些符号前加反斜杠，如 \_ \# \* 进行避免...如何设置语法高亮？在``（两个反引号）之间的文字会被高亮显示。例子： GitHub现在成了主流，不仅提供Git代码托管（取代SVN）、Issue追踪（取代JIRA）如何结束先前的格式状态？

1.9K5 0

插件机制详述_VSCode插件开发笔记1

UI DOM这一层可能会随着优化频繁变动，VS Code不希望这些优化项受限于插件依赖，所以干脆把UI定制能力限制起来除UI定制之外的，IDE相关的功能型特性都是支持扩展的，如基础的语法高亮/API提示...，通过VS Code debug协议与IDE通信 breakpoints 配合debuggers，声明对debugger支持的（编程）语言类型 grammars 新增TextMate语法描述，语法高亮....语言相关扩展通过配置文件来支持语法高亮、代码片段和智能括号匹配，更复杂的通过扩展API或language server来做配置型扩展语法高亮：基础支持区分字符串、注释、关键字等语法角色，高级支持变量...简单配置搞不定的，都通过扩展API（写插件）来实现，有2种方式：实现language server protocol与IDE通信，完全独立注册Provider提供自定义能力，类似于hook的方式...支持的扩展能力如下： hover提示：基础支持类型、文档等信息，高级支持方法签名语法高亮补全提示：高级支持在补全提示项旁边展示额外信息检查报错：基础支持保存时对打开的文件内容检查报错，高级支持对打开的文件目录里的任意资源检查报错

2.7K5 0

一篇文章玩转Markdown

Coding 的许多版块均采用了 Markdown 语法，比如冒泡、讨论、Pull Request 等。...普通文本: 这是一行普通文本 ---- 单行文本: 这行文本添加了一个制表符(Tab),或者4个空格符号块状文本: 这是一行块状文本文本前面添加一个Tab 文本前面添加了四个空格符 ---- 文字高亮...语法: `linux` `JavaScript` `socket` `String` 示例: linux JavaScript socket String 锚点 Coding 会针对每个标题，在解析时都会添加锚点...id 使用方式: 语法效果 [标题](#锚点ID) 回到顶部 ---- 外部链接 # 语法效果 1 [我的博客](https://www.i7dom.cn/2019/01/18/Markdown.html...---- 代码高亮在三个反引号后面加上编程语言的名字，另起一行开始写代码，最后一行再加上三个反引号。使用语法: ```php<?

2.3K2 0

这款Markdown神器，要收费啦！

大部分的Markdown编辑器都是一半是编辑窗口，一半是预览窗口，而Typora合二为一，更为简洁。支持 LaTeX 语法。支持图床功能。定制化主题。...Markdown Markdown是一种轻量级标记语言，排版语法简洁，让使用者更多地关注内容本身而非排版。...基础语法：代码高亮：输入 ``` 后并输入语言名，换行，开始写代码，Typora 会自动实现代码高亮的效果（如下图）。...配置完成之后，当你在 Typora 中插入本地图片时，PicGo 会自动将图片上传图床并使用 Markdown 语法替换图片地址。...Mermaid Mermaid是一个用于画流程图、状态图、时序图、甘特图的库，使用 JavaScript 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

2K3 0

这款Markdown神器，要收费啦！

不过，Beta版本还是可以继续免费使用的。作为 Typora 的重度用户，今天给大家介绍一下这款 Markdown 神器。简介 Typora 是一款支持实时预览的 Markdown 文本编辑器。...输入Markdown标记后，会即时渲染成相应格式。大部分的Markdown编辑器都是一半是编辑窗口，一半是预览窗口，而Typora合二为一，更为简洁。支持 LaTeX 语法。支持图床功能。...Markdown Markdown是一种轻量级标记语言，排版语法简洁，让使用者更多地关注内容本身而非排版。...基础语法：代码高亮：输入 ``` 后并输入语言名，换行，开始写代码，Typora 会自动实现代码高亮的效果（如下图）。...Mermaid Mermaid是一个用于画流程图、状态图、时序图、甘特图的库，使用 JavaScript 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

1.1K2 0

VScode神仙插件，程序员必备

Visual Studio Code是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令...C/C++ 提供C++语法识别、智能补全、代码跳转、调用依赖识别等，一般来说学生党安装这一个就可以了。...HTML/CSS HTML/CSS语法支持，前端党必备。 Markdown markdown语法支持，可以在vscode当中编辑markdown文档，还支持图床的图片上传功能。...由于很多github的repo都提供了markdown语法格式的readme文件，所以还是需要安装一下，这样才方便阅读。...Python Python的语法支持，支持Python的单测、lint、语法高亮、代码格式化、debug、jupyter等功能。

1301 0

使用marked解析markdown为html

前段时间玩了会儿hexo，发现用markdown写博客真的很爽，语法也十分的简介。于是打算将博客的富文本编辑器换成markdown。...看到这里请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。...marked 是一个 JavaScript 编写的全功能 Markdown 解析和编译器。 marked 的目的是快速的编译超大块的Markdown文本而不必担心结果会出乎意料或者花费很长时间。...新版本号称速度比C语言写的Markdown转换工具Discount 还要快。...需要安装highlight.js npm install highlight.js --save 设置语法高亮(为了正常显示，页面需要引入highlight.js的css) const highlight

4.1K2 1

GitHub 12个实用技巧

但是如果你直接粘贴一个段Vue，Typescript或者JSX代码，你可以指定出来以得到正确的语法高亮。注意第一行的 ```jsx : ? 意味着这段代码可以正确的显示： ?...(顺便说下，在gist中，如果你的gist文件后缀名是.jsx，将自动获得JSX语法高亮) 这是所有支持的语法列表. #4 在PRs中巧妙关闭issues 如果你创建了一个pull request来修复问题单...我先创建一个GitHub wiki，我从NodeJS文档找了几个页面作为wiki的页面，然后创建一个侧边导航来模拟实际的结构。侧边栏一直存在，不会对当前页面高亮。...您想将文本块存储在某个地方，而且可以很方便的编辑，且不需要开发。我的建议是文本写在markdown文件中，然后存到你的仓库。接着在前端写一个组件来请求文件然后渲染。...---- 往期精选文章使用虚拟dom和JavaScript构建完全响应式的UI框架扩展 Vue 组件使用Three.js制作酷炫无比的无穷隧道特效一个治愈JavaScript疲劳的学习计划全栈工程师技能大全

1.3K2 0

Markdown 写 PPT 是如何实现的？

前言 Markdown 是一种轻量的标记语言，我们只需要写 md 格式文件，不必考虑文档的排版，被广泛用于博客写作，技术文档编写等，程序员们都热爱，但我们工作中除了写文档，有时候还需要汇报工作，技术分享等...，需要用到 PPT，但设计 PPT 可能不是每个程序员所喜欢的，所以我们可以使用一个非常好用的工具 slidev, 可以使用 markdown 来制作演示文稿，这个工具很多小伙伴都知道，尤大的分享就经常使用...实现 markdown 解析常用的 javascript markdown 解析器有 markdown-it 、marked 、remark。...section 设置幻灯片的样式就可以实现简单的效果。...主要借助于prismjs 这个插件，可以参考之前写的这篇文章《使用 Prism.js 对代码进行语法高亮》。

9102 0

10款流行的Markdown编辑器，总有一款适合你

作为一个开源人，如果你不会使用Markdown语法，那你就OUT了！Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法，非常的简单实用。...WMD (wmd-editor)是一个简单轻量级的HTML编辑器，使用的是 Markdown 文本格式数据，适合用来做博客评论、发帖和一些基本的内容发布系统，支持流行的各种浏览器。...Mou 是 Mac下杰出的 Markdown 编辑器，提供语法高亮、在线预览、同步滚动、全屏模式，支持自定保存、自动匹配，允许自定义主题，支持 CSS，HTML 和 PDF 导出等。...EpicEditor 是一个可嵌入式的 JavaScript Markdown 编辑器，提供全屏编辑、在线预览、自动保存草稿和离线编辑支持。对开发者提供可可靠的 API 做风格设置。...CuteMarkEd 是一个 Markdown 编辑器，提供实时 HTML 预览、数学表达式和源码高亮。

1.5K4 0

vscode中好用的插件_捷达VS5和捷途X95哪个好

Draw.io Integration 画流程图 Data Preview 预览数据文件 ESLint 检查Javascript编程时的语法错误 EditorConfig for VS Code 代码风格统一...中 Import Cost 您查看导入模块的大小 JavaScript (ES6) snippets 支持JavaScript ES6 语法 JavaScript (ES6) code snippets...markdown语法检测 Markdown Preview Enhanced 编辑器内看markdown编译出来的效果 Markdown All in One markdown编辑器 Material...它将创建一个单独的水平窗口。点击窗口按 Ctrl + V 粘贴代码。在代码下面，粘贴另一个窗口，会看到像图标这样的摄像头。点击这个图标并保存图片。...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

3.5K1 0

R语言自动化报告格式——knitr

简单地说，报告中有文字也有代码，Knitr就是通过markdown的语法在报告中该显示代码的地方显示代码，该显示运行结果（比如图表）的地方显示运行结果，这样整个报告文档就可以直接运行再次生成报告，而不需要把代码单独复制到控制台中执行...[] 2、Markdown 是什么，如何写Markdown[] Markdown 是一种轻量级标记语言。类似HTML，但是比html简单的多，我在文件夹中放了一个markdown的语法说明。...通过以下5步，你就可以创建自己的第一个knitr文档： l 打开 RStudio, 点击File > New File > R Markdown…创建一个新的R Markdown 文件 l 为这个文件起一个有意义的名字...三、相关代码——文本输出[] 在文本输出方面，knitr包支持以下功能： l 代码高亮（highlight=TRUE），增强可读性，有无数的高亮主题可选，仅适用于LaTeX和HTML输出，MD文档在转为...HTML文档之后可以用专门的JavaScript库去高亮代码 l 代码重排（tidy=TRUE），对那些不注意代码格式的人来说很有用，再乱的代码，到了这里也会变得相对整齐，本功能由formatR包支持

1.3K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭