【网络教程】如何让Markdown编辑器正常的显示HTML标签（HTML转义字符收集）

最新推荐文章于 2024-05-21 09:59:04 发布
最新推荐文章于 2024-05-21 09:59:04 发布
阅读量1k 收藏
点赞数
分类专栏： 自学笔记 网络教程 文章标签： 编辑器 html markdown 转义字符
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoqiangclub/article/details/124740062
版权
自学笔记 同时被 2 个专栏收录
272 篇文章 211 订阅 ¥19.90 ¥99.00
订阅专栏
网络教程
166 篇文章 78 订阅 ¥19.90 ¥99.00
订阅专栏

文章目录

问题

我们在使用Markdown编辑器编写文章的时候，有时候需要在文章中展示HTML标签，比如：<button> <html> <h1> <div>等，但是编辑器会将内容转为HTML标记而导致无法达到我们预期的显示效果

解决方案

  • Markdown完全兼容HTML语法，所以我们只需要将标签中的大于号或者小于号使用转义字符来代替即可！
  • 比如：&lt；div>或者<h1&#62；注意：这里为了演示效果，我将英文状态的;改为了中文状态的；

转义字符

  • 转义字符查找，可以在网页上使用Ctrl + F进行快速搜索
  	&#09; //制表符Horizontal tab
