前端--三种插件用来解析mardowm,转化成为html语法

2023-10-30

  • 前端–三种插件用来解析mardowm,转化成为html语法
  • 使用方式十分简单,快捷
  • 参考地址:

1、markdown.js

<script src="js/plugins/markdown.min.js"></script>
<div>
    <!-- 输入区 -->
    <textarea id="text-input" oninput="this.editor.update()">在此处输入相关markdown语句</textarea>
    <!-- 显示区 -->
    <div id="preview" class="pull-left"> </div>
</div>
<script>
    // markdown
    function Editor(input, preview) {
        this.update = function () {
            preview.innerHTML = markdown.toHTML(input.value);
        };
        input.editor = this;
        this.update();
    }
    var _a = function (id) { return document.getElementById(id); };
    new Editor(_a("text-input"), _a("preview"));
</script>

2、showdown.js

<div>
    <textarea id="content" style="" onkeyup="convert()"></textarea>
    <div id="result">
</div>
<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script> 
<script>  
    function convert(){
        //获取要转换的文字
        var text = document.getElementById("content").value;
        //创建实例
        var converter = new showdown.Converter();
        //进行转换
        var html = converter.makeHtml(text);
        //展示到对应的地方  result便是id名称
     document.getElementById("result").innerHTML = html;
    }
</script>  

3、strapdown.js

