更好的使用看云

最后更新于:2022-04-02 04:27:12

## 更好的使用看云 ![](http://cdn.aipin100.cn/18-4-12/87776352.jpg) 看云写文档、做笔记很方便。git版本管理,md增强语法对程序员来说简直太友好了。下面分享一些实用的技巧和方法,让你更好的使用看云。 > 推荐使用 [flomo · 浮墨笔记](https://flomoapp.com/register2/?MTYzNjY1) 记录想法、灵感片段,帮助整理思想碎片。 * * * * * ### 1. 自动发布 >[tip] 开启自动发布后,点击同步按钮后会自动发布,这样做可以保证文档永远都是呈现最新的版本。 * * * * * ### 2. 解决代码块一行过长不方便看的问题: 点击右上角下拉按钮 **\[样式设置\]**,加入以下样式即可解决。 ```css /* 代码块换行 */ pre, code { white-space: pre-wrap!important; word-wrap: break-word!important; } ``` * * * * * ### 3. 自定义样式 如你所见,我文档中的很多样式都是经过自定义美化过的。 ```css /* 全黑字体更好看 */ p, ul, ol, pre { color: #000; } /* 美化引用段落样式 */ blockquote { padding: 15px; margin-bottom: 20px; position: relative; } /* 下方阴影部分 */ blockquote:after { content: ''; height: 20px; background-image: url(http://cdn.aipin100.cn/18-4-12/47765313.jpg); background-size: 50% 100%; background-repeat: no-repeat; position: absolute; width: 100%; bottom: -20px; left: -4px; } /* 改变默认的引用段落样式 */ blockquote.default { border-left: 4px solid #2ebd88; background: #f5f5f5; color: #555; } /* 扩展样式:不仅能改变样式,还能新增样式class:增加一个引用样式,使用方法: >[nice] XXX */ blockquote.nice { border-left-color: #2ac152; color: #22c34b; background-color: #e2ffea; } blockquote.tip { border-left-color: #f75151; color: #666; background-color: #f8f8f8; padding: 15px 23px; } blockquote.tip:before { position: absolute; top: 30%; left: -12px; background: #f75151; border-radius: 50%; content: "!"; width: 20px; height: 20px; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* 改变文档标题样式 */ .m-manual .manual-title .text { font-size:24px; font-weight:400; } /* 代码块换行 */ pre, code { white-space: pre-wrap!important; word-wrap: break-word!important; } /* 美化代码小块`` */ pre code { border: none; padding: 0px; margin: 0px; background: none; } code { background: #f9fafa; border: 1px solid #ded9d9; margin: 0px 5px; padding: 2px 6px; } /* 标题加粗 */ h1, h2, h3, h4, h5, h6, h7 { font-weight: bold; } /* 使得更显眼一点 */ h1, h2, h3, h4, h5, h6, h7, b, strong { text-shadow: 0 1px white; color: #000; } /* 标题与上边的间距 */ h3, h4, h5, h6, h7 { margin-top: 35px; } h1 { font-size: 3em; } h2 { font-size: 2.5em; } h3 { font-size: 1.6em; } h4 { font-size:1.2em; margin-top: 25px; } /* 让段落有分割距离 */ p { margin-bottom: 1em; } blockquote p { color: inherit; } blockquote p:last-child { margin-bottom: 0!important; } blockquote strong, blockquote h1, blockquote h2, blockquote h3, blockquote h4, blockquote h5, blockquote h6, blockquote h7 { color: #000; } blockquote.info strong , blockquote.info h1, blockquote.info h2, blockquote.info h3, blockquote.info h4, blockquote.info h5, blockquote.info h6, blockquote.info h7 { color: #048eb7; } blockquote.danger strong , blockquote.danger h1, blockquote.danger h2, blockquote.danger h3, blockquote.danger h4, blockquote.danger h5, blockquote.danger h6, blockquote.danger h7 { color: #da0505; } blockquote.nice strong , blockquote.nice h1, blockquote.nice h2, blockquote.nice h3, blockquote.nice h4, blockquote.nice h5, blockquote.nice h6, blockquote.nice h7 { color: #049028; } blockquote.baby strong, blockquote.baby h1, blockquote.baby h2, blockquote.baby h3, blockquote.baby h4, blockquote.baby h5, blockquote.baby h6, blockquote.baby h7{ color: #FE007F; } blockquote.baby { border-left-color: #FE007F; color: #FE007F; background-color: #ffecf6; } /* 图片描述 */ .img-desc { color: #b9b9b9; text-align: center; font-size: 12px; } /* 更好看的分割线样式 */ hr { border: 0; border-bottom: 1px solid #ddd; margin-bottom: 25px; margin-top: 25px; box-shadow: 0 2px 0 rgba(229, 229, 229, 0.4); } li { margin: 10px 0; } a { /* 腾讯的产品用户体验最好,腾讯系产品爱用的链接颜色 */ color: #3481cf; } a:hover { color: #00a4ff; text-decoration: underline; } ``` 简单几个样式,从此让你的文档更加漂亮,更加易于阅读和赏心悦目。 * * * * * ### 3. 文章配图:使用免费图床外链 没有什么比形象的图片更具有说服力和情景代入感的了,不要吝啬使用精彩的配图。 看云有空间容量限制,如果你只是写文字,其实用不了多少空间,但是如果你经常上传图片的话,那么空间占用就很可观了,所以就需要寻找一款图床工具了。 我目前使用的 [极简图床](http://jiantuku.com/#/) 很不错,可以使用七牛云的免费10G空间做存储空间。 更多好用的工具请阅读:[开发工作流 · 产品设计 · 看云](https://www.kancloud.cn/xiak/product/384784) PS: 现在可以直接使用看云提供的 [云图片] 插件了 * * * * * ### 4. 实用小工具 #### 进度条 ![](http://progressed.io/bar/80) ``` ![](http://progressed.io/bar/80) ``` #### 勋章 ![](https://img.shields.io/badge/build-passing-ff69b4.svg) ![](https://img.shields.io/badge/%E5%98%BB%E5%98%BB-SF-brightgreen.svg?style=for-the-badge) ``` ![](https://img.shields.io/badge/build-passing-ff69b4.svg) ![](https://img.shields.io/badge/%E5%98%BB%E5%98%BB-SF-brightgreen.svg?style=for-the-badge) ``` #### 占位图 ![](http://placehold.it/200x100&text=placehold) ``` ![](http://placehold.it/200x100&text=placehold) ``` #### 在线计数器 [Amazing Counters - Free Web Counter Free Hit Counters](http://amazingcounters.com/) ![](http://cc.amazingcounters.com/counter.php?i=3247063&c=9741502) ---- #### 访问统计 https://s11.flagcounter.com/index.html ![](https://s11.flagcounter.com/count2/WnD/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/) * * * * * ### 5. 随机图片API 更多用法见:https://source.unsplash.com ![](https://source.unsplash.com/random/400x200) ![](https://source.unsplash.com/user/erondu/400x200) ~~~ ![](https://source.unsplash.com/random/400x200) ![](https://source.unsplash.com/user/erondu/400x200) ~~~ 参考:[几条经验美化你的GitHub开源项目 - SegmentFault](https://segmentfault.com/p/1210000008176432?from=timeline) * * * * * ### 6. 要注意的一些地方 1. 如果使用了html的话,要和md内容部分空一行,不然渲染时可能无法正常显示。 * * * * * 待续…… last update:2018-10-11 18:26:29
';