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 allMagic Scroll Pro – Visualize a magia em tudo (Produzido pelo Ministério da Magia)
🪄 Transforme a linguagem do mundo trouxa em pergaminhos do mundo mágico. Insira qualquer conteúdo → Escolha entre 4 estilos visuais dignos de Hogwarts (Grimório das Trevas/Grimório da Aurora/Mapa do Maroto/Cartas de Hogwarts) → Confirme a estrutura do texto antes de gerar → Gere um infográfico visual com estética mágica sofisticada. Design interativo em duas etapas, geração de imagem em uma única etapa, taxa de rejeição extremamente baixa. "Juro solenemente que não pretendo fazer nada de bom."
Caneta Mágica Pena Pro (Produzida pelo Ministério da Magia)
Transforme qualquer documento em slides ou pôsteres editáveis no estilo do mundo mágico de Harry Potter com um único clique. Seis estilos visuais mágicos (Professor Diário/Anúncio de Hogwarts/Documentos do Ministério da Magia/Cartaz de Procurado por Artes das Trevas/O Pasquim/As Travessuras dos Weasley) × Dois modos de saída (pôster com uma única imagem + slides editáveis com várias páginas). Reconhecimento inteligente do tipo de entrada, aprimoramento direto de documentos PPT/PDF e extração automática de texto. O conteúdo permanece 100% inalterado em relação ao original; cada slide pode ser editado e regenerado individualmente.
Designer de recursos visuais para quadrinhos/curtas-metragens com IA
O sistema extrai personagens, cenários e objetos de cena de roteiros ou ideias criativas, gerando instruções bilíngues (chinês e inglês) compatíveis com as principais ferramentas de geração de imagens por IA. Ele suporta a geração sob demanda de cinco módulos e oferece pré-visualizações de imagem opcionais.
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 allMagic Scroll Pro – Visualize a magia em tudo (Produzido pelo Ministério da Magia)
🪄 Transforme a linguagem do mundo trouxa em pergaminhos do mundo mágico. Insira qualquer conteúdo → Escolha entre 4 estilos visuais dignos de Hogwarts (Grimório das Trevas/Grimório da Aurora/Mapa do Maroto/Cartas de Hogwarts) → Confirme a estrutura do texto antes de gerar → Gere um infográfico visual com estética mágica sofisticada. Design interativo em duas etapas, geração de imagem em uma única etapa, taxa de rejeição extremamente baixa. "Juro solenemente que não pretendo fazer nada de bom."
Caneta Mágica Pena Pro (Produzida pelo Ministério da Magia)
Transforme qualquer documento em slides ou pôsteres editáveis no estilo do mundo mágico de Harry Potter com um único clique. Seis estilos visuais mágicos (Professor Diário/Anúncio de Hogwarts/Documentos do Ministério da Magia/Cartaz de Procurado por Artes das Trevas/O Pasquim/As Travessuras dos Weasley) × Dois modos de saída (pôster com uma única imagem + slides editáveis com várias páginas). Reconhecimento inteligente do tipo de entrada, aprimoramento direto de documentos PPT/PDF e extração automática de texto. O conteúdo permanece 100% inalterado em relação ao original; cada slide pode ser editado e regenerado individualmente.
Designer de recursos visuais para quadrinhos/curtas-metragens com IA
O sistema extrai personagens, cenários e objetos de cena de roteiros ou ideias criativas, gerando instruções bilíngues (chinês e inglês) compatíveis com as principais ferramentas de geração de imagens por IA. Ele suporta a geração sob demanda de cinco módulos e oferece pré-visualizações de imagem opcionais.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
