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

新闻 前端
近日,猿妹在GitHub上看到有人用几行代码就做出了一个基于锤子便签的markdown主题。

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

[[393307]]

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

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

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

markdown-css-smartisan安装

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

  1. # use npm 
  2.  
  3. $ npm install markdown-css-smartisan 
  4.  
  5. # use yarn 
  6.  
  7. $ yarn add markdown-css-smartisan 

用法

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

  1. import 'markdown-css-smartisan' 

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

  1. <meta name="viewport" content="width=device-width, initial-scale=1"
  2.  
  3. <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/markdown-css-smartisan/github-markdown.css" /> 
  4.  
  5. <style> 
  6.  
  7. .markdown-body { 
  8.  
  9. width: 80%; 
  10.  
  11. margin: 0 auto; 
  12.  
  13.  
  14. </style> 
  15.  
  16. <article class="markdown-body"
  17.  
  18. <h1>Unicorns</h1> 
  19.  
  20. <p>All the things</p> 
  21.  
  22. </article> 

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

 

责任编辑:张燕妮 来源: 开源最前线
相关推荐

2021-10-18 09:09:16

数据库

2021-12-12 18:18:15

代码元宇宙Python

2021-08-09 07:26:33

瀑布流布局代码

2015-08-31 10:50:16

跑分手机

2023-10-27 11:38:09

PythonWord

2020-05-28 11:00:40

Flutter代码框架

2020-04-30 14:25:13

代码项目JS

2020-07-07 07:55:53

web app数据科学机器学习

2024-02-22 16:50:50

2018-06-06 18:00:24

iOS苹果微软

2023-06-20 08:28:17

2020-08-30 14:38:14

Linux系统服务器

2022-02-14 18:46:49

机器人人工智能

2021-03-05 15:09:59

人工智能人脸识别安全

2022-01-18 16:55:47

区块链比特币经济

2018-12-17 11:08:07

Linux程序操作

2015-02-03 02:43:57

2021-12-02 09:31:22

Python 代码进度条

2022-05-13 09:16:49

Python代码

2021-02-23 12:30:21

VS CodeGithub代码
点赞
收藏

51CTO技术栈公众号