学习现代化的文章编写方式——关于Markdown语法的使用

前言

  • Markdown可以理解为了一种轻量级HTML标记语言,帮助我们轻松的进行文章排版。(当然了不要记成了makedown,一开始犯了这个错误害我找不到教程)。虽然说网上md的语法教程一大堆,大家都做得特别详细清晰,但是我觉得还是自己都敲一遍下来学习效果会更好。
  • 此篇博客收录了,我觉得写作中经常需要用到的语法,以及对于一些我有疑问的地方做出了解释和记录了一些踩过的坑,供大家参考。

1. 标题

设置标题有两种方式。

使用=-设置一级和二级标题

  • 通过双划线"="和单划线"-"设置一级标题和二级标题。这两个符号单独一行的话,就能够将上一行的文字设置成标题格式,一个符号和多个符号效果都是一样的
这是要显示的一级标题
===

这是要显示的二级标题
---

显示效果如下:

在这里插入图片描述


使用#设置六级标题

  • 通过#+space设置六级标题,有几个#就算几级标题
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

显示效果如下:

学习现代化的文章编写方式——关于Markdown语法的使用_第1张图片



2. 文字样式

文字加粗和斜体

  • 文字加粗和斜体,使用下划线_和星号*实现效果都一样。不过有些软件的md编辑器可能就只支持其中一种,如语雀就只能用**加粗文本**来实现字体加粗,具体使用还得看软件官网的使用说明。其实我觉得熟悉星号*的用法就够了,就不用管另一种了。
__文字加粗方法1__
**文字加粗方法2**

_文字强调1(斜体效果)_
*文字强调2(斜体效果)*

___文字强调加粗___
***文字强调加粗***

显示效果如下:

文字加粗方法1
文字加粗方法2


文字强调1(斜体效果)
文字强调2(斜体效果)


文字强调加粗
文字强调加粗


分割线

  • 使用连续三个连字符---就可以实现分割线的效果,其实连续三个下划线___和连续三个星号***也都可以实现分割线的效果,不过我觉得连字符会比较好按,用另外两种方法还可能和其他用法记混。
分割线演示1
---
分割线演示2
***
分割线演示3
___

显示效果如下:

分割线演示1


分割线演示2


分割线演示3

注意:
其实这边有个坑。在使用连续三个连号符时---,若该---上一行有文字,那么其实此处---是将上一行文字变成一级标题,而不是起到分割线作用,此时多打一行空格就可以了。

Test1
---
Test2

---

显示效果如下:

学习现代化的文章编写方式——关于Markdown语法的使用_第2张图片


删除线

  • 想要实现删除线效果,用连续两个~~把文本内容包括起来+space即可
~~显示文字删除效果~~ 

显示效果如下:

显示文字删除效果


下划线

因为md语法是支持HTML语言的,所以可以使用 文本内容 /实现下划线效果

此处文本使用下划线标记

显示效果如下:

此处文本使用下划线标记


注脚

注脚的写法会复杂点,涉及到了引用的概念,写好注脚之后页面自动跳转到页尾的解释说明的地方
具体语法如下:

测试文本[^要注明的文本]

[^要注明的文本]: 对要注脚进行解释说明

显示效果如下:

测试文本[^要注明的文本]
[^要注明的文本]: 对要注脚进行解释说明

注意:

  1. 语法中的两句要一起写,才能起到脚注的效果
  2. 对引用文本的解释,会在文章的最末尾显示出来。

3. 列表

md语法有三种列表,分别是有序列表、无序列表、和代办列表,需要连续的时候按回车就行;要退出列表状态的话,就需要按两次回车了

有序列表

直接数字加.+sapce就能显示有序列表格式了,编辑器会自动帮你调整缩进和行间距的。

1. 第一行
2. 第二行
3. 第三行

显示效果如下:

  1. 第一行
  2. 第二行
  3. 第三行

无序列表

其实用-+或者*都可以实现无序列表的功能,不过这里还是只展示-的用法,因为这个好按。因为又是-,注意不要和之前提到的设置二级标题的用法相重。

