25:["$","title",null,{"children":"Learning Observable: Cell modes, reactive Markdown, and HTML | Christian Miranda | Observable"}] 49: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.4a:[{"id":"1487e4c50acc5518138803f9c28cbcfa333cc4b32ce1ce7d88450ec739255a5e9c26ea80d29360954c5c4dfcff56c42e7283e620ec16b3a5c45c0eff8bea976a","href":"https://static.observableusercontent.com/files/1487e4c50acc5518138803f9c28cbcfa333cc4b32ce1ce7d88450ec739255a5e9c26ea80d29360954c5c4dfcff56c42e7283e620ec16b3a5c45c0eff8bea976a","name":"new-users-course-cell-modes@1.png","type":"image/png","lastModified":1687977717954.715,"size":2435005},{"id":"aac294d70f13024dc8baab5ebea8450db6bfb2055c1c7a742fa8a5b8141d6b6847c8e8990bfb3071b8531c075624c52b16e893f715dc962cd547cd16e8e5fc79","href":"https://static.observableusercontent.com/files/aac294d70f13024dc8baab5ebea8450db6bfb2055c1c7a742fa8a5b8141d6b6847c8e8990bfb3071b8531c075624c52b16e893f715dc962cd547cd16e8e5fc79","name":"changeMode.mov","type":"video/quicktime","lastModified":1687977717954.715,"size":2055283},{"id":"31e0836ebdfa1f55dd9d3f764d62f485358d39cd4061e4b73dfa5d856530fd57c2c5f6f3764966fac53b4e27615b6a1e98ce2aef4b8c8a59b1debbf99b9789af","href":"https://static.observableusercontent.com/files/31e0836ebdfa1f55dd9d3f764d62f485358d39cd4061e4b73dfa5d856530fd57c2c5f6f3764966fac53b4e27615b6a1e98ce2aef4b8c8a59b1debbf99b9789af","name":"new-users-course-sm-cell-modes@1.png","type":"image/png","lastModified":1687977717954.715,"size":201700}] 29:{"id":"ff0802a891da186f","slug":null,"title":"Learning Observable: Cell modes, reactive Markdown, and HTML","thumbnail":"fdf652d8c740f316726943c0140383c715a6cd8ac44b948490bc6056a2324d8c","access_level":"public","create_time":"$D2023-06-28T18:41:57.954Z","update_time":"$D2023-07-10T20:50:23.558Z","view_time":null,"first_public_time":"$D2023-06-28T18:41:57.954Z","has_unpublished_edits":null,"fork":{"id":"5b609d7479877bde","slug":"learning-observable-cell-modes-reactive-markdown-and-html","title":"Learning Observable: Cell modes, reactive Markdown, and HTML","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b073b8ee488ecb63","login":"c-miranda","name":"Christian Miranda","avatar_url":"https://avatars-next.observableusercontent.com/4619d1aba2dedd112f55ddac191761e0aeabfdb38ddd23aae4162ebfded5c721","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":287,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1b2df6d767d150a9","login":"c-miranda","name":"Christian Miranda","avatar_url":"https://avatars-next.observableusercontent.com/4619d1aba2dedd112f55ddac191761e0aeabfdb38ddd23aae4162ebfded5c721","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"1b2df6d767d150a9","login":"c-miranda","name":"Christian Miranda","avatar_url":"https://avatars-next.observableusercontent.com/4619d1aba2dedd112f55ddac191761e0aeabfdb38ddd23aae4162ebfded5c721","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":213,"value":"

appendix

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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":227,"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.