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

比眉伴天荒 2023-02-12 10:24 12阅读 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 条评论，12人围观）

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

相关阅读

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

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

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

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

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

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

相关 Markdown使用笔记

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

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

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

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

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

相关 html 5 插入广告_HTML入门笔记（1）

HTML发明者及介绍 HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee（

蔚落/ 2023年01月01日 10:51/ 0 赞/ 170 阅读

相关使用 Sunny-Ngrok 将内网程序发布到外网

1.1 简介 ![20200818105508776.png][] 1.2 开通隧道 ☞ 开通服务咱们先去 [Sunny-Ngro

ゝ一世哀愁。/ 2022年11月28日 13:50/ 0 赞/ 228 阅读

相关 Binomial Showdown

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

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

相关 HTML网页的!DOCTYPE详解

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

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

相关 nginx访问静态HTML网页

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

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

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

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

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