<textarea theme="united" style="display:block;">
</textarea>
<script src="strapdown.js"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端--三种插件用来解析mardowm,转化成为html语法 的相关文章

  • 为什么内部 DIV 会溢出到外部 DIV 之外?

    我已经远离 HTML 和 CSS 很久了 找不到这个简单问题的解决方案 我有一个 div 位于另一个 div 中 外层黑色 内层橙色 我的 HTML 和 CSS 是 outer position fixed width 30 height
  • 如何使用 HTML 和 CSS 在我的网站上显示社交图标?

    我拼命尝试向我的网站添加一些图标 但无法让它们正确显示 我想要的只是一个包含图像并在线显示它们的容器 然后我想在该容器和图像之间添加一些填充 仅此而已 看这里我的方法 如果有人可以帮助我并纠正我的代码 使其真正有效 我会非常高兴 在我的 H
  • CSS 过滤器在 Firefox 中不起作用

    我正在尝试 CSS 过滤器 但它在我的 Firefox 15 0 浏览器中不起作用 HTML div class google img src https www google com images srpr logo3w png div
  • @fontface - 禅宗购物车中的 403 禁止错误

    我不确定这是否是发布此内容的正确位置 因为我不知道问题出在哪里 基本上 字体现在对我来说真的很痛苦 而且没有任何效果 我尝试从 google fonts 加载字体 但遇到了 IE 问题 所以我决定下载它们并自己提供服务 但现在它无法在任何浏
  • 即使我的情况按预期发生变化,Angular ngClass 也不会更新我的课程

    我正在创建的模板中有类似的内容 div class nng 3 div 价值app layout isNavbarFixed等用零或一初始化 并且页面第一次加载时 适当的类被插入到我的div 不过 此后通
  • Radiobutton-带有纯 html/css 的按钮

    是否可以创建像这样的单选按钮JQuery http jqueryui com demos button radio那些 用纯html css thanks 试试这个小提琴 http jsfiddle net mcXm7 1 http jsf
  • 实际上并不向服务器提交任何内容的 HTML 表单(JavaScript 中的客户端处理)

    我有一个带有输入的 HTML 表单 它只会在 JavaScript 和 jQuery 中进行客户端处理 但实际上不会向服务器提交任何内容 在 HTML 中布局此类表单并编写 JavaScript 的正确方法是什么 该 JavaScript
  • Youtube API 设置当前时间

    我目前正在我的一个项目中使用 You Tube API 我的使用方法如下 var tag document createElement script tag src https www youtube com iframe api var
  • 如何使用 tablesorter Stickyheaders 小部件 - 不起作用?

    我在尝试将 StickyHeaders 小部件实现为 tablesorter 插件的一部分时遇到问题 我已按照通过 Stackoverflow 和其他网站找到的教程中的说明进行操作 但似乎没有任何效果 这是我的header code
  • Bootstrap 3.0:全宽彩色背景,中心紧凑列

    我想要制作一个条纹商业主题 类似于 W3Schools 创建的主题 主题可以找到here http www w3schools com bootstrap bootstrap theme company asp 它的特点是水平部分 由不同的
  • phonegap 中的 HTML 按钮没有反应

    我有三个 HTML 按钮 当我单击它们时 没有外部发光 并且它们不执行任何操作 我也尝试过对它们进行样式设计 但它们仍保留默认设计 我刚刚使用了普通代码 我只是不知道它们出了什么问题
  • 如何创建一个对角分割的页面,两半是可点击的链接

    我需要创建一个对角分割的登陆页面 像这样的东西 我需要页面的两个区域都是可单击的 并且在最好的情况下 所有内容都应该动态地适应用户的显示器 以便显示器始终分成两半 我该怎么做 我应该使用画布吗 欢迎任何建议 以及如果我使用画布可能的后备方案
  • 仅使用 HTML 正确填充电子邮件

    对于作业 我需要放置一个form在我的网页中 并让表单填充一封电子邮件供用户发送 我在四处搜寻后写下了这个
  • 让两个按钮彼此相邻

    我的设计有问题 我的产品页面上有两个按钮 然而 由于其中一个处于表格中 因此它们彼此叠置 参见图片 我想让这两个按钮彼此相邻 有人可以帮我吗 下面我添加了 HTML 和 CSS 代码 提前致谢 HTML div class containe
  • 在 th:href 链接中使用模型属性

    有没有办法在 th href 链接中引用模型属性 例如 a a Here 当前用户是控制器中指定的模型变量 这可以很容易地访问 如th text标签 但是 那th href百里香解析失败 如果有任何方法以这种方式引用模型属性 则在th hr
  • 在网络浏览器上显示 UTF-16 字符

    我打印了一些 UTF 16 编码的字符并尝试在 Firefox 中显示它 它显示为 所以我进入 工具 gt 编码 并将编码从 UTF 8 更改为 UTF 16 我也尝试直接在 HTML 中更改字符集 但是 当我这样做时 我的页面完全被符号淹
  • 使用 jQuery 更改 SVG 元素的“xlink:href”属性

    我正在尝试使用单击事件更改 xlink href 属性 到目前为止它部分有效 这就是我正在做的 HTML a href class ui btn ui corner all ui shadow editIcon style text ali
  • 单击时突出显示文本(javascript jquery html)

    当您在所有浏览器中双击某个单词时 它们会自动突出显示单击下的单词 但是否有可能找到一种方法exact单击一下就会发生同样的事情吗 我想这涉及到的事情可能是 TextRange 的东西 对所有段落 或整个正文或 div 的 onclick 做
  • 手机上的网页滚动条可以隐藏吗?

    我正在尝试在移动设备上隐藏滚动条 一切在桌面上看起来都很好 没有滚动条 但是当我检查某些 Android 设备 ipad 时 我仍然可以看到灰色 细小的拇指 可以从浏览器中隐藏预定义的滚动条 我的代码 在桌面上运行良好 body webki
  • 具有相等宽度和高度 TD 的响应式表格

    如何创建每个单元格 TD 具有相同宽度和高度的响应式 HTML 表格 因此 当我调整浏览器窗口的大小或调整表格容器的大小时 表格将调整大小 但每个单元格将具有相同的高度和宽度 基金会不关心这个 当我用固定宽度和高度 以像素为单位 初始化 T

