[{"data":1,"prerenderedAt":40},["ShallowReactive",2],{"i-lucide:grip":3,"i-lucide:chevron-right":8,"i-lucide:moon":10,"i-lucide:sun":12,"i-lucide:languages":14,"i-lucide:chevron-down":16,"i-lucide:shield-check":18,"i-lucide:mail":20,"blog-body-markdown-basic-syntax-tutorial-en":22,"i-lucide:lightbulb":23,"i-lucide:file-text":25,"i-lucide:pen-tool":27,"i-lucide:code":29,"i-lucide:pen-line":31,"i-lucide:file-code-2":33,"i-lucide:share-2":36,"i-lucide:star":38},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"19\" r=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m9 18l6-6l-6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003Cpath d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\u002F>\u003Cpath d=\"m9 12l2 2l4-4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"\u002F>\u003Crect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\u002F>\u003C\u002Fg>","\u003Cblockquote>\n\u003Cp>Beginners often bounce off \u003Ccode>#\u003C\u002Fcode>, \u003Ccode>*\u003C\u002Fcode>, and backticks—but \u003Cstrong>everyday Markdown is only about ten high-frequency patterns\u003C\u002Fstrong>. Learn those and you can write blogs, READMEs, notes, and weekly updates. Each section below pairs source with a rendered result, plus examples you can copy into an editor and tweak.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fmarkdown-basic-syntax-tutorial\u002Fcover.webp\" alt=\"Markdown high-frequency syntax: source vs rendered output\">\u003C\u002Fp>\n\u003Ch2>What Is Markdown, and Why Learn It?\u003C\u002Fh2>\n\u003Cp>Markdown is a lightweight way to mark up plain text with ordinary symbols: \u003Ccode>#\u003C\u002Fcode> for headings, \u003Ccode>*\u003C\u002Fcode> for emphasis, \u003Ccode>-\u003C\u002Fcode> for lists. A renderer turns those marks into real layout. The payoff is \u003Cstrong>content separated from presentation\u003C\u002Fstrong>—the source stays readable, and the same \u003Ccode>.md\u003C\u002Fcode> file can become HTML, Word, PDF, or platform-specific rich text.\u003C\u002Fp>\n\u003Cp>That is why GitHub, note apps, static blogs, and many AI chat UIs treat Markdown as the default writing format. The learning curve is low: you format from the keyboard instead of hunting through toolbars. Below are the ten patterns you will use most.\u003C\u002Fp>\n\u003Ch2>How Do Headings Work? Count the \u003Ccode>#\u003C\u002Fcode> Signs\u003C\u002Fh2>\n\u003Cp>Headings start a line with \u003Ccode>#\u003C\u002Fcode>. The number of hashes is the level, and \u003Cstrong>there must be a space between \u003Ccode>#\u003C\u002Fcode> and the title text\u003C\u002Fstrong>. Use \u003Ccode>#\u003C\u002Fcode> for the document title; use \u003Ccode>##\u003C\u002Fcode> \u002F \u003Ccode>###\u003C\u002Fcode> for sections inside the body.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Learn by doing:\u003C\u002Fstrong> open the \u003Ca href=\"\u002Fmarkdown\u002Fedit\u002F\">Markdown online editor\u003C\u002Fa>, paste the sample on the left, then change how many \u003Ccode>#\u003C\u002Fcode> you use while watching the live preview. Use the same habit for every section below.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark mac-code-block\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Cspan class=\"mac-lang-badge\">markdown\u003C\u002Fspan>\u003Ccode class=\"language-markdown\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold\"># Heading 1 (document title)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold\">## Heading 2 (section)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold\">### Heading 3 (subsection)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold\">#### Heading 4\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Rendered preview (from the online editor):\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fmarkdown-basic-syntax-tutorial\u002Fheadings.en.webp\" alt=\"Rendered heading levels\">\u003C\u002Fp>\n\u003Cp>The classic beginner mistake is writing \u003Ccode>#Heading\u003C\u002Fcode> with no space—most renderers then show the raw text. Also avoid skipping levels (jumping from \u003Ccode>#\u003C\u002Fcode> to \u003Ccode>###\u003C\u002Fcode>); clean hierarchy helps when you export Word\u002FPDF and generate a table of contents.\u003C\u002Fp>\n\u003Ch2>How Do Bold, Italic, and Strikethrough Work?\u003C\u002Fh2>\n\u003Cp>Wrap text in matching markers: \u003Cstrong>bold\u003C\u002Fstrong> with \u003Ccode>**text**\u003C\u002Fcode>, \u003Cem>italic\u003C\u002Fem> with \u003Ccode>*text*\u003C\u002Fcode>, \u003Cs>strikethrough\u003C\u002Fs> with \u003Ccode>~~text~~\u003C\u002Fcode>. You can combine them.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark mac-code-block\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Cspan class=\"mac-lang-badge\">markdown\u003C\u002Fspan>\u003Ccode class=\"language-markdown\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">This sentence has \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-light-font-weight:bold;--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold\">**bold**\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic\">*italic*\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-light-font-weight:bold;--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold\">**\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic\">*bold italic*\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-light-font-weight:bold;--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold\">**\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">, and \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-light-text-decoration:line-through;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:line-through\">~~an old price~~\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fmarkdown-basic-syntax-tutorial\u002Femphasis.en.webp\" alt=\"Rendered bold, italic, and strikethrough\">\u003C\u002Fp>\n\u003Cp>If emphasis fails next to punctuation or CJK characters, add a space outside the \u003Ccode>**\u003C\u002Fcode> markers. Strikethrough is handy for contrasts like “was \u003Cs>99\u003C\u002Fs> now 39”.\u003C\u002Fp>\n\u003Ch2>How Do Unordered, Ordered, and Task Lists Work?\u003C\u002Fh2>\n\u003Cp>Three list types: unordered with \u003Ccode>- \u003C\u002Fcode> (or \u003Ccode>* \u003C\u002Fcode>), ordered with \u003Ccode>1. \u003C\u002Fcode>, and task lists with \u003Ccode>- [ ] \u003C\u002Fcode> (open) or \u003Ccode>- [x] \u003C\u002Fcode> (done). \u003Cstrong>Always put a space after the marker.\u003C\u002Fstrong> Indent by two or four spaces for nested items.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark mac-code-block\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Cspan class=\"mac-lang-badge\">markdown\u003C\u002Fspan>\u003Ccode class=\"language-markdown\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">Unordered:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E36209;--shiki-dark:#FFAB70\">-\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> Apple\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E36209;--shiki-dark:#FFAB70\">-\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> Banana\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E36209;--shiki-dark:#FFAB70\">  -\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> Nested item\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">Ordered:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E36209;--shiki-dark:#FFAB70\">1.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> Open the editor\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E36209;--shiki-dark:#FFAB70\">2.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> Paste content\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E36209;--shiki-dark:#FFAB70\">3.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> Export the file\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">Tasks:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E36209;--shiki-dark:#FFAB70\">-\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline\">x\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">] Done\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E36209;--shiki-dark:#FFAB70\">-\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\"> [ ] Still to do\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fmarkdown-basic-syntax-tutorial\u002Flists.en.webp\" alt=\"Rendered unordered, ordered, and task lists\">\u003C\u002Fp>\n\u003Cp>You can write every ordered item as \u003Ccode>1.\u003C\u002Fcode>—many renderers renumber automatically, which makes inserting rows easier. Task lists are a GFM (GitHub Flavored Markdown) extension and work well for TODOs and checklists.\u003C\u002Fp>\n\u003Ch2>How Do Links and Images Work?\u003C\u002Fh2>\n\u003Cp>Links use \u003Ccode>[label](url)\u003C\u002Fcode>. Images are the same with a leading bang: \u003Ccode>![alt text](image-url)\u003C\u002Fcode>. Structure is almost identical; images render inline, links stay clickable text.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark mac-code-block\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Cspan class=\"mac-lang-badge\">markdown\u003C\u002Fspan>\u003Ccode class=\"language-markdown\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">Here is a [\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline\">link to MeTool\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">](\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline\">https:\u002F\u002Fmetool.online\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">).\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">Here is an image:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">![\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline\">MeTool logo\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">](\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline\">https:\u002F\u002Fmetool.online\u002Fimages\u002Flogo-removebg.png\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fmarkdown-basic-syntax-tutorial\u002Flink-image.en.webp\" alt=\"Rendered link and image\">\u003C\u002Fp>\n\u003Cp>Write meaningful alt text for accessibility and failed loads. The URL can be remote or local; many online editors also accept drag-and-drop or paste and insert the image syntax for you.\u003C\u002Fp>\n\u003Ch2>How Do Inline Code and Fenced Code Blocks Work?\u003C\u002Fh2>\n\u003Cp>Wrap short commands in single backticks for \u003Ccode>inline code\u003C\u002Fcode>. For multi-line blocks, use three backticks and put a language id after the opening fence (\u003Ccode>js\u003C\u002Fcode>, \u003Ccode>python\u003C\u002Fcode>, …) so the renderer can highlight.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark mac-code-block\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Cspan class=\"mac-lang-badge\">markdown\u003C\u002Fspan>\u003Ccode class=\"language-markdown\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">To install dependencies, run \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#79B8FF\">`npm install`\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">```js\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\"> hello\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">  console.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#9ECBFF\">'Hello Markdown'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">```\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fmarkdown-basic-syntax-tutorial\u002Fcode.en.webp\" alt=\"Rendered inline code and highlighted fence\">\u003C\u002Fp>\n\u003Cp>The backtick key is usually left of \u003Ccode>1\u003C\u002Fcode>—do not confuse it with a single quote. Language tags matter: without them you often get a plain block with no highlighting.\u003C\u002Fp>\n\u003Ch2>How Do Blockquotes Work?\u003C\u002Fh2>\n\u003Cp>Start a line with \u003Ccode>> \u003C\u002Fcode> for a quote—great for key takeaways, citations, or callouts. Repeat \u003Ccode>>\u003C\u002Fcode> on each line of a multi-paragraph quote; nest with \u003Ccode>>>\u003C\u002Fcode> if needed.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark mac-code-block\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Cspan class=\"mac-lang-badge\">markdown\u003C\u002Fspan>\u003Ccode class=\"language-markdown\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\">> This is a quote—good for a key conclusion.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\">> Quotes can include \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-light-font-weight:bold;--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold\">**bold**\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\"> and \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#79B8FF\">`code`\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#85E89D\">.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fmarkdown-basic-syntax-tutorial\u002Fquote.en.webp\" alt=\"Rendered blockquote\">\u003C\u002Fp>\n\u003Cp>Styles vary by platform, but the meaning is the same: demote the text as a side note or excerpt. Opening an article with a one-line quote is a common pattern.\u003C\u002Fp>\n\u003Ch2>How Do Tables Work?\u003C\u002Fh2>\n\u003Cp>Separate cells with \u003Ccode>|\u003C\u002Fcode>. The second row is a header separator of \u003Ccode>---\u003C\u002Fcode>. Colons set alignment: \u003Ccode>:---\u003C\u002Fcode> left, \u003Ccode>:---:\u003C\u002Fcode> center, \u003Ccode>---:\u003C\u002Fcode> right.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark mac-code-block\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Cspan class=\"mac-lang-badge\">markdown\u003C\u002Fspan>\u003Ccode class=\"language-markdown\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">| Feature | Common? | Note |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">| :--- | :---: | ---: |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">| Heading | Yes | Use # |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">| Table | Yes | Use pipes |\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fmarkdown-basic-syntax-tutorial\u002Ftable.en.webp\" alt=\"Rendered table\">\u003C\u002Fp>\n\u003Cp>Hand-aligning pipes is tedious. Practical tip: \u003Cstrong>insert a table skeleton from the editor toolbar\u003C\u002Fstrong>, then fill cells—or paste from a spreadsheet into an editor that converts tables.\u003C\u002Fp>\n\u003Ch2>How Do Horizontal Rules and Line Breaks Work?\u003C\u002Fh2>\n\u003Cp>A horizontal rule is a line with three or more hyphens \u003Ccode>---\u003C\u002Fcode> (or \u003Ccode>***\u003C\u002Fcode>). For line breaks, a single Enter often does \u003Cstrong>not\u003C\u002Fstrong> start a new line—use two trailing spaces, or leave a blank line for a new paragraph.\u003C\u002Fp>\n\u003Cpre class=\"shiki shiki-themes github-light github-dark mac-code-block\" style=\"background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8\" tabindex=\"0\">\u003Cspan class=\"mac-lang-badge\">markdown\u003C\u002Fspan>\u003Ccode class=\"language-markdown\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">First paragraph.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">Second paragraph (blank line between).\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E1E4E8\">Content below the rule.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Keep a blank line above \u003Ccode>---\u003C\u002Fcode>, or it may be parsed as a setext heading underline. Blank lines between paragraphs are the safest habit.\u003C\u002Fp>\n\u003Ch2>Cheat Sheet: Ten High-Frequency Patterns\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Pattern\u003C\u002Fth>\n\u003Cth>Syntax\u003C\u002Fth>\n\u003Cth>Result\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Heading\u003C\u002Ftd>\n\u003Ctd>\u003Ccode># Title\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Heading levels\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Bold\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>**text**\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Bold\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Italic\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>*text*\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Italic\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Strikethrough\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>~~text~~\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Struck text\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Unordered list\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>- item\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Bullets\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Ordered list\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>1. item\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Numbers\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Task list\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>- [ ] item\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Checkboxes\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Link\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>[text](url)\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Clickable link\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Image\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>![alt](url)\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Image\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Inline code\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>`code`\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Monospace\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Code fence\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>```lang\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Highlighted block\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Quote\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>> text\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Blockquote\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Table\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>| cell |\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Table\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Rule\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>---\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Horizontal line\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Ch2>Practice: Paste Examples Into an Editor\u003C\u002Fh2>\n\u003Cp>Reading is not enough—\u003Cstrong>edit\u003C\u002Fstrong>. Copy any sample into a left-source \u002F right-preview editor, change one character, and watch the preview. That beats memorizing a reference page.\u003C\u002Fp>\n\u003Cp>Use the \u003Ca href=\"\u002Fmarkdown\u002Fedit\u002F\">Markdown online editor\u003C\u002Fa>: live preview, drafts in local browser storage, no upload, plus import \u003Ccode>.md\u003C\u002Fcode> and paste images. When you are ready to ship, convert with \u003Ca href=\"\u002Fmarkdown\u002Fconvert\u002F\">Markdown convert\u003C\u002Fa> to Word\u002FPDF, or share a preview link with \u003Ca href=\"\u002Fmarkdown\u002Fshare\u002F\">Markdown share\u003C\u002Fa>. More tools live in the \u003Ca href=\"\u002Fmarkdown\u002F\">Markdown toolbox\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch2>Wrap-Up\u003C\u002Fh2>\n\u003Cp>The everyday set is small: \u003Ccode>#\u003C\u002Fcode> headings, \u003Ccode>**\u003C\u002Fcode> bold, \u003Ccode>*\u003C\u002Fcode> italic, \u003Ccode>-\u003C\u002Fcode> \u002F \u003Ccode>1.\u003C\u002Fcode> lists, \u003Ccode>- [ ]\u003C\u002Fcode> tasks, \u003Ccode>[]()\u003C\u002Fcode> links, \u003Ccode>![]()\u003C\u002Fcode> images, backticks for code, \u003Ccode>>\u003C\u002Fcode> quotes, \u003Ccode>|\u003C\u002Fcode> tables, \u003Ccode>---\u003C\u002Fcode> rules. Two iron rules—\u003Cstrong>space after markers, blank line between paragraphs\u003C\u002Fstrong>—avoid most beginner bugs. Open the \u003Ca href=\"\u002Fmarkdown\u002Fedit\u002F\">online editor\u003C\u002Fa> and practice for an afternoon.\u003C\u002Fp>\n\u003Cp>For math, diagrams, collapsible sections, and superscripts\u002Fsubscripts, continue with the \u003Ca href=\"\u002Fblog\u002Fp\u002Fmarkdown-advanced-syntax\u002F\">advanced Markdown syntax guide\u003C\u002Fa>.\u003C\u002Fp>\n",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":24},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":26},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"\u002F>\u003Cpath d=\"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":28},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z\"\u002F>\u003Cpath d=\"m18 13l-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18M2.3 2.3l7.286 7.286\"\u002F>\u003Ccircle cx=\"11\" cy=\"11\" r=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":30},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m16 18l6-6l-6-6M8 6l-6 6l6 6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":32},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 21h8m.174-14.188a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":34,"hidden":35},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\"\u002F>\u003Cpath d=\"M14 2v4a2 2 0 0 0 2 2h4M5 12l-3 3l3 3m4 0l3-3l-3-3\"\u002F>\u003C\u002Fg>",true,{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":37},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"18\" cy=\"5\" r=\"3\"\u002F>\u003Ccircle cx=\"6\" cy=\"12\" r=\"3\"\u002F>\u003Ccircle cx=\"18\" cy=\"19\" r=\"3\"\u002F>\u003Cpath d=\"m8.59 13.51l6.83 3.98m-.01-10.98l-6.82 3.98\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":39},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z\"\u002F>",1786455162246]