当前位置:网站首页>Markdown tricks

Markdown tricks

2020-11-06 21:19:00 itread01

## Editing and typesetting Just understand Markdown Grammar is not enough , Know this Typesetting skills Add color to your article . ### Spaces and blank lines message , From an artistic point of view , To leave blank is to “ blank ” And then Rendering the artistic conception of beauty The art of . From an application point of view , Leave blank is more of a kind of Simple 、 At ease Idea . stay Markdown Good at using spaces and lines to make the article more natural . Make good use of spaces, that is, when Chinese and English are mixed or Chinese and Arabic numerals are mixed , Insert a space before and after the English or Arabic numerals . It is also recommended that when Chinese and inline code are mixed , Add a space before and after the line code . It should be noted that , If English 、 Arabic numerals or in line code are next to Chinese fullwidth punctuation , Between it and punctuation ~~ Add space ~~( No spaces ). Good use of blank lines is to insert a blank line between paragraphs . Here's an example . John Gruber stay 2004 It was created in Markdown Language . Many people think `Markdown` Can increase productivity .[Markdown Guide](https://www.markdownguide.org/) Is a free open source reference guide , It explains how to use Markdown, It's an easy to use markup language , You can use it to format almost any file . > If you are using vscode As markdown editor , I recommend vscode Expansion Kit [pandu](https://marketplace.visualstudio.com/items?itemName=halfcrazy.pangu) To automatically insert left and right spaces . ### Picture and text mix You may have seen such an article layout , On one side is the picture , On the other side is a paragraph . ### ![image.png](https://cdn.nlark.com/yuque/0/2020/png/745037/1604656599366-5478b70a-ca5d-4d80-82cc-bd4e64591eec.png#align=left&display=inline&height=146&margin=%5Bobject%20Object%5D&name=image.png&originHeight=146&originWidth=751&size=70454&status=done&style=none&width=751) This is in the markdown It's not difficult to implement , Use ` ` Label to map , And then specify its `align` Property is `left` perhaps `right`. ```html Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis error ipsam voluptatibus eius dolore maxime aperiam eveniet, autem laborum exercitationem recusandae nostrum, soluta praesentium vel sapiente. Natus, nobis molestiae. Repellat? ``` Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis error ipsam voluptatibus eius dolore maxime aperiam eveniet, autem laborum exercitationem recusandae nostrum, soluta praesentium vel sapiente. Natus, nobis molestiae. Repellat? ### Code block folding In the blog Garden TinyMCE You can easily insert code blocks that can be folded , Fortunately Markdown have access to HTML Tag function of .H5 Provides `
` and ` `  Label , It's easy to use them in Markdown Implement code block folding in . ````html
post-signature.js ```javascript // Build essay signatures import { pageName } from '@tools' import { getBlogname, getCurrentPostUrl } from '@cnblog' import { postSignatureConfig } from '@config/plugins' const containerId = 'post-signature' /** * Building containers */ const buildContainer = () => { const author = getBlogname() const href = getCurrentPostUrl() const el = `

The author of this article :${author}

This article links :${href}

` $('#cnblogs_post_body').append(el) } /** * Build copyright information * @param {Boolean} enableLicense * @param {String} licenseName * @param {String} licenseLink */ const buildLicense = ( enableLicense, licenseName, licenseLink, ) => { if (!enableLicense) return const agreement = licenseName.length ? licenseName : ' Knowledge sharing signature - Non commercial use - No deduction 2.5 Mainland China ' const el = `

Copyright notice : This work adopts ${agreement} License agreement to license .

` $(`#${containerId}`).append(el) } /** * Build custom content * @param {Array} content */ function buildContent(content) { let el = '' for (let i = 0; i < content.length; i++) { el += '

' + content[i] + '

' } $(`#${containerId}`).append(el) } export default devOptions => { const { enable, enableLicense, content, licenseName, licenseLink, } = postSignatureConfig(devOptions) if (!enable) return if (pageName() !== 'post') return buildContainer() buildLicense(enableLicense, licenseName, licenseLink) buildContent(content) } ```
````
post-signature.js ```javascript // Build essay signatures import { pageName } from '@tools' import { getBlogname, getCurrentPostUrl } from '@cnblog' import { postSignatureConfig } from '@config/plugins' const containerId = 'post-signature' /** * Building containers */ const buildContainer = () => { const author = getBlogname() const href = getCurrentPostUrl() const el = `
                   