随机推荐

  • 天翼云登录破解js逆向

    网站 https m ctyun cn wap main auth login redirect 2Fmy 账号 234555551 qq com 密码 fffffffffff 666 抓包分析一下 密码直接加在url后面进行请求 打个xh
  • 阐述篇-聊聊我眼中の《面试宝典》

    相信或许很多人是因为通过搜索面试宝典的文档点进来的 你或许正在忙碌找工作 你或许想在跳槽之前把能量池蓄满 if dev HR 或许你可以花5min看完 求职篇 面试多家公司却总是电话通知 why 面试感觉聊的很好 就是迟迟没有电话 why
  • 游戏开发unity UGUI知识系列:判断是否点击在UI对象上

    EventSystem current IsPointerOverGameObject 检测点击是否在ui上 通常可以用来方便判断是否点击在屏幕上 用来进行镜头左右上下的角度的调整前的判断 需要注意的是 使用EventSystem时 场景里
  • 物理地址 = 段地址*10H + 偏移地址

    程序如何执行 CPU先找到程序在内存中的入口地址 地址总线 8086有20根地址总线 每一根可以某一时传0或1 20位的二进制数字可以表示的不同的数字的个数是2 20 1048576 1048576 byte 1024 1024 KB 注
  • ffmpeg将webm格式转换成mp4

    ffmpeg将webm格式转换成mp4 起因 转换成HEVC编码 H 265 转换成AVC编码 h 264 起因 手头有一部4K风景视频 辛辛苦苦从油管上下载下来 想要用wallpaper engine做成壁纸 却发现格式是webm vp9
  • MAC地址表

    MAC地址表实验 动态AMC地址 通过源mac地址表学习
  • C语言程序设计经典例题----海伦公式求三角形面积

    海伦公式 又译作希伦公式 海龙公式 希罗公式 海伦 秦九韶公式 它是利用三角形的三条边的边长直接求三角形面积的公式 表达式为 S p p a p b p c 以下是这个程序的成功和失败示例 这个程序利用到判断以及求值两个部分 因此我们可以利
  • 树的遍历(概念与习题)

    树的遍历概念 首先我们观察三种遍历方式对根 左 右结点的遍历顺序 先序的遍历顺序 根 左 右 中序的遍历顺序 左 根 右 后序的遍历顺序 左 右 根 遍历顺序可以理解为 优先级 先序遍历举例 若一个节点有左子树和右子树 那它下一步将会先走向
  • SSM框架整合静态资源自动加请求前缀

    静态资源自动加请求前缀 当如js文件在jsp中被引入时 可能请求转发到该页面会js文件报404错误 这是因为js文件路径在项目名与js文件名之间自动加上了请求路径的父级路径 解决方案 在jsp页面顶部以及head标签中加入Java脚本代码如
  • 【小结】从输入URL到页面显示发生了什么?(二)渲染

    本文总结从输入URL到页面显示的第二部分内容 渲染 从拿到HTML资源到显示的过程 主要过程 构建DOM树 样式计算 分成三步 把 CSS 转换为浏览器能够理解的结构 styleSheets 转换样式表中的属性值 使其标准化 计算出 DOM
  • yuv图解(YUV444,YUV422,YUV420,YV12,NV12,NV21)

    参考文章 图解YUV YUV是什么 YUV 444 422 420 And YUV Packed Planar Semi Planar 知识点 YUV是用一个称为Y 相当于灰度 的亮度分量和两个色度分量表示 分别称为U 蓝色投影 和V 红色
  • Cgroups----限制kvm虚拟机

    Cgroups 限制kvm虚拟机 Cgroups相关概念及其关系 相关概念 1 任务 task 在cgroups中 任务就是系统的一个进程 2 控制族群 control group 控制族群就是一组按照某种标准划分的进程 Cgroups中的
  • 查看mysql版本的六种方法

    1 root localhost mysql V 2 root localhost mysql help grep Distrib 在mysql下有四种 3 登陆时会显示 4 mysql gt status 5 mysql gt selec
  • 中阳:ChatGPT横空出世,或迎来“安卓时刻”

    ChatGPT横空出世 写代码 写情书 写文章 做题 它啥都会 会被人工智能替代的行业 由人工智能实验室OpenAI发布的对话式大型语言模型ChatGPT在各大中外媒体平台掀起了一阵狂热之风 继 AI 绘画之后 由 OpenAI 上线的 C
  • Reference vs Pointer

    参考自Dan Saks的文章 An Introduction to References References and const The key insights I believe the key insight into why C
  • 用git和idea推送本地项目到远程仓库

    方式一 git命令方式 1 鼠标右键 Git Bash Here 2 初始化仓库 git init 3 配置签名 git config user name Zhang3 git config user email zhang3 163 co
  • WebFlux出现接口已返回成功,但查询时数据未改变的问题

    问题描述 在使用WebFlux时遇到一个很奇怪的问题 先调用禁用账号接口 接着在进行查询该数据 结果页面显示数据未改变 在点一次时页面数据才刷新 即连续点两次查询接口 才能看到修改后的数据 相关代码 前端 const disableAcco
  • 商城登录后端

    二 登录 1 用户名和密码 用户名和密码的格式验证可以不需要在后端进行 在前端服务器判断就可以 2 图片验证码与验证 import string redis from captcha image import ImageCaptcha cl
  • Email Error - You have exceeded the storage limit on your mailbox

    Description You may receive an error You have exceeded the storage limit on your mailbox Delete some items from your mai
  • 前端--三种插件用来解析mardowm,转化成为html语法

    前端 三种插件用来解析mardowm 转化成为html语法 使用方式十分简单 快捷 参考地址 1 markdown js 下载地址 https github com evilstreak markdown js div div