markdown在web的显示如何自定义左边红色线条,自定义主题?(不是说代码)

发布于 2022-09-12 22:10:07 字数 84 浏览 33 评论 0

image.png

用什么库能实现这种效果?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

記柔刀 2022-09-19 22:10:07

关于红条,仔细看是个梯形,显然是 border 做的。口胡代码:

.md-quote {
    border: darkgrey 1px solid;
    border-left: red 6px solid;
    backgound-color: lightgrey;
}

效果: effect
PPPS: 为什么 darkgrey 比 grey 亮(


markdown 一般就 parse 完 render 一下。

如果是要现成的库,我用过 marked.js,看这个入门的,比较详细。
再就是 Remarkable,当时没配置好,但是似乎比较强大。

改样式的话,我直接就把 markdown 容器元素里面的拿 css 匹配了一下,用框架怎么搞不清楚。

关于代码高亮,基本全都用的楼上说的 hljs (highlight.js),它可以和 marked.js 很好地配合:

marked.setOptions({
    highlight: code => hljs.highlightAuto(code).value
})

关于 $\LaTeX$,要支持的话可以用 MathJax

PS. 自己造轮子也很好玩
PPS. SF 的 LaTex 炸了,编辑的时候是正常显示的……

初见你 2022-09-19 22:10:07

关键词 语法高亮

比如: highlight.js

https://developer.51cto.com/a...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文