Practical Guide to Writing Blogs!
个人博客搭建指南:
正所谓“工欲善其事必先利其器”,博主之前在csdn上写过一些简单,了解也使用过一些简单的markdown语法,但是最近新部署了github博客网站,发现别人的博客网站颜色华丽,排版精美,而我的博客却只有简单的标题、正文、斜体、加粗等简单的界面,煞是寡淡,于是上网学习,发现在markdown中可以添加HTML标签和CSS样式,使得界面变得更加丰富,更加美观,下面是一些markdown的基础语法和进阶玩法,希望对大家有所帮助。
前言: 不知大家是否和博主有着相同的疑惑,为什么别的博主写出来的博客排版工整、优雅美观,而自己的博客却毫无出彩之处。原先博主更多的关注点在技术博客的内容上,markdown语法仅仅靠csdn上的“语法说明”自己瞎琢磨的,现在放暑假正好有时间,再温习一下基础语法和学习一下进阶语法,来丰富自己的博客排版!这篇是我的学习笔记,博采众长,希望也能帮到大家!
下面分为两个板块进行阐述:基础语法和进阶语法,板块一可以帮助你简单入门,版块二则是语法的升级!下面我都在代码块中展示markdown的写法,下面是对应的博客展现形式,大家可以根据自己的需求进行选择和学习!
一、基础语法
1.标题
输入#+space(空格)就是不同等级的标题(最多只有六个等级)
1 | |
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
2.文本样式
斜体:*+文本内容+*
1 | |
这是一个斜体
加粗:**+文本内容+**
1 | |
这里进行了加粗
斜体加粗:***+文本内容+***
1 | |
这里是斜体加粗
删除线:~~+文本内容+~~
1 | |
这里是删除线
分割线:在一行中用三个以上的星号建立一个分隔线,行内不能有其他内容,也可以在星号中间插入空格。
1 | |
3.列表
无序列表:-或*或++space(空格)+文本内容
1 | |
- 无序列表1
- 无序列表2
- 无序列表3
有序列表:数字序号+.+space(空格)+文本内容
1 | |
- 有序列表1
- 有序列表2
- 有序列表3
嵌套列表:
-+space+第一级无序列表1
space*2+-+第二级无序列表2
1 | |
- 嵌套列表1
- 嵌套列表2
- 嵌套列表3
4.板块
表格:
|+ 每列的标题+|+每列的标题+|
|+ ----| ----+|
|+ 每列内容+|+每列内容+|
|+ 每列内容+|+每列内容+|
1 | |
| 语言类型 | 输出函数 |
|---|---|
| c语言 | printf |
| c++ | cout |
| python |
可以通过在标题行中的连字符的左侧,右侧或两侧添加冒号(:),将列中的文本对齐到左侧,右侧或中心。
:— 设置内容和标题栏居左对齐。
:----: 设置内容和标题栏居中对齐。
—: 设置内容和标题栏居右对齐。
代码块:前后三个```即可,可自定义选择编程语言
1 | |
1 | |
链接:[+超链接显示名+]+(+超链接地址+)
1 | |
不在了情绪的博客主页:不在了情绪
我们还可以给这个链接添加title,当鼠标悬停在链接上会出现提示。
[+超链接显示名+]+(+超链接地址+space+"链接title"+)
1 | |
不在了情绪的博客主页:不在了情绪
使用尖括号可以很方便地把URL或者email地址变成可点击的链接:
1 | |
要显示原本用于格式化 Markdown 文档的字符,需要在字符前面添加反斜杠字符 \
1 | |
*我想要输出的是两个星号*
二、进阶用法
1.字体与背景
<font face="字体">+文本内容+</font>
1 | |
这是黑体
这是微软雅黑
这是华文彩云
<font size=字体大小>+文本内容+</font>
1 | |
字体大小为4的文字
字体大小为3的文字
字体大小为2的文字
字体大小为1的文字
<font color=“color”>+文本内容+</font>
1 | |
红色的文本内容
绿色的文本内容
蓝色的文本内容
<mark>+文本内容+</mark>或者==+文本内容+==
1 | |
高亮显示的文本内容
==高亮显示的文本内容==
<table><tr><td bgcolor=“color”><mark>+文本内容+</mark></td></tr></table>
1 | |
有背景颜色的高亮文本内容
有背景颜色的高亮文本内容
<u>+文本内容+</u>
1 | |
下划线的文本内容
>+文本内容
1 | |
引用的文本内容
2.段落缩进
首行缩进:
- 全角:
 或  - 半角:
 或  - 半角之半角:
或 
1 | |
磨刀不误砍柴工,好好学习、反复练习markdown语法,才能在日后的博客撰写中手到擒来,手拿把掐!
3.公式
在markdown中可以使用$$来作为公式块,在其中进行Latex类型公式的输入!
$ + 公式 + $
1 | |
$x2-y2=(x+y)(x-y)$
$$(x-y)2=x2-2xy+y^2$$
4.表情
我们可以通过键入emoji shortcodes来输出表情包:
man:
😄 :smile: |
😊 :blush: |
😍 :heart_eyes: |
|---|---|---|
😘 :kissing_heart: |
😳 :flushed: |
😁 :grin: |
😉 :wink: |
😜 :tongue_wink: |
😀 :grinning: |
😴 :sleeping: |
😟 :worried: |
😮 :open_mouth: |
😕 :confused: |
😑 :expressionless: |
😅 :sweat_smile: |
😥 :sad_relieved: |
😢 :cry: |
😭 :sob: |
😂 :joy: |
😱 :scream: |
😠 :angry: |
😡 :rage: |
😷 :mask: |
😎 :sunglasses: |
😇 :innocent: |
❤️ :heart: |
💔 :broken_heart: |
✨ :sparkles: |
👍 :thumbsup: |
👎 :thumbsdown: |
👌 :ok_hand: |
✊ :fist: |
✌️ :v: |
👋 :wave: |
🙌 :raised_hands: |
🙏 :pray: |
👏 :clap: |
💪 :muscle: |
🏃 :running: |
👫 :couple: |
👪 :family: |
💃 :dancer: |
🙅 :no_good: |
💁 :info_desk: |
👶 :baby: |
👩 :woman: |
👨 :man: |
👵 :grandma: |
👴 :grandpa: |
👮 :police: |
😺 :smile_cat: |
🙈 :see_no_evil: |
💀 :skull: |
💋 :kiss: |
👀 :eyes: |
👄 :mouth: |
💬 :speech_bubble: |
nature:
☀️ :sunny: |
☔ :umbrella: |
☁️ :cloud: |
|---|---|---|
❄️ :snowflake: |
⛄ :snowman: |
⚡ :zap: |
🌊 :ocean: |
🐱 :cat: |
🐶 :dog: |
🐭 :mouse: |
🐰 :rabbit: |
🐯 :tiger: |
🐨 :koala: |
🐻 :bear: |
🐷 :pig: |
🐮 :cow: |
🐵 :monkey: |
🐴 :horse: |
🐘 :elephant: |
🐼 :panda: |
🐍 :snake: |
🐦 :bird: |
🐤 :chick: |
🐧 :penguin: |
🐢 :turtle: |
🐝 :bee: |
🐙 :octopus: |
🐠 :fish: |
🐳 :whale: |
🐬 :dolphin: |
🌸 :cherry_blossom: |
🌹 :rose: |
🌻 :sunflower: |
🍁 :maple_leaf: |
🍄 :mushroom: |
🌵 :cactus: |
🌴 :palm_tree: |
🌲 :tree: |
🌞 :sun_with_face: |
🌙 :moon: |
🌎 :earth: |
🌋 :volcano: |
objects:
🎍 :bamboo: |
💝 :gift_heart: |
🎒 :school_satchel: |
|---|---|---|
🎓 :mortar_board: |
🎏 :flags: |
🎆 :fireworks: |
🎇 :sparkler: |
🎃 :jack_o_lantern: |
👻 :ghost: |
🎅 :santa: |
🎄 :christmas_tree: |
🎁 :gift: |
🔔 :bell: |
🎉 :tada: |
🎊 :confetti_ball: |
🎈 :balloon: |
📷 :camera: |
🎥 :movie_camera: |
💻 :computer: |
📺 :tv: |
📱 :iphone: |
☎️ :phone: |
📞 :telephone_receiver: |
💡 :bulb: |
🔋 :battery: |
📧 :email: |
✉️ :envelope: |
🛀 :bath: |
🚿 :shower: |
🚽 :toilet: |
🔧 :wrench: |
🔨 :hammer: |
💰 :moneybag: |
💵 :dollar: |
💳 :credit_card: |
✂️ :scissors: |
📌 :pushpin: |
📎 :paperclip: |
✏️ :pencil2: |
📕 :closed_book: |
📚 :books: |
🔖 :bookmark: |
⚽ :soccer: |
🏀 :basketball: |
🎾 :tennis: |
🏊 :swimmer: |
🎮 :video_game: |
🎬 :clapper: |
📝 :memo: |
🎤 :microphone: |
🎧 :headphones: |
👞 :shoe: |
👠 :high_heel: |
💄 :lipstick: |
👕 :tshirt: |
👖 :jeans: |
👙 :bikini: |
👑 :crown: |
👓 :eyeglasses: |
☕ :coffee: |
🍵 :tea: |
🍺 :beer: |
🍕 :pizza: |
🍔 :hamburger: |
🍟 :fries: |
🍣 :sushi: |
🍚 :rice: |
🍰 :cake: |
🍫 :chocolate_bar: |
🍎 :apple: |
🍌 :banana: |
🍅 :tomato: |
place:
🏠 :house: |
🏡 :house_with_garden: |
🏫 :school: |
|---|---|---|
🏢 :office: |
🏣 :post_office: |
🏥 :hospital: |
🏦 :bank: |
🏪 :convenience_store: |
🏨 :hotel: |
💒 :wedding: |
⛪ :church: |
🌇 :city_sunrise: |
🏯 :japanese_castle: |
🏰 :european_castle: |
⛺ :tent: |
🏭 :factory: |
🗼 :tokyo_tower: |
🗻 :mount_fuji: |
🌄 :sunrise_over_mountains: |
🌅 :sunrise: |
🌈 :rainbow: |
🎡 :ferris_wheel: |
⛲ :fountain: |
🎢 :roller_coaster: |
🚢 :ship: |
🚤 :speedboat: |
⛵ :sailboat: |
🚀 :rocket: |
✈️ :airplane: |
🚁 :helicopter: |
🚂 :train: |
🚊 :tram: |
🚲 :bike: |
🚗 :car: |
🚕 :taxi: |
🚌 :bus: |
🚓 :police_car: |
🚑 :ambulance: |
🚚 :truck: |
🚦 :traffic_light: |
⚠️ :warning: |
🚧 :construction: |
🏧 :atm: |
🎫 :ticket: |
♨️ :hotsprings: |
number&& directions:
1️⃣ :one: |
2️⃣ :two: |
3️⃣ :three: |
|---|---|---|
4️⃣ :four: |
5️⃣ :five: |
6️⃣ :six: |
7️⃣ :seven: |
8️⃣ :eight: |
9️⃣ :nine: |
🔟 :keycap_ten: |
0️⃣ :zero: |
#️⃣ :hash: |
◀️ :arrow_backward: |
⬇️ :arrow_down: |
▶️ :arrow_forward: |
⬅️ :arrow_left: |
➡️ :arrow_right: |
⬆️ :arrow_up: |
🔄 :arrows_counterclockwise: |
ℹ️ :information_source: |
🆗 :ok: |
🆕 :new: |
🆙 :up: |
🆒 :cool: |
🚻 :restroom: |
🚹 :mens: |
🚺 :womens: |
♿ :wheelchair: |
🚇 :metro: |
🚫 :no_entry_sign: |
⛔ :no_entry: |
♻️ :recycle: |
🕐 :clock1: |
❌ :x: |
❗ :exclamation: |
⭕ :o: |
➕ :plus: |
➖ :minus: |
✔️ :check_mark: |
🔘 :radio_button: |
🔗 :link: |
✅ :white_check_mark: |
⚫ :black_circle: |
⚪ :white_circle: |
🔴 :red_circle: |
🔵 :blue_circle: |
©️ :copyright: |
®️ :registered: |
™️ :tm: |
🔶 :orange_diamond: |
🔷 :blue_diamond: |
5.提示
1 | |
| 参数 | 说明 |
|---|---|
default |
默认样式(灰色) |
primary |
主要样式(蓝色) |
info |
信息提示(浅蓝色) |
success |
成功提示(绿色) |
warning |
警告提示(黄色) |
danger |
危险/错误(红色) |
default
默认!
primary
主要!
info
提示!
success
成功!
warning
警告!
danger
危险!
恭喜! 看到这里你已经掌握了 Markdown 的核心语法和进阶技巧!
✨ 小建议:
精致排版 + 优质内容 = 王炸组合 💥 清晰的结构和美观的格式会让你的博客更专业、更吸睛!
立刻动手写一篇吧! 从今天开始,用 Markdown 打造你的技术分享博客,下一个顶尖技术博主就是你! 🚀
参考文献:
Markdown 语法详解大全(超级版)(一)——标题、字体文本式样、颜色、列表、版块区块、缩进、列表项
Markdown 语法详解大全(超级版)(二)——图片、表格、段落、转义字符、内嵌、注释、缩进、公式
Markdown 语法详解大全(超级版)(三)——甘特图语法详解
Markdown 语法详解大全(超级版)(四)——Markdown 使用 Emoji 表情 (附:表情符号简码列表)