25:["$","title",null,{"children":"Introduction to Markdown | Yu Wang | Observable"}] 49:[{"id":"1126b41706eb9341c80a36ce49c7dd563b993bb9e3f27d2af147ed2daef1cdd147bfff240c07555dcbb58f52de292117f291ba31fdece47ae541a2e8c2433424","href":"https://static.observableusercontent.com/files/1126b41706eb9341c80a36ce49c7dd563b993bb9e3f27d2af147ed2daef1cdd147bfff240c07555dcbb58f52de292117f291ba31fdece47ae541a2e8c2433424","name":"newMarkdownCell.gif","type":"image/gif","lastModified":1677879257052.763,"size":342885},{"id":"e15090064345a1ef42cd66c3044321887371fe8790410dbd86d9808f006f4d0e1d301fc7c20ec2114795a1773e127737c47395b6af26657ddece4fef82bac0e9","href":"https://static.observableusercontent.com/files/e15090064345a1ef42cd66c3044321887371fe8790410dbd86d9808f006f4d0e1d301fc7c20ec2114795a1773e127737c47395b6af26657ddece4fef82bac0e9","name":"grayLogo.png","type":"image/png","lastModified":1677879257052.763,"size":14396},{"id":"2d0ce2124053667d4024b4ebcc5c33cfc1fe6225f1ab7312d5f3a7d9906f84bb2de5d10d05037a0cd78e3332779245073e58290a0501f9d4c4590350bacba58a","href":"https://static.observableusercontent.com/files/2d0ce2124053667d4024b4ebcc5c33cfc1fe6225f1ab7312d5f3a7d9906f84bb2de5d10d05037a0cd78e3332779245073e58290a0501f9d4c4590350bacba58a","name":"Copy Link.gif","type":"image/gif","lastModified":1677879257052.763,"size":1590654}] 29:{"id":"8796dcfa711fbbc2","slug":null,"title":"Introduction to Markdown","thumbnail":"ba30127621a199731101751e320284890e280fad7ecb1b64114cd441e0b50745","access_level":"public","create_time":"$D2023-03-03T21:34:17.052Z","update_time":"$D2023-03-03T21:34:17.052Z","view_time":null,"first_public_time":"$D2023-03-03T21:34:17.052Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c735a74a06fe46f8","login":"yuwang","name":"Yu Wang","avatar_url":"https://avatars-next.observableusercontent.com/65bf9b9dfeacc117351e386728523834c1c0beb4bf838d82678844a0aea65ecb","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":617,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"88283d69e9fc2fe9","login":"yuwang","name":"Yu Wang","avatar_url":"https://avatars-next.observableusercontent.com/65bf9b9dfeacc117351e386728523834c1c0beb4bf838d82678844a0aea65ecb","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"88283d69e9fc2fe9","login":"yuwang","name":"Yu Wang","avatar_url":"https://avatars-next.observableusercontent.com/65bf9b9dfeacc117351e386728523834c1c0beb4bf838d82678844a0aea65ecb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to Markdown","cells":[{"id":0,"value":"# Introduction to Markdown\n\nObservable notebooks are great for telling compelling stories with data, but to do that well you need more than beautiful visualizations! You'll also want text, lists, and other text elements to help add context, explanations, and structure. This short guide gives you an introduction into the basics of formatting Markdown text in Observable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"## Creating a Markdown cell\nTo create a new Markdown cell, click the plus sign (+) that appears to the right of the editor. You'll see the add cell menu appear. Use the mouse or arrow keys to select **Markdown**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":605,"value":"

\n FileAttachment(\"newMarkdownCell.gif\").url())}\n />\n

Creating a new Markdown cell

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"There are many other options available when you are [adding cells](https://observablehq.com/@observablehq/adding-cells?collection=@observablehq/notebook-fundamentals), but in this guide we'll focus on some common formatting options in Markdown mode.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"## Basic formatting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"Basic text formatting includes *italics*, **bold**, and ~~strikethrough~~. \n\nYou can also *put one **inside** the other!*\n\nParagraphs are separated by blank lines.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"---\n👆 *Tip: Three dashes make a horizontal divider!*","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"---\n## Lists\n\n### Unordered","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"- Item 1\n - Sub-item 1\n - Sub-sub-item 1\n - Sub-sub-item 2\n- Item 2\n- Item 3","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"### Ordered","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"1. Item 1\n 1. Sub-item 1\n 1. Sub-sub-item 1\n 2. Sub-sub-item 2\n2. Item 2\n3. Item 3","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"## Headings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"# Heading 1","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"## Heading 2","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"### Heading 3","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"#### Heading 4","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"##### Heading 5","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"---\n## Block quotes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"> “Above all else show the data.” \n>\n> — Edward Tufte","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"## Links","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"URLs will automatically turn into links: https://observablehq.com/\n\nBut you can also [add a link to text.](https://observablehq.com/)","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"---\n## Images","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"### Images in Markdown\nYou can add a markdown image using similar syntax to a link (though prepended with a `!`). Remember to use the `await` keyword to allow the file attachment to load!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"![Add alt-text here](${await FileAttachment('grayLogo.png').url()})","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"### Images with HTML\n\nAlternatively, you can use an `` tag (and associated style options like `width`) in an [HTML cell](https://observablehq.com/@observablehq/cell-modes). Remember to use the `await` keyword to allow the image to load!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"### Images with JavaScript\nYou can also display the image by accessing the FileAttachment object with JavaScript. Note that you don't need the `await` keyword when this code is the only thing in the cell, because cells automatically `await` their contents.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"// Uncomment to show the image! These images always display full-width.\n\n// FileAttachment(\"grayLogo.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"---\n## Displaying code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"**Inline code:** `x = 10`\n\n**Basic code block:**\n```\nlet x = 10;\nlet y = x * 2;\n```\n\n**Code block with syntax highlighting:**\n```javascript\nlet x = 10;\nlet y = x * 2;\n```","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"---\n## Adding dynamic values","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"You can add an inline variable or JavaScript expression like this:\n\nMy favorite number is ${favNumber}, and `2 × ${favNumber}` is equal to **${favNumber * 2}!**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"viewof favNumber = Inputs.range([0, 100], {label: \"Favorite number\", value: 29, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"---\n## Formulas\nObservable supports TeX for formatting math.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"You can write formulas inline: ${tex`a^2 + b^2 = c^2`}","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"And you can write formula blocks with the TeX cell mode:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"x = {{-b \\pm \\sqrt{b^2 - 4ac}} \\over 2a}","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"---\n## Tables\n\n### A basic table","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"Column 1 | Column 2 | Column 3\n-------- | -------- | --------\nCell 1-1 | Cell 2-1 | Cell 3-1\nCell 1-2 | Cell 2-2 | Cell 3-2","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"### Table with text alignment options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"Column 1 | Column 2 | Column 3\n :-- | :-: | --: \nCell 1-1 | Cell 2-1 | Cell 3-1\nCell 1-2 | Cell 2-2 | Cell 3-2","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"### Table as explanatory text","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"|Note: Tables aren't just for tables|\n| --- |--- | --- |\n|For example, by having a header and one cell we can write a side note with a title and some explanatory text.|","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"---\n## Anchor links & cell names\nYou can link directly to a section of the notebook with an auto-generated anchor link using the \"Copy Link\" action in the cell menu. This will copy a special URL to the clipboard like:\n\n`https://observablehq.com/@observablehq/markdown-quick-reference#cell-147`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"

\n \n

Copying a link to a cell from the cell menu