search

yudi-azvd / blog

Nesse humilde blog vou postar as coisas interessantes que eu aprendi ou fiz em engenharia de software, desenvolvimento de jogos, automação com programação e, quem sabe, na vida também.
https://yudi-azvd.github.io/blog
0 stars 0 forks source link

Como estilizar blocos de códigos dentro markdown? #3

Closed yudi-azvd closed 2 years ago

yudi-azvd commented 2 years ago

Markdown Syntax Highlighting with PrismJS using Unified, Remark, and Rehype

yudi-azvd commented 2 years ago

Na verdade nem usei o link acima. Esse aqui ajudou mais.

O que ficou no final foi isso:

const processedContent = await remark()
  .use(remarkGfm)
  .use(remarkRehype)
  // .use(rehypeSanitize, { ........
  .use(rehypeHighlight, { subset: false })
  .use(rehypeStringify)
  .process(post.content)

Houve alguns problemas com o rehype-sanitize, mas foram resolvidos com as opções (omitidas no trecho acima).

Além disso, ainda tive que adicionar link para estilos em /home/src/pages/blog/posts/[id].tsx:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/github-dark.min.css"></link>

Depois disso, os blocos de código ficaram coloridos bonitinhos.