The author of this article :${author}

                   

This article links :${href}

               
` $('#cnblogs_post_body').append(el) } /** * Build copyright information * @param {Boolean} enableLicense * @param {String} licenseName * @param {String} licenseLink */ const buildLicense = (enableLicense, licenseName, licenseLink) => { if (!enableLicense) return const agreement = licenseName.length ? licenseName : ' Knowledge sharing signature - Non commercial use - No deduction 2.5 Mainland China ' const el = `

Copyright notice : This work adopts ${agreement} License agreement to license .

` $(`#${containerId}`).append(el) } /** * Build custom content * @param {Array} content */ function buildContent(content) { let el = '' for (let i = 0; i < content.length; i++) { el += '

' + content[i] + '

' } $(`#${containerId}`).append(el) } export default devOptions => { const { enable, enableLicense, content, licenseName, licenseLink } = postSignatureConfig(devOptions) if (!enable) return if (pageName() !== 'post') return buildContainer() buildLicense(enableLicense, licenseName, licenseLink) buildContent(content) } ```
You can even fold anything , Just put ``  Replace the contents between tags with other contents to be folded . > Please note , stay ``  Leave a blank line above and below the content between tags . ### Reference blocks stay Markdown In general, through `>`  To announce a Markdown Reference blocks : > This is a reference block . But their styles are fixed , We often need reference blocks with hints , Like the following : ![image.png](https://cdn.nlark.com/yuque/0/2020/png/745037/1604657982597-f2a41d59-fbaa-4619-afac-f4b02de675fc.png#align=left&display=inline&height=548&margin=%5Bobject%20Object%5D&name=image.png&originHeight=548&originWidth=834&size=28692&status=done&style=none&width=834) stay Markdown In aid of HTML and CSS It can also be done . ```html
《 War and peace 》 In 1812 , Russia 、 France is at war again , Andre · Paul konsky was seriously wounded in the battle , And the Russian army is losing , Seeing Moscow fall into the enemy's hands . Rostov will be used to carry the carriage of property , To transport wounded soldiers instead , Nadasha can find the dying Andre among the wounded soldiers · Paul konsky . She apologized to him and looked after him with enthusiasm , But it's all in vain , Andre · Paul konsky still can't escape the God of death and died .
《 Notre Dame de Paris 》 The ugly deaf Casimodo was adopted by father Claude of Notre Dame , To be a bell ringer , Father Claude, with a decent appearance, has met the beautiful gypsy girl la · After Esmeralda , Be captivated by its beauty , He ordered Quasimodo to forcibly take Esmeralda , On the way, he was rescued by Captain Forbes cavalry , Esmeralda fell in love with phoebus .
《 childhood 》 About the little hero Gorky ( Aliosa ) After my father died , Years spent with my mother in my grandfather's house . In the meantime , He was loved by his grandmother 、 Take care of , Inspired by the beautiful fairy tales told by my grandmother , At the same time, I also witnessed two uncles fighting for the property and selfishness in their daily life 、 Greed . Gorky ( Aliosa ) It's in this “ Suffocating 、 In a narrow world full of terrible scenes ” I spent my childhood .
《 Wuthering Heights 》 A man who loves the best , Did some crazy behavior . another use “ Love ” Killing people , But also with love suicide . Before and after Catherine died , He lives in pain . As Catherine lay dying , He stabbed her with words . however , Heathcliff suffered two pains , His own and Catherine's .
《 Red and black 》 yes 19 A monument to French and European literature in the 20th century . The novel focuses on the protagonist Yulian's personal struggle and two love experiences , It reveals the turbulent class struggle in the period of restoration Dynasty , Reflecting the political darkness 、 Church corruption , The broad picture of life in which the noble reactionary and the bourgeoisie's lust for profit are imbued . Yu Lian's two love motives are based on love possession, and finally achieve their own political goals .
《 Anna · Karenina 》 It's the famous Russian writer lev · Tolstoy's masterpiece . This book through the heroine gong'an's pursuit of love tragedy , And Levin's reform and exploration in the face of crisis in rural areas , It depicts a broad and colorful picture of Russia from Moscow to other provinces and villages , It describes successively 150 Multiple characters , It's a social encyclopedia .
《 Float 》 It tells a love story with the background of American Civil War . The protagonist of the novel, Scarlett · O'Hara is the daughter of a wealthy and influential planter in Georgia . Father Gerald was an Irish immigrant . When I first arrived in Georgia , Gerald was penniless , Gambling to win the ownership of Tarot manor . So he started his business in this red land , Weaving his American dream .
《 John · Christophe 》(Jean-Christophe) It is a series of contradictions and conflicts reflected in the real society through the hero's life experience , A novel that preaches humanitarianism and heroism . The novel describes the hero's struggling life , From the awakening of musical talent in childhood 、 To the contempt and resistance to the powerful in youth 、 Then to the pursuit and success of career in adulthood 、 Finally reach the lofty realm of spiritual tranquility
《 Anna · Karenina 》 It's the famous Russian writer lev · Tolstoy's masterpiece . This book through the heroine gong'an's pursuit of love tragedy , And Levin's reform and exploration in the face of crisis in rural areas , It depicts a broad and colorful picture of Russia from Moscow to other provinces and villages , It describes successively 150 Multiple characters , It's a social encyclopedia .
Gorky's original name is Alexei · Maximovitch · Pishkov , On 1868 year 3 month 28 I was born in Nizhny on the Volga River · Novgorod ( Now Gorky city ), My father is a joiner . He 4 I lost my father , Living with my mother at my grandfather's house ,10 My grandfather went bankrupt in a fire when he was 15 years old , And he was thrown away “ The world ”, Began to make a living on his own .16 To Kazan at the age of , I wanted to go to college , As a result, Kashan's slums and docks became his “ Social University ”. There it is , He came into contact with revolutionary groups of progressive youth .
```
《 War and peace 》 In 1812 , Russia 、 France is at war again , Andre · Paul konsky was seriously wounded in the battle , And the Russian army is losing , Seeing Moscow fall into the enemy's hands . Rostov will be used to carry the carriage of property , To transport wounded soldiers instead , Nadasha can find the dying Andre among the wounded soldiers · Paul konsky . She apologized to him and looked after him with enthusiasm , But it's all in vain , Andre · Paul konsky still can't escape the God of death and died .
《 Notre Dame de Paris 》 The ugly deaf Casimodo was adopted by father Claude of Notre Dame , To be a bell ringer , Father Claude, with a decent appearance, has met the beautiful gypsy girl la · After Esmeralda , Be captivated by its beauty , He ordered Quasimodo to forcibly take Esmeralda , On the way, he was rescued by Captain Forbes cavalry , Esmeralda fell in love with phoebus .
《 childhood 》 About the little hero Gorky ( Aliosa ) After my father died , Years spent with my mother in my grandfather's house . In the meantime , He was loved by his grandmother 、 Take care of , Inspired by the beautiful fairy tales told by my grandmother , At the same time, I also witnessed two uncles fighting for the property and selfishness in their daily life 、 Greed . Gorky ( Aliosa ) It's in this “ Suffocating 、 In a narrow world full of terrible scenes ” I spent my childhood .
《 Wuthering Heights 》 A man who loves the best , Did some crazy behavior . another use “ Love ” Killing people , But also with love suicide . Before and after Catherine died , He lives in pain . As Catherine lay dying , He stabbed her with words . however , Heathcliff suffered two pains , His own and Catherine's .
《 Red and black 》 yes 19 A monument to French and European literature in the 20th century . The novel focuses on the protagonist Yulian's personal struggle and two love experiences , It reveals the turbulent class struggle in the period of restoration Dynasty , Reflecting the political darkness 、 Church corruption , The broad picture of life in which the noble reactionary and the bourgeoisie's lust for profit are imbued . Yu Lian's two love motives are based on love possession, and finally achieve their own political goals .
《 Anna · Karenina 》 It's the famous Russian writer lev · Tolstoy's masterpiece . This book through the heroine gong'an's pursuit of love tragedy , And Levin's reform and exploration in the face of crisis in rural areas , It depicts a broad and colorful picture of Russia from Moscow to other provinces and villages , It describes successively 150 Multiple characters , It's a social encyclopedia .
《 Float 》 It tells a love story with the background of American Civil War . The protagonist of the novel, Scarlett · O'Hara is the daughter of a wealthy and influential planter in Georgia . Father Gerald was an Irish immigrant . When I first arrived in Georgia , Gerald was penniless , Gambling to win the ownership of Tarot manor . So he started his business in this red land , Weaving his American dream .
《 John · Christophe 》(Jean-Christophe) It is a series of contradictions and conflicts reflected in the real society through the hero's life experience , A novel that preaches humanitarianism and heroism . The novel describes the hero's struggling life , From the awakening of musical talent in childhood 、 To the contempt and resistance to the powerful in youth 、 Then to the pursuit and success of career in adulthood 、 Finally reach the lofty realm of spiritual tranquility
《 Anna · Karenina 》 It's the famous Russian writer lev · Tolstoy's masterpiece . This book through the heroine gong'an's pursuit of love tragedy , And Levin's reform and exploration in the face of crisis in rural areas , It depicts a broad and colorful picture of Russia from Moscow to other provinces and villages , It describes successively 150 Multiple characters , It's a social encyclopedia .
Gorky's original name is Alexei · Maximovitch · Pishkov , On 1868 year 3 month 28 I was born in Nizhny on the Volga River · Novgorod ( Now Gorky city ), My father is a joiner . He 4 I lost my father , Living with my mother at my grandfather's house ,10 My grandfather went bankrupt in a fire when he was 15 years old , And he was thrown away “ The world ”, Began to make a living on his own .16 To Kazan at the age of , I wanted to go to college , As a result, Kashan's slums and docks became his “ Social University ”. There it is , He came into contact with revolutionary groups of progressive youth .
## Tools I chose the language sparrow as the main tool . ### Insert a picture It's very easy to insert pictures with a finch ,Crtl+ c Copy the picture ,Crtl + v Post the picture directly to the content , It will automatically help you upload to the language bird's server . Or you can use the illustration button on the toolbar , Select local image to insert . I usually use windows Self contained screenshot tool ( Shortcut key :win+ shift+s) Take a screenshot and post , Because the screenshot tool will automatically copy the image to the cutting board . stay mac There are similar solutions . ![Video_2020-11-06_163206.gif](https://cdn.nlark.com/yuque/0/2020/gif/745037/1604651748114-d2f66e6d-f3c1-47e2-bf20-505d967564ff.gif#align=left&display=inline&height=282&margin=%5Bobject%20Object%5D&name=Video_2020-11-06_163206.gif&originHeight=282&originWidth=640&size=1753415&status=done&style=none&width=640) ### Insert table stay markdown It's very cumbersome to insert tables into , But it's very easy in a finch : Click the insert button , Slide the mouse to select the number of rows and columns the table needs to have , It can automatically help you generate . ![Video_2020-11-06_163953.gif](https://cdn.nlark.com/yuque/0/2020/gif/745037/1604652194203-4bfaafde-0739-45f4-89ea-2f4e01e59fc3.gif#align=left&display=inline&height=480&margin=%5Bobject%20Object%5D&name=Video_2020-11-06_163953.gif&originHeight=480&originWidth=509&size=2001308&status=done&style=none&width=509) You can also add or delete columns and rows, and set the alignment of the table content at any time during the editing process . ### Insert formula Mathematical formulas are just needed for some people , Language sparrow supports insertion LaTeX The formula . The important thing is , The platform you want to release may not support rendering markdown The mathematical formula . Voice sparrow support is exporting markdown Check export when you want LaTeX The formula is picture . ![image.png](https://cdn.nlark.com/yuque/0/2020/png/745037/1604652657472-6825c238-c2c1-4220-a278-fe617ecdc81d.png#align=left&display=inline&height=364&margin=%5Bobject%20Object%5D&name=image.png&originHeight=364&originWidth=639&size=19428&status=done&style=none&width=639) ### Making mind maps Usually , Insert a mind map into markdown The following steps may be required : 1. Open mind mapping tool xmind wps etc. 2. Start making mind maps 3. Use screenshots or export images as pictures 4. Upload the picture to the picture bed to get the picture link 5. Use markdown Syntax insert picture To use a language bird, you just need to : 1. Directly in markdown Make mind map in 1. Automatically convert to picture when exporting > It's just as easy to insert a flowchart . ### Export The language bird can export the content as Markdown Source code , Seamless connection to other communities , I just release the content to the blog Garden , No problems have been found at present . You can go through my [ Invitation link ](https://www.yuque.com/login?platform=wechat&inviteToken=d97efa6c62973d671ad88d38b9b4d9c9b62201921c22c6bfc60ec5889295e00d) Add words or direct [ Join in ](https://www.yuque.com/). Thank you for reading !

版权声明
本文为[itread01]所创,转载请带上原文链接,感谢