## 更好的使用看云  看云写文档、做笔记很方便。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. 实用小工具 #### 进度条  ```  ``` #### 勋章   ```   ``` #### 占位图  ```  ``` #### 在线计数器 [Amazing Counters - Free Web Counter Free Hit Counters](http://amazingcounters.com/)  ---- #### 访问统计 https://s11.flagcounter.com/index.html  * * * * * ### 5. 随机图片API 更多用法见：https://source.unsplash.com   ~~~   ~~~ 参考：[几条经验美化你的GitHub开源项目 - SegmentFault](https://segmentfault.com/p/1210000008176432?from=timeline) * * * * * ### 6. 要注意的一些地方 1. 如果使用了html的话，要和md内容部分空一行，不然渲染时可能无法正常显示。 * * * * * 待续…… last update：2018-10-11 18:26:29