使用strapdown.js解析markdown

最新推荐文章于 2025-03-05 17:32:07 发布

凌寒11

最新推荐文章于 2025-03-05 17:32:07 发布

阅读量6.3k

点赞数

分类专栏：前端文章标签： strapdown.js 高亮代码块 markdown html

本文链接：https://blog.youkuaiyun.com/u010351766/article/details/51704958

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用Strapdown.js快速实现Markdown文本的网页展示，并展示了如何配置不同的主题样式及添加代码高亮功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在知道markdown之前一直觉得像csdn博客这种网站页面很高大上，比如文字格式、添加代码块等，也以为很难实现，后来才知道有markdown，这样实现这些就so easy，但是我这个人还是太懒了，不想自己写markdown翻译的代码，就用了strapdown.js这个库，下面说说具体的使用

项目地址：http://strapdownjs.com/

使用很简单，在页面中引入这个库就可以了

<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>

不过由于是国外的网站，速度有时候比较慢，所以建议把js和相关css代码拷到本地使用

strapdown.js提供了多种样式，有：amelia、cerulean、cyborg、journal、readable、simplex、slate、spacelab、spacelab、spruce、superhero、united等，使用方法很简单

<!-- 替换theme属性值就可以换样式 -->

<xmp theme="readable" style="display:none;">

这是官方的例子：

<!DOCTYPE html>
<html>
<title>Hello Strapdown</title><script async src="http://c.cnzz.com/core.php"></script>

<xmp theme="united" style="display:none;">
# Markdown text goes in here

## Chapter 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. 

## Chapter 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</xmp>

<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>

那么想像csdn博客一样显示代码块应该怎么办？很简单，只需要在代码前后加上```就可以了