有人在Github上用幾行代碼就造了個(gè)錘子便簽
錘子便簽,作為老羅的又一款設(shè)計(jì)感爆棚的產(chǎn)品,可能是史上最漂亮的便簽應(yīng)用,你或許會(huì)因它重新喜歡上記錄和表達(dá)。它不僅可以輸入文字,還支持插入圖片。你還可以隨時(shí)隨地將便簽內(nèi)容生成精美的長微博或網(wǎng)頁并分享。
近日,猿妹在GitHub上看到有人用幾行代碼就做出了一個(gè)基于錘子便簽的markdown主題。這樣一來,無論在哪里都能使用錘子便簽的樣式,猿妹只能說這位創(chuàng)建者真是愛慘了錘子便簽。
這個(gè)項(xiàng)目雖然只有11個(gè)Star,但卻有1700個(gè)分支。
你可以通過這個(gè)網(wǎng)址在線體驗(yàn)一下,或者預(yù)覽一下它的界面,和錘子便簽進(jìn)行一個(gè)對比,看看是不是一樣美觀。(地址:https://nihaojob.github.io/markdown-css-smartisan/examples/index.html)
markdown-css-smartisan安裝
從CDNJS手動(dòng)下載,或者使用npm或yarn下載:
- # use npm
- $ npm install markdown-css-smartisan
- # use yarn
- $ yarn add markdown-css-smartisan
用法
導(dǎo)入github-markdown.css文件,然后將markdown-body類添加到渲染的Markdown的容器中,并為其設(shè)置寬度。
- import 'markdown-css-smartisan'
如果要突出顯示代碼語法,請使用從GitHub /markdownAPI呈現(xiàn)的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