20:null 21:["$","title",null,{"children":"Learning Observable: Cell modes, reactive Markdown, and HTML | Observable | Observable"}] 26:T467,For example, to create emphasis using italics, use a single pair of asterisks or underscores around the text you want to emphasize: `_hello_` or `*hello*` turns into _hello_. For a bit more oomph, use two asterisks or underscores to create bold text: `**important**` turns into **important**. You can create hyperlinks with this pattern: `[Observable](https://observablehq.com)`, which turns into a link pointing to [Observable](https://observablehq.com). This might look complicated, but there are two shortcuts for this: - Select the text you want to use for the link and clicking Cmd-K/Ctrl-K to insert the link code. Then you can paste the URL and get the link. - Or simply select your link text and paste a URL. Observable will insert the correct Markdown code for you. There's more markup, for example to create lists, which are simply lines starting with dashes or asterisks, like so:

- hello
- world

turns into: - hello - world Formatted text is incredibly important in notebooks because it allows you to add reader-friendly context, interpretation and explanation, links to other materials, and more.27:[{"id":"1487e4c50acc5518138803f9c28cbcfa333cc4b32ce1ce7d88450ec739255a5e9c26ea80d29360954c5c4dfcff56c42e7283e620ec16b3a5c45c0eff8bea976a","href":"https://static.observableusercontent.com/files/1487e4c50acc5518138803f9c28cbcfa333cc4b32ce1ce7d88450ec739255a5e9c26ea80d29360954c5c4dfcff56c42e7283e620ec16b3a5c45c0eff8bea976a","name":"new-users-course-cell-modes@1.png","type":"image/png","lastModified":1671038114736.321,"size":2435005},{"id":"aac294d70f13024dc8baab5ebea8450db6bfb2055c1c7a742fa8a5b8141d6b6847c8e8990bfb3071b8531c075624c52b16e893f715dc962cd547cd16e8e5fc79","href":"https://static.observableusercontent.com/files/aac294d70f13024dc8baab5ebea8450db6bfb2055c1c7a742fa8a5b8141d6b6847c8e8990bfb3071b8531c075624c52b16e893f715dc962cd547cd16e8e5fc79","name":"changeMode.mov","type":"video/quicktime","lastModified":1671154273670.706,"size":2055283},{"id":"31e0836ebdfa1f55dd9d3f764d62f485358d39cd4061e4b73dfa5d856530fd57c2c5f6f3764966fac53b4e27615b6a1e98ce2aef4b8c8a59b1debbf99b9789af","href":"https://static.observableusercontent.com/files/31e0836ebdfa1f55dd9d3f764d62f485358d39cd4061e4b73dfa5d856530fd57c2c5f6f3764966fac53b4e27615b6a1e98ce2aef4b8c8a59b1debbf99b9789af","name":"new-users-course-sm-cell-modes@1.png","type":"image/png","lastModified":1671157932338.644,"size":201700}] 24:{"id":"5b609d7479877bde","slug":"learning-observable-cell-modes-reactive-markdown-and-html","title":"Learning Observable: Cell modes, reactive Markdown, and HTML","thumbnail":"662b4900dfeaf36ea1f7e5f85760ecee26db503ac2f3cd2988c6d05c57f7a2d1","access_level":"public","create_time":"$D2022-09-20T20:42:37.240Z","update_time":"$D2023-10-02T17:15:41.140Z","view_time":null,"first_public_time":"$D2023-01-17T23:39:34.701Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":271,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce771552211c04ab","login":"rkosara","name":"Robert Kosara","avatar_url":"https://avatars-next.observableusercontent.com/105903f7d3ac285a1489b547eecce8f57bd15052862a307c4c2242f847d44a67","tier":null},{"type":"individual","id":"b71e24965feea6d8","login":"allisonhorst","name":"Allison Horst","avatar_url":"https://avatars-next.observableusercontent.com/323c217177f0f20e4e8ed3aa302fec1408cf22b57cbd726e37e76182d5f82a65","tier":null},{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null}],"members":[{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":15,"collection":{"id":"006ed01fc601e47e","slug":"intro-to-observable","title":"Learning Observable","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Learning Observable: Cell modes, reactive Markdown, and HTML","cells":[{"id":0,"value":"# Learning Observable: Cell modes, reactive Markdown, and HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":213,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"Every cell in a notebook has a _mode_. This one contains text, and its type is _Markdown_. Another way to write text, create charts, or customize layouts is to use _HTML_. Any type of code, including calculations, lives in _JavaScript_ cells.\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"## Markdown cells\n\n[_Markdown_](https://observablehq.com/@observablehq/markdown-quick-reference) is what is called a markup language (hence the name, which is a pun). Markdown is nice because it can mostly be ignored if you're just writing plain text. But, if you want to _style the **text**_, insert [hyperlinks](https://observablehq.com/explore), or add formatting (e.g. bulleted lists), the syntax is straightforward and intuitive.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"$26","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"## HTML cells\n\nThe other way to write text is HTML, or the _HyperText Markup Language_. Every website is either written in HTML, or (more likely these days) generates HTML for your browser to render as the page you see. Even Markdown has to be translated to HTML for your browser to understand it, but Observable handles that for you.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"

An HTML cell is also just text to begin with, but you can use HTML tags to style your text, and you can use it to create all sorts of things, like charts. For pure text, it is a bit more unwieldy, because you have to use tags like <b></b> for bold text, <em></em> for italics, etc.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"## JavaScript cells\n\nThe primary cell mode used in Observable is the _JavaScript_ cell. JavaScript cells are employed for many useful inputs and charts you can insert using the new cell menu, and any code you write yourself of course.\n\nHere's an example of two JavaScript cells that create a line chart and a slider that allows you to change the amount of smoothing that is applied to the data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"viewof smoothing = Inputs.range([1, 21], {label: \"Smoothing\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"Plot.plot({\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(aapl, Plot.windowY({x: \"Date\", y: \"Close\", k: smoothing, reduce: \"mean\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"## Variables and interpolation in Markdown and HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"Both Markdown and HTML cells can include variables and arbitrary code using _interpolation_. The syntax for this is the same in both cases, `\\${cellname}` includes the value of a named cell or variable. You can also call a function, `\\${function()}` or use more complex code (though for the sake of readability, it's probably best to put the code into another cell and reference it from the text).\n\nThe following example uses interpolation in a Markdown cell to turn a model calculation into a simple sentence. Note how it contains function calls to a `formatMoney()` function and an inline calculation to compute the total cost of the mortgage (this is a very simplified model of course).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"viewof amount = Inputs.range([100000, 1500000], {label: \"Mortgage amount\", step: 100000})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"viewof interest = Inputs.range([2, 8], {label: \"Interest rate (%)\", step: .1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"viewof duration = Inputs.range([10, 30], {label: \"Duration\", step: 5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"A mortgage for a house purchased for **${formatMoney(amount)}** at an interest rate of **${interest}%** over **${duration} years** costs a total of **${formatMoney(amount * (1+interest/100) ** duration)}**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"

We can also use variables within HTML tags, however, for example to change this text to be styled differently and have different colors. You can change it with the controls below!

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"viewof color = Inputs.select([\"black\", \"green\", \"blue\", \"red\", \"purple\", \"orange\"], {label: \"Text color\", value: \"purple\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"viewof weight = Inputs.radio([\"normal\", \"bold\"], {label: \"Font weight\", value: \"bold\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"viewof italics = Inputs.radio([\"normal\", \"italic\"], {label: \"Italics\", value: \"italic\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"## Changing cell modes\n\nThe mode of a cell can be changed at any time by clicking the menu on the left of the editing window and selecting the new mode. This is handy if you picked the wrong one by mistake or decide that you wanted to write more text instead of code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"## Backticks for cell modes","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"

Javascript cells can also contain Markdown and HTML content. In fact, this is how Observable's cell modes used to work. You might still see notebooks where a cell begins with a cryptic-looking md`` or html``. This lets you include Markdown or HTML inside of a JavaScript cell, which can still be useful, but it is much easier now to just change the cell mode using the menu on the left side of the cell.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"## Next Steps\n\nNow that you're familiar with cell types on Observable, learn about its [reactive data flow model](https://observablehq.com/@observablehq/learning-observable-reactive-dataflow?collection=@observablehq/intro-to-observable).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"newUsersCourseSmCellModes1 = FileAttachment(\"new-users-course-sm-cell-modes@1.png\").image({width: 200})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"----\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"import {formatMoney} from \"@observablehq/excel-simple-modeling\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W27","stdlib":"1","titling":"auto"}} 25:"$24:body"