Código para Imagem
Converta todo o código do artigo em imagens e faça o download com um clique.
Why we love this skill
Essa funcionalidade converte código em imagens com belos destaques, simula uma interface de terminal e suporta downloads em alta definição, tornando-se uma ferramenta ideal para desenvolvedores compartilharem trechos de código.
Instruções
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://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.
Related Skills
View allMapa de informações no estilo do Código de Claude
Gere pôsteres infográficos em 4K de alta resolução com 'fundo gradiente bege aveia + detalhes em vermelho terracota + títulos serifados de alto contraste + layout em grade' em estilo minimalista acadêmico, perfeitos para síntese de conhecimento, esboços de tutoriais, guias técnicos e visualização de conteúdo de alta densidade.
Ilustrações narrativas de artesanato
Finalmente, até mesmo processos complexos podem ser compreendidos com clareza. Infográficos requintados exibem com perfeição os detalhes meticulosos, contando vividamente a história da marca.
Imagem de fundo no estilo YouMind
Gere uma imagem abstrata com o estilo da marca YouMind para usar como plano de fundo. Diretrizes de fonte: Use<Libre Baskerville> para títulos em inglês e<Source Sans> para títulos chineses.
Código para Imagem
Converta todo o código do artigo em imagens e faça o download com um clique.
Why we love this skill
Essa funcionalidade converte código em imagens com belos destaques, simula uma interface de terminal e suporta downloads em alta definição, tornando-se uma ferramenta ideal para desenvolvedores compartilharem trechos de código.
Instruções
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://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.
Related Skills
View allMapa de informações no estilo do Código de Claude
Gere pôsteres infográficos em 4K de alta resolução com 'fundo gradiente bege aveia + detalhes em vermelho terracota + títulos serifados de alto contraste + layout em grade' em estilo minimalista acadêmico, perfeitos para síntese de conhecimento, esboços de tutoriais, guias técnicos e visualização de conteúdo de alta densidade.
Ilustrações narrativas de artesanato
Finalmente, até mesmo processos complexos podem ser compreendidos com clareza. Infográficos requintados exibem com perfeição os detalhes meticulosos, contando vividamente a história da marca.
Imagem de fundo no estilo YouMind
Gere uma imagem abstrata com o estilo da marca YouMind para usar como plano de fundo. Diretrizes de fonte: Use<Libre Baskerville> para títulos em inglês e<Source Sans> para títulos chineses.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
