-
用showdown给HTML网页插入markdown笔记
2018-03-26 21:41:25本文的目的是给个人创建的blog网站增加markdown博文的解析与显示功能 环境 windows10 pycharm2017.3.3 professional edition python3.6.4 django2.0.2 方法 下载showdown.js,下载完成后,将文件里的...前言
本文的目的是给个人创建的blog网站增加markdown博文的解析与显示功能
环境
- windows10
- pycharm2017.3.3 professional edition
- python3.6.4
- django2.0.2
方法
- 下载showdown.js,下载完成后,将文件里的showdown.js文件放到项目内对应js目录下,目录请根据自己的项目自行调整。
在引入之前下载的showdown.js文件,比如
<script src="/static/js/showdown.min.js"></script>
根据官方提供的例子,在HTML页面里解析markdown语言的方法如下
<p id="output">test</p> <script> var converter = new showdown.Converter(), text = "# title", html = converter.makeHtml(text); document.getElementById('output').innerHTML = html; </script>
其结果是将text内的markdown语言转化成HTML语言病替换到test的位置
但是一般我们不会将大片的markdown笔记直接放入HTML文件中,如果我们的数据是放在数据库里的,那么就需要改变获取数据的方式,方法如下:
首先,需要定义需要从数据库获取文档<p id="content" class="hide">{{ blog.content}}</p>
其次,就是让js程序读取文档
text = document.getElementById('content').innerText
最终结果就是
<p id="content" class="hide">{{ blog.content }}</p> <p id="output">test</p> <script> var converter = new showdown.Converter(), text = document.getElementById('content').innerText, html = converter.makeHtml(text); document.getElementById('output').innerHTML = html; </script>
-
如何在禅道或者网页使用MarkDown样式
2017-07-20 11:51:45一、我的做法如下:1、先在csdn里面用markdown来编辑要发布的文章;这里写有个好处,实时对照样式,还可以查看帮助,还有很多快捷键可以使用。例如: Ctrl+k:快速添加代码:I am test code !Ctrl+g:快速插入图片...一、我的做法如下:
1、先在csdn里面用markdown来编辑要发布的文章;
这里写有个好处,实时对照样式,还可以查看帮助,还有很多快捷键可以使用。例如:
Ctrl+k:快速添加代码:
I am test code !
Ctrl+g:快速插入图片,例如:
#表示加大文字size,类似html里面的h1-h6,#越多,字体越小,可以自己测试一下。这里举两个例子:
我是1个#号形成的字体
我是2个#号形成的字体
我是3个#号形成的字体
我是5个#号形成的字体
完整的帮助说明看下图:
的确很不错哦,实时插入表格,ul等等。
2、在csdn编辑好要发布的文本,然后把源代码粘贴到sublime中,保存为html格式或者markdown格式。
3、利用sublime插件,将markdown语法的文本转化为通用的html,然后接下来的事情,大家都知道了。说起来很长,但是实际操作起来是非常快的。
二、实操:
下面进行实操,我们在csdn里面的markdown写好了文章,怎么把他转化为产道里面的markdown代码呢?要知道,禅道免费版本是不支持markdown语法的,那么,我们就可以把markdown转化为html格式的文件,任何地方通用,网页均可!这个就牛逼了!这里需要使用到一个sublime的插件:
MarkdownEditing:这个是编写Markdown文件的
OminiMarkupPreviewer:这个是预览markdown文件的。有这两个插件,在sublime里面点击右键就可以看到如下内容:
看到了吧?可以导出文件为html格式,这个就是今天的重点了,有了html代码,想放哪里都可以!
我们就选择
Copy Markup as Html
,粘贴到任意你想要使用的地方。我在粘贴到禅道的时候,出现了问题,不显示,问了下同事,推测是html里面body\head\meta
等标签在禅道里面不支持嵌套的原因,把代码粘贴到新建的sublime html
文件中,去掉头尾的html\head\meta\body
,再次粘贴到禅道,就可以了!好看的格式就这么生成了!以后大家写内部文档省事多了! -
使用showdown将markdown笔记插入到HTML网页
2020-05-25 20:03:47showdown是一个Javascript标记到HTML转换器,将markdown文本转换为HTML,基于John Gruber的原始作品。showdown可以使用在客户端(在浏览器中)或服务器端(使用NodeJs)。 它比较适用于个人博客,在线下将笔记或者其他...介绍
showdown是一个Javascript标记到HTML转换器,将markdown文本转换为HTML,基于John Gruber的原始作品。showdown可以使用在客户端(在浏览器中)或服务器端(使用NodeJs)。
它比较适用于个人博客,在线下将笔记或者其他内容写成markdown,然后上传到服务器,在客户端或服务端转换为HTML便可渲染到客户端,展现给用户。
安装
Bower
bower install showdown
或:
npm (server-side)npm install showdown
客户端引入
使用的话有两种方法:
1、使用上述方法安装,将showdown项目下载到项目中,然后引入到项目,如<script src="node_modules/showdown/dist/showdown.min.js"></script>
注:
showdown.min.js
文件的路径
2、通过CDN引入,也就不需要安装了<script src="https://unpkg.com/showdown/dist/showdown.min.js"></script>
服务端引入
由于我用的node.js,所以这里只介绍在node项目中的引入,首先需要使用上面的方法进行安装,安装后即可引入
var showdown=require('showdown')
使用
1、客户端
var converter = new showdown.Converter(), text = document.getElementById('content').innerText, html = converter.makeHtml(text); document.getElementById('output').innerHTML = html;
2、服务端
app.get('/markdown',function (req,res) { let converter = new showdown.Converter(); let html = converter.makeHtml('# 你好'); console.log(html) res.send(html) })
-
用Markdown插入图片
2019-01-16 00:32:01然而,有必要知道如何用Markdown插入图片。更准确地说,我正在讲如何 只用Markdown 插入图片。 怎么做 方法很简单。你只需要在你想要插入图片的地方写上:  举个...我已没有必要浪费时间解释在网页或其它形式的文档中拥有图片的重要性,如今图片已经遍布各处。然而,有必要知道如何用Markdown插入图片。更准确地说,我正在讲如何 只用Markdown 插入图片。
怎么做
方法很简单。你只需要在你想要插入图片的地方写上:

举个例子,让我们来看看这个用上面的方法插入的Tux的图片。
问题
然而,只使用这个方法可能会造成一个问题。如果图片的分辨率过高或过低,网页上显示的图片体积会因为太大或太小而观看体验不佳。
太大:
太小:
解决方案
这个问题是否有解决方案?答案是肯定的。然而,解决方案超过了我们今天的”只用Markdown“这个话题范围。因此我将跳过它。不过这个解决方案与HTML、CSS有关。
引用
-
, from the home page of The Linux Kernel Archives. Retrieved in January, 4, 2019.
-
Photo of Vinece, from ARRIVING INTO VENICE, ITALY AND THE ATVO BUS by Marian Krueger, in category Destinations, Italy, 09/06/2014. Retrieved in January, 4, 2019
-
Photo of Alps, from White - Wikipedia, the free encyclopedia. Retrieved in January, 4, 2019.
-
-
MarkDown插入本地图片
2019-03-28 22:05:422、打开Markdown在需要插入图片的地方落下光标,选择插入图片,粘贴URL。(注意:Markdown前面的自带的http:要删掉,直接用CSDN给的所有URL即可) 3、完成。 缺点:直接导出为PDF时还是没有图片,不知道为啥,... -
如何在网页中加载Markdown编辑器
2020-09-25 16:47:54但是怎么插入Markdown编辑器呢? 首先,要下载有关文件。 点此下载 下载完成后,解压缩并从以下路径提取出: editor.md-develop\examples\css\style.css editor.md-develop\css\editormd.css editor.md-develop\... -
jupyter notebook利用markdown插入图片
2019-08-09 12:02:52jupyter notebook利用markdown插入图片有两种方式 1.网页图片 网页图片相对比较简单,在网上找到图片链接 markdown格式下输入以下内容即可 : width="670px" height="442px" 效果: ... -
markdown插入图片 试验
2017-01-06 19:15:56[hello world](d:/01.png)导入本地图片然后换为本地导入估计图片上传时,会保存在网站上,有一个网页的地址,然后再进行引用,不像有道云笔记一样,可以直接引用![图片描述是什么鬼?]... -
如何在markdown中插入数学公式
2018-02-06 11:41:46一些扩展的Markdown语法支持采用LaTex语法写数学公式,而在网页中使用Mathjax插件来显示数学公式。 本教程介绍如何在Markdown中书写数学公式。 插入数学公式 在Markdown中插入数学公式的语法是$数学公式$和$$数学... -
写了二十年的Markdown,第一次知道竟然可以这样插入图片!—— Markdown插入图片的三种方式
2020-05-22 17:48:42它插入图片通常使用用链接的方式,或是本地图片路径,或是网页图片路径。 本地图片路径在与团队共享markdown文件时,会无法显示图片,或者需要将markdown转换成PDF再分享,这又会造成不方便编辑的情况。 网络图片... -
Markdown Pad 2 插入图片的几点操作
2019-12-12 20:44:48Markdown Pad 2 插入图片 首先,笔者用的是GitHub 风格 Markdown模式,点击左下角的MarkDown符号进行修改。 插入本地图片 插入图片的Markdown语法是英文符号... -
使用Python在Markdown插入图片并自动获取链接
2017-03-02 14:16:38前言以前写博客都是使用...但是Markdown的插入图片有点麻烦,有些网站比如简书的在线Markdown编辑器支持良好,而如CSDN,如果我使用类似,虽然本地可以插入图片,但是在线导入后显然不能直接获取我的本地资源,因此贴 -
CSDN markdown 快速插入复杂表格的方法
2020-09-03 16:04:19网上有教程提到,要把表格上传到一个在线格式转换网站,其实没必要这么复杂,简单几步搞定。 首先用Excel创建表格,上方不要留空行,左侧不要留空列。... 之间的内容,粘贴到 markdown编辑器就可以啦。 ... -
Markdown中如何插入github中的图片
2018-12-26 19:59:05打开GitHub找到需要插入图片的页面,复制该网页的地址: https://github.com/xxx/PictureStorehouse/blob/master/QQ%E6%88%AA%E5%9B%BE20181226142313.png //链接里面的xxx是你的GitHub名字。这只是一个示例,... -
Hexo中如何用Markdown插入本地图片
2015-10-13 01:45:00虽然在官方语法中,Markdown插入图片的格式是这样的:  然而,如果你用了Hexo框架,那你得小心了。 为什么要用Hexo,Octopress之类的框架呢?无非是为了让页面更加丰富多彩,以及让... -
CSDN Markdown 插入代码时故障,白屏,无法编译
2020-04-28 16:35:55在使用CSDN 的Markdown文本编译器时, 一次性复制插入多行代码时故障,白屏,无法编译。在此心疼CSDN5秒钟。 问题原因: 未知,可能是无法识别的字符,也可能是编译器一次性接收行数有限。 避免方法: 时常保存... -
使用 Markdown + MathJax 在博客里插入数学公式
2015-09-11 22:08:13在书写数值计算类文章,特别是机器学习相关算法时,难免需要插入复杂的数学公式。一种是用图片在网页上展示,另外一种是使用 MathJax 来展示复杂的数学公式。它直接使用 Javascript 使用矢量字库或 SVG 文件来显示... -
vue中点击插入html_用 3Dmol.js 在 html 和 markdown 中插入结构模型
2021-01-03 18:57:21可互动的结构模型可以让网页文章变得更为生动,写在笔记里也可以更为方便地随时查看模型的细节。之前使用过 JSmol 来实现这个功能,今天来尝试一下更为轻量化的 3Dmol.js[1]结构文件格式的转换3Dmol.js 支持的文件... -
markdown使用1_markdown入门基础
2020-05-14 16:58:24文章目录简介标题使用一级标题二级标题字体斜体下划线分割线引用表格生成目录链接网页链接图片链接列表有序列表无序列表任务列表插入图片编程语法扩展参考 简介 最近学习是用markdown来作为文档整理的工具, 所以整理... -
有道云笔记markdown转常规markdown脚本
2021-01-19 12:07:38不知道大家通常用什么写markdown,本人习惯使用有道云笔记,但是有道云笔记的公式和常规的有点区别,以至于写完后无法直接应用于公众号。 这是有道云笔记教程,为什么要看教程呢?因为在写公式的时候,发现编辑器... -
markdown学习
2020-09-28 14:56:05标题 #+空格+标题 字体 1.粗体 ** 2.斜体 * 3.斜体加粗*** 三个 ...3.超链接[]+(),网页时使用 列表 1+.+空格 -+空格 无序 表格 |名字|性别|生日 |–|--|–| |张三|男|1995+‘|’ 2.右键插入表格 ... -
用markdown.js解析markdown时,设置图片大小
2015-09-17 21:45:02markdown设置图片大小打算在网页上显示.md文档,发现可以用markdown.js实现,具体看这篇文章: 实现网页客户端实时自动解析Markdown为HTML内容 可是发现不能调整图片大小,好像markdown本身就没有考虑这个问题。... -
MarkDown的初识
2021-02-02 14:21:28目前网页非常盛行,不建议使用电脑自带文本编辑器。推荐 >Typora。 标题: .# + 空格 + 标题名 几个#号就是几级标题 字体: Hello World ** (文字前后双是粗体) Hello World! (前后单*是斜体) Hello World!...