怎么写博客才好看?

#怎么写博客才好看

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 e x 2 e^{x^2}\neq{e^x}^2 ,排得OK吗?

来个 “复杂点” 的:
H ( D 2 ) = ( 2 4   l o g 2 2 4 + 2 4   l o g 2 2 4 ) = 1 H(D_2) = -(\frac{2}{4}\ log_2 \frac{2}{4} + \frac{2}{4}\ log_2 \frac{2}{4}) = 1
矩阵:
( 1 a 1 a 1 2 a 1 n 1 a 2 a 2 2 a 2 n 1 a m a m 2 a m n ) \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}


中文文案基本格式规范

中文文案排版指北
– 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流程图待完善)

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

发布了222 篇原创文章 · 获赞 54 · 访问量 9万+

猜你喜欢

转载自blog.csdn.net/weixin_39966065/article/details/103983718