Markdown.css样式简介
前端  /  管理员 发布于 6年前   219
Markdown.css 是一个很有意思的 CSS 样式表。它可以让 HTML 显示成类似 Markdown 纯文本的形式。
基于 LESS 编写
Markdown.css 基于 LESS 编写,源代码在此。
下面简要地解析一下具体实现的方法。
标题
markdown 的标题在前加上 # 到 ###### 表示。这是用了 CSS 的伪类 :before 实现,例如 h2 是这么定义的:
CSS Code复制内容到剪贴板强调
强调是前后加上*,因此除了 :before 之外还用到了 :after。
CSS Code复制内容到剪贴板strong、code的实现类似。
链接
Markdown 中的链接采用 [text](link) 的格式,实现和上面的强调的做法类似,首先去掉文本的装饰,然后使用 :before 在前面添加 [:
CSS Code复制内容到剪贴板后面添加的内容中包含链接,可以通过 attr(href) 取得:
CSS Code复制内容到剪贴板pre
pre 的话,很简单,只要左边缩进四个字符即可。对于支持缩进四个字符的浏览器,使用4ch即可,不支持的浏览器那就使用34px。
CSS Code复制内容到剪贴板引用
Markdown 中的引用采用如下格式:
> 这是一个引用
> 引用的第二行
因此,采用的方法是在引用后添加>和 \A (换行),然后调整位置,使其与原文“对齐”,并隐藏多余的>。
CSS Code复制内容到剪贴板图片
使用如下 CSS 可以实现图片转为 markdown 形式显示:
CSS Code复制内容到剪贴板markdownify
还有一个 markdownify 的 bookmarklet,将其保存在书签栏之后,可以将任意网站转为 Markdown 样式。
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号