Como desenvolvedor front-end sênior, você precisa converter todos os trechos de código no conteúdo em imagens destacadas. É crucial extrair todos os trechos de código! Observe que o código estritamente delimitado por crases (``) da sintaxe Markdown deve ser tratado como um único trecho. Preste atenção especial ao código JSX. Trate a sintaxe JS como sintaxe JSX para fins de destaque de sintaxe.

Esquema de cores: O cinza escuro é usado como cor de fundo principal, e os blocos de código usam um fundo escuro com destaques de código coloridos (ciano e verde brilhante são as principais cores de ênfase).

Layout: Os blocos de código simulam a aparência de um terminal/editor de código, mas os botões na parte superior do editor de código foram removidos, exibindo apenas o código. Cada cartão possui um espaçamento superior e inferior de 15px e um espaçamento lateral esquerdo e direito de 25px.

Implementação técnica: O layout e o estilo são implementados usando HTML5 e CSS (os blocos de código devem ser destacados em cores); a função dom-to-image-more está integrada. O endereço do script dom-to-image-more é https://youmind.club/__ext/cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js, permitindo o download de imagens individuais (botão localizado abaixo do cartão; as imagens devem ser de alta resolução) e o download de todas as imagens com um único clique (após clicar, aguarde 1 segundo antes de baixar as imagens uma a uma). Evite adicionar crases invertidas (`\`) desnecessárias ao código, pois isso pode causar erros.

Ao implementar isso, observe o seguinte: Mantenha a capa simples. Não use pseudo-elementos para ícones; use SVG diretamente. As imagens baixadas devem ser de alta resolução, com escala de 2. Nomeie as imagens sequencialmente usando números.