2d:null 2e:["$","title",null,{"children":"Escrevendo com Markdown | Guilherme Ranoya | Observable"}] 33:T44e,Websites e documentos online são apresentados no navegador através de uma linguagem de programação bastante simples e limitada, o *HTML*, classificada como uma linguagem de marcação, ou *script*, e não como uma linguagem de programação de fato, já que não possui nenhum tipo de operação sendo realizada através dele, e apenas algumas marcações sobre como o navegador deve tratar os conteúdos presentes. Mas apesar de simples, o *HTML* pode se tornar uma estrutura confusa para ser lida, e sobretudo, inconveniente para a escrita de textos de forma prática. Foi por isso que, em 2004, John Gruber criou a linguagem de marcação *Markdown*, utilizando como base o trabalho de Aaron Swartz. O intuito era prover uma forma prática para a escrita de textos e documentações, contemplando elementos como links, imagens, tabelas, e formatação de texto. Em termos operacionais, todo código *Markdown* acabará sendo convertido em *HTML*, fazendo com que a inclusão de *tags HTML* sejam geralmente possíveis na marcação, para complementar aquilo que o próprio *Markdown* não faz.34:T5c0,Praticamente todos os notebooks computacionais, incluindo o Observable e o Jupyter Notebook, utilizam *Markdown* para os registros textuais deixados no código. Mas não são apenas os notebooks que utilizam *Markdown*. O processador de texto do Google Docs compreende qualquer marcação realizada com *Markdown*, e aplica imediatamente a devida formatação para o elemento. Ferramentas de anotação e documentação como o Notion, o Obsidian ou o Gitbook utilizaram a linguagem de marcação em seus documentos. Programadores que utilizam contextos tradicionais de programação, com editores de código e IDEs, também costumam elaborar a documentação e as informações básicas dos seus programas neste formato. Repositórios de códigos armazenados em plataformas como o [Github](https://www.github.com) geralmente contam com um arquivo chamado README.md, onde as explicações e descrições do código são deixadas pelo programador utilizando *Markdown*, e a própria plataforma é capaz de exibi-las quando acessamos o repositório. Esta linguagem de marcação acabou se tornando uma *lingua franca* para a escrita textual em ambientes computacionais. Não será de se estranhar, que em alguns anos, artigos científicos sejam encaminhados em arquivos *Markdown* no lugar de `doc`, `docx` ou `pdf`. 35:[] 31:{"id":"01e01a7a45d8afa4","slug":"obs_escrevendocommarkdown","title":"Escrevendo com Markdown","thumbnail":"d08e2aa69b8b2fab3cdabc5035d7f46de36ada8003360f484f57068fd985fb37","access_level":"public","create_time":"$D2024-11-29T12:42:56.130Z","update_time":"$D2025-06-17T16:39:14.643Z","view_time":null,"first_public_time":"$D2024-11-29T12:42:56.130Z","has_unpublished_edits":null,"fork":{"id":"87fccdd55b7e79bd","slug":"obs_variasfontesdedados","title":"Usando dados de múltiplas fontes","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024"},"version":1527,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null}],"members":[{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"930a47a12763c432","slug":"aulas-de-observable","title":"Aulas de Observable","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"Escrevendo com Markdown","cells":[{"id":0,"value":"# Escrevendo com Markdown","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"### Usando um código de marcação simples para a escrita, formatação do texto, e inclusão de imagens através de notebooks computacionais\n\n------\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"## O que é o Markdown","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1071,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1308,"value":"\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1310,"value":"## Onde o Markdown é utilizado?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1312,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1315,"value":"\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1317,"value":"## Como escrever com Markdown?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1319,"value":"Através do Notepad do Windows, ou do Text Editor do MacOS, basta escrever o texto/código e gravá-lo com a terminação `md` no lugar de `txt`. Este documento precisará ser aberto por alguma ferramenta capaz de interpretar arquivos *Markdown*. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1326,"value":"No Observable, o próprio documento já se inicia com o *Markdown*. A primeira célula, de título, já inicia com a marcação `#`, que indica que a frase subsequente será o título do documento, e deverá aparecer com o maior peso dentre todos os elementos hierárquicos presentes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1329,"value":"Para criar uma nova célula com código *Markdown*, você poderá clicar no ícone abaixo ou acima da última célula existente, e utilizar a opção *Markdown* do menu, identificada através do ícone .","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1334,"value":"A partir daí, você pode escrever apenas um elemento ou um parágrafo por célula, ou poderá colocar diversos elementos em sequência em uma mesma célula. A maneira como irá estruturar seu texto é indiferente para o Observable. Elementos quebrados em células separadas serão mais fáceis de serem modificados ou ajustados; elementos colocados juntos em uma única célula serão mais fáceis de serem copiados ou movidos ao longo do documento.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1336,"value":"\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1338,"value":"## Elementos do Markdown","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1340,"value":"
\n### Headings (organização hierárquica do documento)\n\nO primeiro elemento com que temos contato imediato são os *headings* (hierarquias da informação), iniciando o próprio documento do Observable com o mais alto deles, o `#`, que é equivalente ao `

` do HTML, compreendido normalmente como o título do documento.\n\nPara inclusão de uma hierarquia menor, por exemplo um subtítulo, utilizamos os caracteres `##`, que seriam equivalente ao `

` do HTML. Seu peso gráfico será menor que o elemento `#`. Da mesma forma, um terceiro nível pode ser incluído com `###`, equivalente ao `

` do HTML, e esta lógica segue até o `######`, ou `

`.\n\nO trecho escrito em *Markdown* abaixo:\n\n```md\n\n# Titulo\n\nParágrafos\n\n## Subtítulo\n\nOutros parágrafos\n\n#### Apêndice\n\nInformações complementares\n```\n\nSerá apresentado como:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1346,"value":"# Titulo\n\nParágrafos\n\n## Subtítulo\n\nOutros parágrafos\n\n#### Apêndice\n\nInformações complementares","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1373,"value":"
\n### Formatação de texto","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1352,"value":"Os próximos elementos básicos do *Markdown* são de formatação dos textos nos parágrafos e dentro de outros elementos. Para o texto oblíquo (itálico), utilizamos o trecho dentro de um asterisco (`*`). Para trechos em negrito (bold), utilizamos dois asteriscos `**`, e para negrito e oblíquo, três (`***`). Estes elementos são equivalentes, respectivamente, à *tags HTML* `/`, `/` e sua combinação `` e quaisquer variantes. \n\n```md\n*Trecho escrito em oblíquo*, seguido do **Trecho escrito em negrito**, seguido do ***Trecho em negrito e oblíquo***.\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1354,"value":"*Trecho escrito em oblíquo*, seguido do **Trecho escrito em negrito**, seguido do ***Trecho em negrito e oblíquo***.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1389,"value":"
\n### Escape da maração","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1363,"value":"Quando desejar escrever literalmente um asterisco, como esse \\*, você utilizará `\\*`, do contrário o interpretador entenderá se tratar de uma marcação de formatação. A mesma coisa vale para quando desejamos incluir um \\# no texto, sem confundi-lo com uma marcação. Para isso utilize `\\#` na escrita.\n\nO caractere \\\\ é chamado de escape. Ele serve para impedir que o interpretador considere algum caractere imediatamente posterior como uma forma de marcação para mudança no conteúdo. Se você desejar escrever o caractere \\\\ no texto, sem que ele seja considerado um escape, utilize `\\\\`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1375,"value":"
\n### Links e imagens\n\nLinks são incluídos nas palavras, frases ou imagens através das chaves (`[ ]`), seguidas de uma *url* entre parenteses.\n\n```md\nWebsite do prof. [Guilherme Ranoya](https://www.ranoya.com).\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1428,"value":"Website do prof. [Guilherme Ranoya](https://www.ranoya.com).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1437,"value":"Para inclusão de imagens, basta adicionar uma exclamação `!` antes da notação de link, com a `url` apontando para a imagem:\n\n```md\n![Wolfram Mathematica](https://omnifolio.vercel.app/omnifiles/win_mathematica21.png)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1439,"value":"![Wolfram Mathematica](https://omnifolio.vercel.app/omnifiles/win_mathematica21.png)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1379,"value":"
\n### Blocos e citações (quotes)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1396,"value":"Blocos podem ser usados para citações, ou para informações que necessitam alguma atenção especial. Eles ficam destacados e deslocados ao longo do texto. Os blocos são criados em *Markdown* iniciando cada frase com o caractere `>`. Eles são equivalentes à `tag ` do código *HTML*:\n\n```md\nEste é um parágrafo\n\n> Estes são textos incluídos em um bloco\n> O bloco fica indentado em relação ao parágrafo\n\nEste é outro parágrafo\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1398,"value":"Este é um parágrafo\n\n> Estes são textos incluídos em um bloco\n> O bloco fica indentado em relação ao parágrafo\n\nEste é outro parágrafo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1391,"value":"
\n### Códigos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1400,"value":"Existe uma forma de marcação específica para a inclusão de instruções de programação/código computacional. Importante ressaltar que, em uma plataforma de programação letrada como o [Jupyter Notebook](https://jupyter.org) ou o [Observable](https://observablehq.com), estes códigos funcionarão apenas como documentação, e não serão executados.\n\nHá duas formas de inclusão de código, uma ao longo do texto do parágrafo, utilizando as aspas tortas (\\`), e outra na forma de um bloco de múltiplas linhas, que se inicia com três aspas tortas e a identificação da linguagem de programação (\\`\\`\\`javascript), e finaliza com três aspas tortas (sem a informação da linguagem utilizada):\n\n
\n\nEsta é uma instrução no meio do parágrafo: `let x=10;`.\n\nEste é um bloco com documentação de programação:\n\n```javascript\nlet x = 10;\nconsole.log(x);\n```\n\n
\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1425,"value":"Esta é uma instrução no meio do parágrafo: `let x=10;`.\n\nEste é um bloco com documentação de programação:\n\n```javascript\nlet x = 10;\nconsole.log(x);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1381,"value":"
\n### Tabelas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1461,"value":"Tabelas são literalmente desenhadas no *Markdown*, utilizando os caracteres `|` e `-`. Você pode incluir cabeçalhos, ou não, e quantas colunas e linhas quiser.\n\nPara desenhar uma tabela sem cabeçalhos, faça assim:\n\n```mad\n\n| | | |\n|---------|---------|------------|\n| João | 15412 | 10.0 |\n| Ricardo | 15444 | 9.5 |\n| Maria | 15322 | 10.0 |\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1463,"value":"\n| | | |\n|---------|---------|------------|\n| João | 15412 | 10.0 |\n| Ricardo | 15444 | 9.5 |\n| Maria | 15322 | 10.0 |\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1470,"value":"Se preferir que nomes nas colunas (cabeçalhos) apareçam, basta incluí-los na primeira linha:\n\n```md\n\n| nome | matrícula | nota |\n|---------|---------|------------|\n| João | 15412 | 10.0 |\n| Ricardo | 15444 | 9.5 |\n| Maria | 15322 | 10.0 |\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1472,"value":"| nome | matrícula | nota |\n|---------|---------|------------|\n| João | 15412 | 10.0 |\n| Ricardo | 15444 | 9.5 |\n| Maria | 15322 | 10.0 |","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1474,"value":"Não há qualquer necessidade de que o desenho das colunas casem e fiquem nos lugares \"certos\" graficamente.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1385,"value":"
\n### Listas\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1459,"value":"As listas podem ser ordenadas (com números indicando a ordem), ou não-ordenadas, sem que haja uma sequência obrigatória. Listas ordenadas são indicadas com o número seguido de um ponto: `1.`, `2.`, `3.` etc.; listas não ordenadas de um traço: `-`.\n\n```md\n\nListas ordenadas:\n\n1. Primeiro item\n2. Segundo item\n3. 1. Primeiro sub-item ordenado\n 2. Segundo sub-item ordenado\n4. etc..\n\nListas não ordenadas:\n\n- Item sem ordem\n- Outro item sem ordem\n- - Mais um nível na lista\n- - Outro item na lista\n- Mais outro...\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1455,"value":"Listas ordenadas:\n\n1. Primeiro item\n2. Segundo item\n3. 1. Primeiro sub-item ordenado\n 2. Segundo sub-item ordenado\n4. etc..\n\nListas não ordenadas:\n\n- Item sem ordem\n- Outro item sem ordem\n- - Mais um nível na lista\n- - Outro item na lista\n- Mais outro...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1524,"value":"
\n### Notas de rodapé\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1526,"value":"As notas de rodapé¹ podem ser importantes, principalmente em textos científicos. A sintaxe markdown possui uma especificação para isso, mas ela não costuma estar implementada nas ferramentas geradoras do texto a partir do markdown.\n\nA especificação para nota de rodapé é [^n] (onde n é o número da nota). Mas isto dificilmente funcionará na maior parte dos contextos. Para garantir que as notas funcionem, é melhor inserir o equivalente HTML de texto superposto: `^{n<\\sup>`.\n\n☞ *A plataforma Booklines, que pode ser usada para publicar textos diretamente do Observable, aceita a sintaxe [^n] para notas de rodapé, mesmo que o próprio Observable não aceite em sua interpretação do código markdown.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1479,"value":"\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1481,"value":"## Usos específicos do Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1483,"value":"Na plataforma Observable podemos substituir valores no texto com o conteúdo de variáveis. Utilizamos a marcação `\\${variavel}` para isso.\n\nAbaixo incluiremos um campo de entrada do tipo *Range*, utilizando a variável `numero` para receber o seu valor:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1486,"value":"viewof numero = Inputs.range([0, 100], { label: \"numero\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1489,"value":"Este mesmo valor será reproduzido abaixo no código *Markdown*, formatado em negrito, utilizando a seguinte instrução:\n\n```md\nO valor da variável é **\\${numero}**.\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1491,"value":"O valor da variável é **${numero}**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1494,"value":"Também é possível construir todo um código *Markdown* com programação *Javascript*, e posteriormente inseri-lo em uma célula *Markdown* através de uma variável.\n\nO código *Javascript* abaixo associa à variável `texto` todo um código *Markdown*, incluindo o valor de `numero`:\n\n```javascript\n\ntexto = `\n## Subtítulo\n\nO valor do número escolhido é **` + numero + `**.\n\n`\n```\n\nPara inclui-lo na célula *Markdown*, utilizamos `\\${texto}`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1500,"value":"$${texto}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1497,"value":"texto = `\n## Subtítulo\n\nO valor do número escolhido é **` +\n numero +\n `**.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}}
32:"$31:body"}

` do *HTML*, compreendido normalmente como o título do documento.\n\nPara inclusão de uma hierarquia menor, por exemplo um subtítulo, utilizamos os caracteres `##`, que seriam equivalente ao `

` do *HTML*. Seu peso gráfico será menor que o elemento `#`. Da mesma forma, um terceiro nível pode ser incluído com `###`, equivalente ao `

` do *HTML*, e esta lógica segue até o `######`, ou `

` do HTML, compreendido normalmente como o título do documento.\n\nPara inclusão de uma hierarquia menor, por exemplo um subtítulo, utilizamos os caracteres `##`, que seriam equivalente ao `

` do HTML. Seu peso gráfico será menor que o elemento `#`. Da mesma forma, um terceiro nível pode ser incluído com `###`, equivalente ao `

` do HTML, e esta lógica segue até o `######`, ou `