- 第一行
- 第二行
- 第三行

显示效果如下:

  • 第一行
  • 第二行
  • 第三行

待办列表

我觉得这边的设置有麻烦,其实可以优化下的。需要-+sapce+[+space+]+space才能实现前面一个空格的效果,我在别的地方有见到过-+[]+space的写法就比较方便,而csdn这边的md编辑器只支持第一种麻烦的写法。

- [ ] 待办事项1
- [x] 已完成的事项
- [ ] 待办事项2

显示效果如下:

  • 待办事项1
  • 已完成的事项
  • 待办事项2

4. 区块

在文章中设置单独的一块区域,该区块里的文字会自动被缩进以及调整行间距。使用>+sapce即可实现该效果,我经常会用这个来放一些图片或者数学公式,这样比较好看。

> 引用的文本

显示效果如下:

引用的文本·

区块的嵌套

列表中的区块


5. 代码块

md有两种代码块

行内代码块

可以在行内使用,想放在哪里都可以十分方便,使用两个反引号把文本包括起来即可

`测试文本`

实现效果如下

测试文本


区间代码块

会显示类似IDE工具里的代码块,也可以指定相关语言的代码块,使用连续三个反引号将代码包裹起来即可。
其实也可以直接使用四个空格或者制表符Tab来生成区间代码块,我觉得这个方法更方便这里就不做多的演示了,一说就动了。

```[可以指定一种编程语言,这里指定python,不指定也没事]
prinf("Hello Wordl!")
```

显示效果如下:

prinf("Hello Wordl!")

6. 链接

这里介绍三种引入外部链接的方法,可以依照使用场景使用

使用链接变量

注意符号之间不能有空格,[+链接名称+]+(+链接+)

