怎么写博客才好看？

#怎么写博客才好看

1.作者平常喜欢写学习笔记与工作安排，之前使用 notepad++ , 虽然展示不错，但随着文字量的增多，阅读体验再次受到了挑战，由于层次不清晰，及予以问题而不便于理解
2.之前写的博客自己都不想浏览第二遍，博客样式，层次等惨不忍睹，需要一个改变

Markdown 学习

如何优雅高效的写博客（Sublime + Markdown + Evernote）
–https://www.cnblogs.com/Vonadam/p/4796904.html

为什么用Markdown？

学会基本的markdown语法，能够摆脱编辑器的限制，在任意情况下输出一篇精美的博文。
– https://www.jianshu.com/p/dc3bd40ee388

常用范例

列表

• 标题
• 列表
• 换行
• 缩进
• 链接
• 引用
• 表格
• 斜体
• 粗体
• 删除
• 行内代码
• 代码段
• 待办事项
• 分割线
• LaTeX排版

实战演练

---

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题

####有序无序列表
- 文本1
- 文本2

1. 文本1
2. 文本2

#### 列表中如何换行
在文字后面增加两个空格

#### 如何增加首行缩进
半方大的空白 或 
全方大的空白 或 
不断行的空白格 或 

#### 如何增加
####链接
-- www.tencent.com

####引用
>以下是引用的内容
>只需要在段首添加

####表格
First Header | Seconde Header | Third Header
------------ |:-------------- |:-----------
target | target2 | target3
action | action2 | action3

####斜体
*斜体*

####粗体
**粗体**

####删除
~~删除文字~~

####行内代码
如：`AppCompatActivity`类,markdown对行内代码的语法是前后用：\`,其中 \` 为windows键盘左上角那个,

####代码段

function DisplayWindowSize(){

  var w=window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;
}


### 待办事项描述
- [ ] 任务1，未完成;
- [x] 任务2，已完成;

####分隔线
***

####LaTeX排版
markdown支持LaTeX排版，所以支持更丰富的内容展示

是的，我就是行内公式：$e^{x^2}\neq{e^x}^2$，排得OK吗？

来个 *"复杂点"* 的:
$$H(D_2) = -(\frac{2}{4}\ log_2 \frac{2}{4} + \frac{2}{4}\ log_2 \frac{2}{4}) = 1$$
矩阵：
$$
        \begin{pmatrix}
        1 & a_1 & a_1^2 & \cdots & a_1^n \\
        1 & a_2 & a_2^2 & \cdots & a_2^n \\
        \vdots & \vdots & \vdots & \ddots & \vdots \\
        1 & a_m & a_m^2 & \cdots & a_m^n \\
        \end{pmatrix}
$$

---

展示效果

一级标题

二级标题

三级标题

四级标题

五级标题

####有序无序列表

• 文本1
• 文本2

1. 文本1
2. 文本2

列表中如何换行

在文字后面增加两个空格

如何增加首行缩进

半方大的空白 或 
全方大的空白 或 
不断行的空白格 或 

如何增加

####链接
– www.tencent.com

####引用

以下是引用的内容
只需要在段首添加

####表格

First Header	Seconde Header	Third Header
target	target2	target3
action	action2	action3

####斜体
斜体

####粗体
粗体

####删除
删除文字

####行内代码
如：AppCompatActivity类,markdown对行内代码的语法是前后用：`,其中 ` 为windows键盘左上角那个,

####代码段

function DisplayWindowSize(){

  var w=window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;
}

待办事项描述

• 任务1，未完成;
• 任务2，已完成;

####分隔线

---

####LaTeX排版
markdown支持LaTeX排版，所以支持更丰富的内容展示

是的，我就是行内公式：$e^{x^2}\neq{e^x}^2$ex2​=ex2，排得OK吗？

来个 “复杂点” 的:
$H(D_2) = -(\frac{2}{4}\ log_2 \frac{2}{4} + \frac{2}{4}\ log_2 \frac{2}{4}) = 1$H(D2​)=−(42​ log2​42​+42​ log2​42​)=1
矩阵：
$\begin{pmatrix} 1 & a_1 & a_1^2 & \cdots & a_1^n \\ 1 & a_2 & a_2^2 & \cdots & a_2^n \\ \vdots & \vdots & \vdots & \ddots & \vdots \\ 1 & a_m & a_m^2 & \cdots & a_m^n \\ \end{pmatrix}$⎝⎜⎜⎜⎛​11⋮1​a1​a2​⋮am​​a12​a22​⋮am2​​⋯⋯⋱⋯​a1n​a2n​⋮amn​​⎠⎟⎟⎟⎞​

---

中文文案基本格式规范

中文文案排版指北
– https://github.com/sparanoid/chinese-copywriting-guidelines/blob/master/README.zh-CN.md

1、空格

• 中文与数字之间需要增加空格
• 中英文之间需要增加空格
• 中文与数字之间需要增加空格
• 数字与单位之间需要增加空格
• 全角标点与其他字符之间不加空格

2、简体中文使用直角引号（个人推荐）
用法：

「老师，『有条不紊』的『紊』是什么意思？」

对比用法：

“老师，‘有条不紊’的‘紊’是什么意思？”

3、遗留问题
*怎么全文的把弯角引号替换为直角引号？
*怎么全文的把弯角单引号替换为直角双引号？
正则表达式？

层次表达的重要功能

（1）文字底色改变
（2）文字变色
（3）脚注
（4）改变背景颜色
（5）醒目的分层标题（csdn中可以自定义图片来进行分层）

备注
1、Md2All
把图片轻松上传到云图床，自动生成Markdown – https://www.cnblogs.com/garyyan/p/9181809.html
用法：作用于公众号与自搭建的博客不错，提供了常用的样式解决方案

2、CSDN
不支持字体，html，css 样式
使用目录快捷键： @[TOC]

书籍

《写给大家看的设计书(第3版)》

推荐博客

1.文章排版怎么才有美感
– http://www.mahaixiang.cn/xzjq/2420.html

2.csdn博客公告栏美化
– https://github.com/yanglr/Beautify-csdnBlog

3.中文文案排版指北
– https://github.com/sparanoid/chinese-copywriting-guidelines

剩余问题

1、OneNote，bear，google doc 等等 笔记记录的系统化讨论？
2、脑图的简便画法（基础组件）
3、sublime_text 安装 LaTeX 插件（暂时用不到）
– https://blog.csdn.net/qazxswed807/article/details/51234834
– https://www.cnblogs.com/o-din/p/9475717.html
4、仅仅使用标题，文章整体层次不明显（甘特图、UML图、Mermaid流程图、Flowchart流程图待完善）

结语：随着对于自身格式的整理，似乎心才真正的逐渐进行了沉淀，期望这是一个好的开始，与君共勉