有人在Github上用几行代码就造了个锤子便签

开源最前线(ID:OpenSourceTop) 猿妹整编

链接:https://github.com/nihaojob/markdown-css-smartisan

锤子便签,作为老罗的又一款设计感爆棚的产品,可能是史上最漂亮的便签应用,你或许会因它重新喜欢上记录和表达。它不仅可以输入文字,还支持插入图片。你还可以随时随地将便签内容生成精美的长微博或网页并分享。

近日,猿妹在GitHub上看到有人用几行代码就做出了一个基于锤子便签的markdown主题。这样一来,无论在哪里都能使用锤子便签的样式,猿妹只能说这位创建者真是爱惨了锤子便签。

这个项目虽然只有11个Star,但却有1700个分支。

你可以通过这个网址在线体验一下,或者预览一下它的界面,和锤子便签进行一个对比,看看是不是一样美观。(地址:https://nihaojob.github.io/markdown-css-smartisan/examples/index.html)

markdown-css-smartisan安装

从CDNJS手动下载,或者使用npm或yarn下载:

# use npm
$ npm install markdown-css-smartisan
# use yarn
$ yarn add markdown-css-smartisan

用法

导入github-markdown.css文件,然后将markdown-body类添加到渲染的Markdown的容器中,并为其设置宽度。

import 'markdown-css-smartisan'

如果要突出显示代码语法,请使用从GitHub /markdownAPI呈现的GitHub Flavored Markdown 。

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/markdown-css-smartisan/github-markdown.css" />
<style>
.markdown-body {
  width: 80%;
  margin: 0 auto;
}

</style>
<article class="markdown-body">
    <h1>Unicorns</h1>
    <p>All the things</p>
</article>

最后附上GitHub地址:https://github.com/nihaojob/markdown-css-smartisan

强烈推荐大家关注上面公众号

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值