showdown让你的网站支持Markdown和代码块highlight
在CSDN写博客应该都用过Markdown吧,一种简单的标记语言。而有人拿他跟所见即所得编辑器比较,怎么感觉也对不上。那么在各大论坛、内容网站都支持Markdown的情况下,我们该怎么实现呢?搜索了半天也很少见到相关的资料,在此记录下自己的研究供大家学习。
所需文件:
- markdown.html
- showdown.js(https://github.com/showdownjs/showdown)
- highlight.site.pack.js(https://github.com/isagalaev/highlight.js)
- styles.css
- github.css(本例使用github语法高亮风格的样式)
一、问题分析
Markdown是一种类html标记语言,它的语法并不是浏览器能解析出来的;而是通过showdown.js工具将markdown文本转化为html文本,再由浏览器显示。但解析工具只负责解析目标文本,并不支持样式的填充;highlight.site.pack.js可以对解析后的文本添加class,再引入样式,就能实现语法高亮和自定义样式。下面开始进入正题…
二、实现Markdown文本的解析
1、首先到github下载showdown,我们只要showdown-master\src下的showdown.js
2、编写showdown.html
引入:showdown.js、styles.css
styles.css是我在(https://highlightjs.org/)扒下来的 ,找不到的私信我可以发给你
两个div一个button,markdownCode是目标markdown文本的容器;代码一定要靠左,里面有一段python代码和一个列表;解析按钮触发parser函数;container就是解析后的html文本容器了。
function parser() {var converter = new showdown.Converter();var code = $(".markdownCode").html();var html = converter.makeHtml(code);$(".container").html(html);
}
这里我用了jquery,jquery也引入html。
3、打开html点击解析看看结果
解析成功!
三、实现代码块语法高亮
https://github.com/isagalaev/highlight.js这个网址让我们引入:highlight.pack.js,但是压缩包里根本没有,只有highlight.js,我曾尝试使用highlight.js,没有效果;我也不知道是什么原因,我们还是先下载下来吧
1、下载highlight,引入里面的github.css,同目录下各种风格的随你玩;
2、用谷歌浏览器审查元素可以发现,目标markdown文本被pre、code两个标签包裹,里面就再没有标签了;若想代码块高亮就要插入标签添加class。
3、在body后追加一段准备处理的html,用pre、code标签包裹
里面的一端代码是从highlightjs.org网站拷贝过来的,等会做下对比。
4、引入highlight.site.pack.js,并执行初始化方法,该方法会在页面onload触发
5、刷新html,结果:
再来看看highlightjs.org网站上的
highlight.js中的initHighlightingOnLoad方法
function initHighlightingOnLoad() {addEventListener('DOMContentLoaded', initHighlighting, false);addEventListener('load', initHighlighting, false);
}
showdown让你的网站支持Markdown和代码块highlight相关推荐
- marked生成Markdown导致代码块错位的BUG解决
问题描述 如上图,一段完整的代码被marked解析之后,出现错位. 问题原因 在marked.js低版本才会有此问题,最新的marked.js版本就没有这样的问题了. 问题解决 将项目中marked. ...
- MarkDown代码块高亮
我们使用MarkDown添加代码块时需要标记语言来实现高亮 使用标记前 public static void main(String[] args){System.out.println(" ...
- 用Markdown优雅地一键排版公众号 解决公众号排版代码块换行错误的问题
用Markdown优雅地一键排版公众号 解决公众号排版代码块换行错误的问题 不知道说些啥,反正vx后台的富文本编辑器挺烂的,秀米等一众辅助工具根据界面看起来是将HTML的盒子模型的各项CSS属性以&q ...
- MarkDown代码块出现多余段落标记
1.MarkDown粘贴代码块时出现多余段落标记</p>确认代码无误 2.删除上一代码块标识符```前的空格 3.问题解决
- 《安富莱嵌入式周报》第298期:迷你火星探测器,开源单片机3D实时渲染库, 开源USB工业相机,VS2022开始支持MarkDown,PC-lint 2.0发布
往期周报汇总地址:嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - P ...
- 打造VS Code(支持Markdown/UML/脑图/代码模板)
文章目录 Markdown 脑图 UML MD 中插入 UML 代码模板 mermaid 语法 小结 Visual Studio Code是一个文本编辑器,除了写代码和编辑普通文本外,借助插件还可以实 ...
- wiki php markdown,一款支持Markdown语法的Wiki知识管理系统:Wikitten搭建教程
简介 Wikitten是一款开源Wiki知识管理系统,使用PHP开发,支持Markdown语法,无需数据库,自动生成树形目录,适合用来做个人Wiki知识库. 截图 安装 环境要求:PHP >= ...
- 支持markdown的服务器,Algernon:支持Lua,Markdown,HTTP/2的全功能Web服务器
最新HTTP/2标准已经发布,是基于谷歌QUIC的技术升级而成.虽然标准已经发布,但是目前还鲜有应用支持,那么有没有方法进行技术尝鲜呢?答案是肯定的.本文虫虫给大家介绍一个Golang Web服务器应 ...
- 想有自己的博客吗?浏览器支持 MarkDown和语法高亮的最简单示例(使用markdown-it、highlight.js和mermaid)
MarkDown,写作神器,还是有必要掌握一下.写作也是一种很重要的能力,需要长久坚持和锻炼. 写作能力重不重要?语文重不重要?读书重不重要? 我觉得语文和写作能力是所有能力的基础,是重中之重.因为你 ...
- Vien Blog - 一款基于laravel5.8的开源博客,支持markdown
laravel-blog Vien Blog - 一款基于laravel5.8开发的,支持markdown编辑以及图片拖拽上传的博客系统.SEO友好 博主网站 VienBlog 这里有些小秘密 项目G ...
最新文章
- 在Linux上部署aspnet mvc3
- 【科技金融】风控命门——第三届互联网金融风控大会会后复盘
- python回归模型 变量筛选_如何进行高维变量筛选和特征选择(一)?Lasso回归
- Codeforces Round #320 (Div. 1) [Bayan Thanks-Round] A A Problem about Polyline(数学)
- 数据结构基础:树结构的学习笔记
- poi获取有效单元格个数_EXCEL利用SUM函数和FREQUENCY函数数组公式统计不同区间数据个数...
- 支付系统设计:支付系统的账户模型(一)
- 搭建本地Ubuntu14.04源
- 编译原理总结(个人向)
- 【IoT】产品设计:硬件产品开发流程之ID与MD设计(文字)
- 小象学院hadoop进阶
- 为什么最近iOS开发岗位那么多(第一篇)
- matlab点符号怎么打出来的,在matlab中怎么输入特殊符号
- ios iPhone的 自带输入法emoji编程
- java jitter buffer_android webrtc jitter buffer大小设置
- 联发科技嵌入式_【MTK联发科技嵌入式软件开发工程师面试题目|面试经验】-看准网...
- 马云号召快递公司提升员工待遇:快递员带回家的钱要让家人惊喜
- 手机看家监控摄像头怎么连接手机
- 人生少走弯路的十条忠告
- RBC(Radio Block Center)无线闭塞中心
热门文章
- 已解决:网易邮箱smtphz.qiye.163.com在阿里云环境发不出邮件的问题
- 简述扁平式管理的技术手段
- Python也有对象了哈哈哈哈哈哈嗝
- 进阶篇:5.1.1)确认公差分析的目标尺寸和判断标准
- Python入门——文件读写
- 51单片机定时器 TMOD、TCON设置_codestorm_新浪博客
- 泛泛而谈的渲染学习记录(二)—— 高斯模糊卷积的线性分解理解
- 区块链全球社区协作工具,就用超级表格!
- android通讯录照片同步,通讯录同步助手
- 用python turtle画人_家里蹲太孤单?用 Python 画一只单身狗