了解本专栏 订阅专栏 解锁全文
xiaoqiangclub
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
jquery-markdown:在html上显示markdown的演示
05-16
在html上显示markdown的演示 参考： :
idea常用快捷键、markdown中html小技巧
weixin_44587820的博客
11-11 1157
idea快捷输入： - 输入 psvm 可以提示main 方法 - 输入 sout 可以提示输出语句 - 100.fori ⇒ for (int i = 0; i < 100; i++) {} f1();//Alt+Enter就会自动创建出的函数 private static void f1() {} idea快捷键： - alt+enter 补全代码 左边的 比如返回类型 还有比如 写一个方法名,自动补全方法 是一个万能提示键 - ctrl+alt+v 自动补全
Markdown中如何显示HTML标签
热门推荐
张木期的博客
03-17 2万+
Markdown显示HTML标签以及转义字符 我们在使用Markdown编辑器时，如果遇到HTML标签，则编辑器会将内容转为HTML标记，这就与我们原来的本意像违背了，如果我们只是想显示一些标签的字面内容而不想被转换，这时我们需要懂得一些常用的转义字符表： 例如：我们只是想显示<HTML>这个内容，但是如果直接写就会被转换而看不见。 所以，写的形式应该为： &#60;HTML...
markdown 转 Html （小技巧）
qq_43389371的博客
05-12 3497
markdown 转 Html 整篇博客使用 CDN 的方式引用以下文件 marked.js 将 markdown 转换成 html highlightj.js 代码高亮 highlightjs-line-numbers.js 代码行号 什么是 marked 为速度而建 用于解析markdown的低级编译器，无需长时间缓存或阻塞 重量轻，同时实现支持的口味和规格的所有降价功能 在浏览器，服务...
【markdown】显示HTML的标签
AXIMI的博客
02-27 470
转自：https://blog.csdn.net/sinat_37976731/article/details/79521796
markdown高亮显示html语言,将markdown文件转成HTML并支持代码高亮
weixin_29062671的博客
06-03 442
Render Markdown JavaScriptRenders markdown files to HTML with highlighted code blocks BUT ALSO RENDERS THE JAVASCRIPT ONES. Why?I've got a bunch of little JavaScript UI libs that don't need much more ...
markdown以html显示
JesusSlim的专栏
04-07 992
http://strapdownjs.com/ Hello Strapdown theme="united" style="display:none;"> # Markdown text goes in here ## Chapter 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei
html+js 实现markdown编辑器效果
12-14
markdown的Editor.md插件官方网站：https://pandao.github.io/editor.md/ 一：下载Editor.md 1：进入官网直接进行下载 github下载地址：https://github.com/pandao/editor.md 2：使用npm进行下载 npm install ...
Markdown在线编辑器-HTML网页源代码
05-19
这是一个Markdown在线编辑器-使用HTML网页制作而成，以下还有↓ 创建一个HTTP服务，用PC浏览器打开即可浏览使用， 此项目用到jquery,bootstrap，可以打开和保存文本文件，生成文档图片， 源代码供学习参考，配套的...
CSDN-markdown编辑器使用教程.html
12-04
CSDN-markdown编辑器使用教程，CSDN自带的介绍范文模板 如果写过一次博客，这个文档就找不到了，在这里备份一下，方便大家查阅。
markdown转html带样式
11-20
markdown转html带样式，使用github-markdown-css样式，如果积分不够直接去这个链接https://blog.csdn.net/isyoungboy/article/details/81286611 复制代码即可
jQuery实现Markdown编辑器插件
06-24
jQuery实现Markdown编辑器插件是一款基于bootstrap的Markdown网页文本编辑器插件。
Portable-Markdown-Editor:一个HTML文件中的Markdown编辑器
05-03
便携式Markdown编辑器 一个HTML文件中的降价编辑器。 截屏 如何使用 下载markdown-editor.html ，然后将其放在所需的位置。 在网络浏览器中打开文件。 现在您可以使用Markdown编辑器和Slide !! 您也可以在上使用...
markdown格式文档显示为html,markdown.css 让 HTML 显示成 Markdown 纯文本 见证 CSS 的强大...
weixin_31755771的博客
06-03 536
Markdown.css 是一个很有意思的 CSS 样式表。它可以让 HTML 显示成类似 Markdown 纯文本的形式。(图片除外)。基于 LESS 编写Markdown.css 基于 LESS 编写，源代码在此。下面简要地解析一下具体实现的方法。标题markdown 的标题在前加上 # 到 ###### 表示。这是用了 CSS 的伪类 :before 实现，例如 h2 是这么定义的：h2:b...
html展示markdown文件,在前端页面展示Markdown文件
weixin_30884743的博客
06-26 6309
常我们都会在GitHub上浏览很多的readme文件，这些都是Markdown语法写成的Markdown文件，HTML中并没有用于展示Markdown文件的元素，那么为什么可以在前端展示呢？有别于GitHub官方给提供的API(有访问频率限制)，我使用了一个npm 模块。这个模块可以非常方便的将Markdown语法的字符串直接转化为HTML 代码字符串。然后我们让某个div元素的innerHTML...
Marked.js - HTML 中直接解析显示 Markdown
hzx198's Blog
01-06 3996
Marked.js 的介绍与使用
Html中引入和显示Markdown文件
学海无涯，回头是岸
11-07 1万+
在使用Markdown编写开发文档时，由于Markdown语法不支持锚点跳转，于是想到把.md文档加载到Html页面通过 a 标签里来实现跳转。
html 读取markdown文件,JS加载解析Markdown文档过程详解
weixin_32151313的博客
06-20 826
md文档内容转成html显示公式第一个Markdown文档function showMarkdown() {var f = form;var xmlhttp;if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else {xmlhttp = new ActiveXObject('Microsoft.XMLHttp');}xmlh...
Cocos Creator 编辑器的数据绑定详解
最新发布
Thomas_YXQ的博客
05-21 440
Cocos Creator 是一款由 Cocos 平台推出的游戏开发工具，它集成了图形化编辑器、脚本引擎和资源管理器等功能，方便开发者快速地创建游戏。其中，数据绑定是 Cocos Creator 编辑器中非常重要的一个功能，它可以帮助开发者实现页面元素与数据模型之间的双向绑定，使得数据的变化能够自动反映在页面上，极大地提高了开发效率。对惹，这里有一个游戏开发交流小组，大家可以点击进来一起交流一下开发经验呀！数据绑定的原理是通过监听数据模型的变化，一旦数据发生变化，就会自动更新页面上与之绑定的元素。
写一段markdown编辑器的HTML代码
06-02
以下是一个简单的 Markdown 编辑器的 HTML 代码示例，包括一个文本框和一个预览框： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Markdown Editor</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/marked/marked.min.js"> </head> <body> <h1>Markdown Editor</h1> <textarea id="markdown-input" rows="10" cols="50"></textarea> <div id="preview"></div> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script> // 获取文本框和预览框 const input = document.getElementById('markdown-input'); const preview = document.getElementById('preview'); // 将 Markdown 渲染为 HTML 并更新预览框 const updatePreview = () => { const markdown = input.value; const html = marked(markdown); preview.innerHTML = html; }; // 监听文本框改变事件，更新预览框 input.addEventListener('input', updatePreview); // 初始化预览框 updatePreview(); </script> </body> </html> ``` 在上面的代码中，我们使用了 [marked](https://github.com/markedjs/marked) 库将 Markdown 渲染为 HTML，并使用了 JavaScript 监听文本框的改变事件，以便在用户输入时自动更新预览框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaoqiangclub

谢谢支持！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值