使用showdown将markdown笔记插入到HTML网页

比眉伴天荒 2023-02-12 10:24 20阅读 0赞

## 介绍 ##

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)
       })

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 python-爬虫-使用 tomd 库，将 html 转换为 markdown 文档

python-爬虫-使用 tomd 库，将 html 转换为 markdown 文档编码问题搞死人！注意：写python前要先设置两个位置的编码，一个文件顶部

た入场券/ 2024年02月18日 18:17/ 0 赞/ 90 阅读

相关 thymeleaf模板获取markdown数据后，渲染到页面上（showdown.js）

> 我今天遇到一个问题，通过markdown输入数据保存到数据库中，然后前端无法渲染markdown数据，一直困惑了我几个小时，终于找到showdown.js插件。 `没渲染

电玩女神/ 2023年09月30日 11:49/ 0 赞/ 30 阅读

相关 Markdown使用笔记

常用符号： $<$ $\varphi$ $\equiv$ $q$ $\lbrace$ $\rbrace$ $m^e

迈不过友情╰/ 2023年06月25日 03:21/ 0 赞/ 9 阅读

相关 Markdown使用笔记

简介 Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。Markdown的语法简洁明了、学习容易，而且功

古城微笑少年丶/ 2023年06月12日 09:00/ 0 赞/ 35 阅读

相关将HTML转换为Markdown

One of my biggest mistakes with this blog was not finding a WordPress plugin that would

小鱼儿/ 2023年02月21日 14:25/ 0 赞/ 34 阅读

相关使用showdown将markdown笔记插入到HTML网页

介绍 showdown是一个Javascript标记到HTML转换器，将markdown文本转换为HTML，基于John Gruber的原始作品。showdown可以使用

比眉伴天荒/ 2023年02月12日 10:24/ 0 赞/ 21 阅读

相关 Binomial Showdown

Binomial Showdown Time Limit: 1000ms Memory limit: 65536K 有疑问？点这里^\_^ 题目描述

超、凢脫俗/ 2022年08月18日 02:22/ 0 赞/ 29 阅读

相关 HTML网页的!DOCTYPE详解

什么是DOCTYPE 查看很多使用XHTML标准开发的网站，第一行就是： `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

刺骨的言语ヽ痛彻心扉/ 2022年06月04日 03:22/ 0 赞/ 227 阅读

相关 nginx访问静态HTML网页

在服务器上nginx安装好后，如何把自己的网页部署到服务器上呢？这里给出一个简单的方法。这需要你的服务器先安装过了nginx 一我们先安装nginx,这里

比眉伴天荒/ 2022年05月10日 00:38/ 0 赞/ 566 阅读

相关为自己的网站添加Markdown——showdown.js使用教程

学习地址：[https://www.jianshu.com/p/747d6f8dddb0][https_www.jianshu.com_p_747d6f8dddb0] 练习

痛定思痛。/ 2021年06月24日 16:10/ 0 赞/ 310 阅读