[链接测试1](https://blog.csdn.net/weixin_45894702?type=blog)

链接测试1


直接显示链接

直接用尖括号把地址括起来,但是显示的是超链接的形式

直接显示链接:

直接显示链接:https://blog.csdn.net/weixin_45894702?type=blog


使用链接引用

使用网址变量表示链接,涉及到引用的概念,其实效果和第一种差不多,但是这种会麻烦点,需要在文章结尾专门对网址变量进行链接对象说明,适合于某个链接需要多次使用的情况。

此处用my_Blog表示网址变量 [我的博客][my_Blog]
[my_Blog]: https://blog.csdn.net/weixin_45894702?type=blog

此处用my_Blog表示网址变量 [我的博客][my_Blog]
[my_Blog]: https://blog.csdn.net/weixin_45894702?type=blog


7. 图片

虽然插入图片,可以直接把图片拖进来就能用了,不用特意写插入图片的语法,不过我们还是要了解的。直接插入图片的话,使用md语法是不能指定长宽的,需要调整大小的话,需要使用html中的 标签

![alt_图片描述](图片地址)

![alt_图片描述](图片地址 "图片标题")



使用网址变量插入图片

跟上面提到的使用链接网址方法一样,适用于某个图片要多次使用的情况。

使用my_Picture作为网址变量 [图片名称][my_Piture]
[my_Piture]: https://img-blog.csdnimg.cn/3eb5beeb76ff4ae9b064098042074d05.jpeg#pic_center

8. 表格

md的表格样式不多,其实还可以调整文字的大小、颜色、字体、背景色,但是从我个人角度出发建议不要搞这些,因为原本使用Markdown编辑器就是为了快速排版的,为的就是简洁快速的写作风格,要是还搞这些就没必要了。
默认表格样式

|表头1|表头2|    
|---|---|
|单元格1|单元格2|
|单元格1|单元格2|

实现效果如下:

表头1 表头2
单元格1 单元格2
单元格1 单元格2

注意:

  1. 表头下面的横线是用来确定表头位置的,同时也可以用来设置该列的对齐方式

:---: 居中对齐
:--- 左对齐
---: 右对齐

具体效果如下:

左对齐 居中对齐 右对齐
单元格1 单元格2 单元格3
单元格1 单元格2 单元格3
  1. 在表格中的空格是没有意义的,最多是在写md表格语法时看起来舒服点。

9. Emoji

  • 我个人是很爱用表情包,聊天不用表情我就会十分难受,如果我跟一个人聊天对话不怎么用表情表达我个人的情绪,那我一定是不太想跟你讲话其实。写博客是一个长期的习惯,有时候情绪比较强烈,又怎么能少掉表情呢?
  • 在md上使用的emojii,想用表情就对应表情对应的英文就行,但有可能有的平台上的md编辑器不支持Emoji,这个就需要自己去注意了。
  • 下列的对应md代码,是从github上找来的,表格中空的地方,是md编辑器中不支持的表情给我删掉了。
    更多详细内容可以看:https://gist.github.com/rxaviers/7360908

People

:bowtie: :bowtie: :smile: :laughing:
:blush: :smiley: ☺️ :relaxed:
:smirk: :heart_eyes: :kissing_heart:
:kissing_closed_eyes: :flushed: :relieved:
:satisfied: :grin: :wink:
:stuck_out_tongue_winking_eye: :stuck_out_tongue_closed_eyes: :grinning:
:kissing: :kissing_smiling_eyes: :stuck_out_tongue:
:sleeping: :worried: :frowning:
:anguished: :open_mouth: :grimacing:
:confused: :hushed: :expressionless:
:unamused: :sweat_smile: :sweat:
:disappointed_relieved: :weary: :pensive:
:disappointed: :confounded: :fearful:
:cold_sweat: :persevere: :cry:
:sob: :joy: :astonished:
:scream: :neckbeard: :neckbeard: :tired_face:
:angry: :rage: :triumph:
:sleepy: :yum: :mask:
:sunglasses: :dizzy_face: :imp:
:smiling_imp: :neutral_face: :no_mouth:
:innocent: :alien: :yellow_heart:
:blue_heart: :purple_heart: ❤️ :heart:
:green_heart: :broken_heart: :heartbeat:
:heartpulse: :two_hearts: :revolving_hearts:
:cupid: :sparkling_heart: :sparkles:
⭐️ :star: :star2: :dizzy:
:boom: :collision: :anger:
❗️ :exclamation: :question: :grey_exclamation:
:grey_question: :zzz: :dash:
:sweat_drops: :notes: :musical_note:
:fire: :hankey: :poop:
:shit: :+1: :thumbsup:
:-1: :thumbsdown: :ok_hand:
:punch: :facepunch: :fist:
✌️ :v: :wave: :hand:
:raised_hand: :open_hands: ☝️ :point_up:
:point_down: :point_left: :point_right:
:raised_hands: :pray: :point_up_2:
:clap: :muscle: :metal:
:fu: :walking: :runner:
:running: :couple: :family:
:two_men_holding_hands: :two_women_holding_hands: :dancer:
:dancers: :ok_woman: :no_good:
:information_desk_person: :raising_hand: :bride_with_veil:
:person_with_pouting_face: :person_frowning: :bow:
:couplekiss: :couplekiss: :couple_with_heart: :massage:
:haircut: :nail_care: :boy:
:girl: :woman: :man:
:baby: :older_woman: :older_man:
:person_with_blond_hair: :man_with_gua_pi_mao: :man_with_turban:
:construction_worker: :cop: :angel:
:princess: :smiley_cat: :smile_cat:
:heart_eyes_cat: :kissing_cat: :smirk_cat:
:scream_cat: :crying_cat_face: :joy_cat:
:pouting_cat: :japanese_ogre: :japanese_goblin:
:see_no_evil: :hear_no_evil: :speak_no_evil:
:guardsman: :skull: :feet:
:lips: :kiss: :droplet:
:ear: :eyes: :nose:
:tongue: :love_letter: :bust_in_silhouette:
:busts_in_silhouette: :speech_balloon: :thought_balloon:

Nature

☀️ :sunny: ☔️ :umbrella: ☁️ :cloud:
❄️ :snowflake: ⛄️ :snowman: ⚡️ :zap:
:cyclone: :foggy: :ocean:
:cat: :dog: :mouse:
:hamster: :rabbit: :wolf:
:frog: :tiger: :koala:
:bear: :pig: :pig_nose:
:cow: :boar: :monkey_face:
:monkey: :horse: :racehorse:
:camel: :sheep: :elephant:
:panda_face: :snake: :bird:
:baby_chick: :hatched_chick: :hatching_chick:
:chicken: :penguin: :turtle:
:bug: :honeybee: :ant:
:beetle: :snail: :octopus:
:tropical_fish: :fish: :whale:
:whale2: :dolphin: :cow2:
:ram: :rat: :water_buffalo:
:tiger2: :rabbit2: :dragon:
:goat: :rooster: :dog2:
:pig2: :mouse2: :ox:
:dragon_face: :blowfish: :crocodile:
:dromedary_camel: :leopard: :cat2:
:poodle: :paw_prints: :bouquet:
:cherry_blossom: :tulip: :four_leaf_clover:
:rose: :sunflower: :hibiscus:
:maple_leaf: :leaves: :fallen_leaf:
:herb: :mushroom: :cactus:
:palm_tree: :evergreen_tree: :deciduous_tree:
:chestnut: :seedling: :blossom:
:ear_of_rice: :shell: :globe_with_meridians:
:sun_with_face: :full_moon_with_face: :new_moon_with_face:
:new_moon: :waxing_crescent_moon: :first_quarter_moon:
:waxing_gibbous_moon: :full_moon: :waning_gibbous_moon:
:last_quarter_moon: :waning_crescent_moon: :last_quarter_moon_with_face:
:first_quarter_moon_with_face: :moon: :earth_africa:
:earth_americas: :earth_asia: :volcano:
:milky_way: ⛅️ :partly_sunny:

Objects

:bamboo: :gift_heart: :dolls:
:school_satchel: :mortar_board: :flags:
:fireworks: :sparkler: :wind_chime:
:rice_scene: :jack_o_lantern: :ghost:
:santa: :christmas_tree: :gift:
:bell: :no_bell: :tanabata_tree:
:tada: :confetti_ball: :balloon:
:crystal_ball: :cd: :dvd:
:floppy_disk: :camera: :video_camera:
:movie_camera: :computer: :tv:
:iphone: ☎️ :phone: ☎️ :telephone:
:telephone_receiver: :pager: :fax:
:minidisc: :vhs: :sound:
:speaker: :mute: :loudspeaker:
:mega: ⌛️ :hourglass: :hourglass_flowing_sand:
:alarm_clock: ⌚️ :watch: :radio:
:satellite: :loop: :mag:
:mag_right: :unlock: :lock:
:lock_with_ink_pen: :closed_lock_with_key: :key:
:bulb: :flashlight: :high_brightness:
:low_brightness: :electric_plug: :battery:
:calling: ✉️ :email: :mailbox:
:postbox: :bath: :bathtub:
:shower: :toilet: :wrench:
:nut_and_bolt: :hammer: :seat:
:moneybag: :yen: :dollar:
:pound: :euro: :credit_card:
:money_with_wings: :e-mail: :inbox_tray:
:outbox_tray: ✉️ :envelope: :incoming_envelope:
:postal_horn: :mailbox_closed: :mailbox_with_mail:
:mailbox_with_no_mail: :door: :smoking:
:bomb: :gun: :hocho:
:pill: :syringe: :page_facing_up:
:page_with_curl: :bookmark_tabs: :bar_chart:
:chart_with_upwards_trend: :chart_with_downwards_trend: :scroll:
:clipboard: :calendar: :date:
:card_index: :file_folder: :open_file_folder:
✂️ :scissors: :pushpin: :paperclip:
✒️ :black_nib: ✏️ :pencil2: :straight_ruler:
:triangular_ruler: :closed_book: :green_book:
:blue_book: :orange_book: :notebook:
:notebook_with_decorative_cover: :ledger: :books:
:bookmark: :name_badge: :microscope:
:telescope: :newspaper: :football:
:basketball: ⚽️ :soccer: ⚾️ :baseball:
:tennis: :8ball: :rugby_football:
:bowling: ⛳️ :golf: :mountain_bicyclist:
:bicyclist: :horse_racing: :snowboarder:
:swimmer: :surfer: :ski:
♠️ :spades: ♥️ :hearts: ♣️ :clubs:
♦️ :diamonds: :gem: :ring:
:trophy: :musical_score: :musical_keyboard:
:violin: :space_invader: :video_game:
:black_joker: :flower_playing_cards: :game_die:
:dart: :mahjong: :clapper:
:memo: :pencil: :book:
:art: :microphone: :headphones:
:trumpet: :saxophone: :guitar:
:shoe: :sandal: :high_heel:
:lipstick: :boot: :shirt:
:tshirt: :necktie: :womans_clothes:
:dress: :running_shirt_with_sash: :jeans:
:kimono: :bikini: :ribbon:
:tophat: :crown: :womans_hat:
:mans_shoe: :closed_umbrella: :briefcase:
:handbag: :pouch: :purse:
:eyeglasses: :fishing_pole_and_fish: ☕️ :coffee:
:tea: :sake: :baby_bottle:
:beer: :beers: :cocktail:
:tropical_drink: :wine_glass: :fork_and_knife:
:pizza: :hamburger: :fries:
:poultry_leg: :meat_on_bone: :spaghetti:
:curry: :fried_shrimp: :bento:
:sushi: :fish_cake: :rice_ball:
:rice_cracker: :rice: :ramen:
:stew: :oden: :dango:
:egg: :bread: :doughnut:
:custard: :icecream: :ice_cream:
:shaved_ice: :birthday: :cake:
:cookie: :chocolate_bar: :candy:
:lollipop: :honey_pot: :apple:
:green_apple: :tangerine: :lemon:
:cherries: :grapes: :watermelon:
:strawberry: :peach: :melon:
:banana: :pear: :pineapple:
:sweet_potato: :eggplant: :tomato:
:corn:

Places

:house: :house_with_garden: :school:
:office: :post_office: :hospital:
:bank: :convenience_store: :love_hotel:
:hotel: :wedding: ⛪️ :church:
:department_store: :european_post_office: :city_sunrise:
:city_sunset: :japanese_castle: :european_castle:
⛺️ :tent: :factory: :tokyo_tower:
:japan: :mount_fuji: :sunrise_over_mountains:
:sunrise: :stars: :statue_of_liberty:
:bridge_at_night: :carousel_horse: :rainbow:
:ferris_wheel: ⛲️ :fountain: :roller_coaster:
:ship: :speedboat: ⛵️ :boat:
⛵️ :sailboat: :rowboat: ⚓️ :anchor:
:rocket: ✈️ :airplane: :helicopter:
:steam_locomotive: :tram: :mountain_railway:
:bike: :aerial_tramway: :suspension_railway:
:mountain_cableway: :tractor: :blue_car:
:oncoming_automobile: :car: :red_car:
:taxi: :oncoming_taxi: :articulated_lorry:
:bus: :oncoming_bus: :rotating_light:
:police_car: :oncoming_police_car: :fire_engine:
:ambulance: :minibus: :truck:
:train: :station: :train2:
:bullettrain_front: :bullettrain_side: :light_rail:
:monorail: :railway_car: :trolleybus:
:ticket: ⛽️ :fuelpump: :vertical_traffic_light:
:traffic_light: ⚠️ :warning: :construction:
:beginner: :atm: :slot_machine:
:busstop: :barber: ♨️ :hotsprings:
:checkered_flag: :crossed_flags: :izakaya_lantern:
:moyai: :circus_tent: :performing_arts:
:round_pushpin: :triangular_flag_on_post:

Symbols

1️⃣ :one: 2️⃣ :two: 3️⃣ :three:
4️⃣ :four: 5️⃣ :five: 6️⃣ :six:
7️⃣ :seven: 8️⃣ :eight: 9️⃣ :nine:
:keycap_ten: :1234: 0️⃣ :zero:
#️⃣ :hash: :symbols: ◀️ :arrow_backward:
⬇️ :arrow_down: ▶️ :arrow_forward: ⬅️ :arrow_left:
:capital_abcd: :abcd: :abc:
↙️ :arrow_lower_left: ↘️ :arrow_lower_right: ➡️ :arrow_right:
⬆️ :arrow_up: ↖️ :arrow_upper_left: ↗️ :arrow_upper_right:
:arrow_double_down: :arrow_double_up: :arrow_down_small:
⤵️ :arrow_heading_down: ⤴️ :arrow_heading_up: ↩️ :leftwards_arrow_with_hook:
↪️ :arrow_right_hook: ↔️ :left_right_arrow: ↕️ :arrow_up_down:
:arrow_up_small: :arrows_clockwise: :arrows_counterclockwise:
:rewind: :fast_forward: ℹ️ :information_source:
:ok: :twisted_rightwards_arrows: :repeat:
:repeat_one: :new: :top:
:up: :cool: :free:
:ng: :cinema: :koko:
:signal_strength:
:sa: :restroom: :mens:
:womens: :baby_symbol: :no_smoking:
:parking: ♿️ :wheelchair: :metro:
:baggage_claim: :accept: :wc:
:potable_water: :put_litter_in_its_place: ㊙️ :secret:
㊗️ :congratulations: Ⓜ️ :m: :passport_control:
:left_luggage: :customs: :ideograph_advantage:
:cl: :sos: :id:
:no_entry_sign: :underage: :no_mobile_phones:
:do_not_litter: :non-potable_water: :no_bicycles:
:no_pedestrians: :children_crossing: ⛔️ :no_entry:
✳️ :eight_spoked_asterisk: ✴️ :eight_pointed_black_star: :heart_decoration:
:vs: :vibration_mode: :mobile_phone_off:
:chart: :currency_exchange: ♈️ :aries:
♉️ :taurus: ♊️ :gemini: ♋️ :cancer:
♌️ :leo: ♍️ :virgo: ♎️ :libra:
♏️ :scorpius: ♐️ :sagittarius: ♑️ :capricorn:
♒️ :aquarius: ♓️ :pisces: :ophiuchus:
:six_pointed_star: :negative_squared_cross_mark: :a:
:b: :ab: :o2:
:diamond_shape_with_a_dot_inside: ♻️ :recycle: :end:
:on: :soon: :clock1:
:clock130: :clock10: :clock1030:
:clock11: :clock1130: :clock12:
:clock1230: :clock2: :clock230:
:clock3: :clock330: :clock4:
:clock430: :clock5: :clock530:
:clock6: :clock630: :clock7:
:clock730: :clock8: :clock830:
:clock9: :clock930: :heavy_dollar_sign:
©️ :copyright: ®️ :registered: ™️ :tm:
:x: ❗️ :heavy_exclamation_mark: ‼️ :bangbang:
⁉️ :interrobang: ⭕️ :o: ✖️ :heavy_multiplication_x:
:heavy_plus_sign: :heavy_minus_sign: :heavy_division_sign:
:white_flower: :100: ✔️ :heavy_check_mark:
☑️ :ballot_box_with_check: :radio_button: :link:
:curly_loop: 〰️ :wavy_dash: 〽️ :part_alternation_mark:
:trident:
:white_check_mark:
⚫️ :black_circle: ⚪️ :white_circle: :red_circle:
:large_blue_circle: :large_blue_diamond: :large_orange_diamond:
:small_blue_diamond: :small_orange_diamond: :small_red_triangle:
:small_red_triangle_down:

你可能感兴趣的:(开发工具语法,学习)