Pular para o conteúdo
EstuDocs

Códigos Exemplo

Código com linhas numeradas

Obs: Para funcionar a linha numerada, necessário instalar um plugin do expressive code, de acordo com documentação do site.

Por padrão, ao instalar o plugin, todos os códigos mostrarão as linhas. Para desabilitar, seguir conforme abaixo

function greet() {
  console.log("Hello, World!");
}

Código markdown com título e destaque de linhas do código

Você pode destacar linhas ou partes específicas do seu bloco de código utilizando marcadores de texto do Expressive Code na linha de abertura do seu bloco de código. Use chaves ({ }) para destacar linhas inteiras, e aspas para destacar segmentos do texto.

Existem três estilos de destaque: neutro para chamar a atenção para o código, verde para indicar código adicionado, e vermelho para indicar código deletado. Tanto texto quanto linhas inteiras podem ser marcados com o marcador padrão, ou combinados com ins= e del= para produzir o destaque desejado.

export async function fetchQuote() {
  // fetch json data from file
  const res = await fetch('../../data/quotes.json');
  const quotes: { author: string; id: number; quote: string }[] =
    await res.json();
  // pick a random quote
  const quote = quotes[Math.floor(Math.random() * quotes.length)];


  return quote;
}
src/App.tsx
function App() {
  const [quote, setQuote] = useState({ quote: '', author: '', id: '' });
  const [bgColor, setBgColor] = useState('#666');


  async function handleClick() {
    const quote = await fetchQuote();
    const color = await fetchRandomColor();
    setQuote(quote);
    setBgColor(color.hex);
  }


  async function handleChangeColorClick() {
    const color = await fetchRandomColor();
    setBgColor(color.hex);
  }


  return (
    <main className="w-full min-h-screen " style={{ backgroundColor: bgColor }}>
      <section className="container px-10 py-20 mx-auto text-center">
        <HeaderCard
          bgColor={bgColor}
          handleClick={handleClick}
          handleChangeColorClick={handleChangeColorClick}
        />
        {quote && <QuoteCard quote={quote} />}
      </section>{' '}
    </main>
  );
}


export default App;

Código para terminal

Terminal window
npm install typescript @types/react @types/react-dom

Código para terminal com título

Erro typescript
Binding element 'quote' implicitly has an 'any' type.ts(7031)

Alerta na página com título personalizado

Starlight providencia uma sintaxe Markdown customizada para renderizar asides. Blocos Aside são indicados utilizando um par de dois pontos triplo ::: para envolver o seu conteúdo, e podem ser do tipo note, tip, caution ou danger.

Tabs

Sirius, Vega, Betelgeuse