coding fonts

Fontes de codificação

Um microsite que mostra fontes projetadas para escrever código.

https://coding-fonts.css-tricks.com/

Executando este site.

• Instale dependências: npm install
• Start Server: npm run dev

Adicionando uma fonte

• Iniciar o servidor (veja acima)
• Se a fonte for de código aberto, coloque uma cópia da fonte na pasta fonts . No mínimo, um arquivo .woff2 em uma pasta do nome das fontes. por exemplo, /src/assets/fonts/NewFont/NewFont.woff2
• Faça uma folha de estilo que prepare essa fonte para usar nessa pasta de fontes. por exemplo, /src/assets/fonts/NewFont/NewFont.css
• Adicione um arquivo como new-font.md para /src/fonts . Adicione as informações da fonte. Marque o URL da folha de estilo da etapa anterior no campo stylesheet_url , em relação a /src/assets/fonts/ . Se o URL for absoluto, ou seja, não adicionado ao repositório, adicione um stylesheet_absolute: true campo. Veja este como um exemplo.
• Para visualizar o que será a captura de tela, a estrutura de URL é como: http: // localhost: 8080/code_samples/html/? Font = anonymous-pro & tema = escuro onde a fonte corresponde ao Title do KeBab-Case do arquivo de marcação que você criou.
• Tire capturas de tela! Este é um processo somente local. Siga as instruções de captura de captura de tela na linha de comando.
• Faça um pedido de tração para isso. Você deve ver uma prévia construída no Netlify como parte do PR.

Tomando capturas de tela

Você pode tirar capturas de tela usando o arquivo incluído takeScreenshots.js . As opções estão listadas na tela de ajuda abaixo.

 Options:
  --version    Show version number
  -f, --font   Font to use for screenshots
  -l, --lang   Code sample to use for screenshot
  -t, --theme  Theme to use for screenshots
  --parallel   Run the screenshots in parallel
  -h, --help   Show help

--font , --lang e --theme todos aceitam a palavra-chave 'All' para lidar com capturas de tela de todos os seus respectivos pontos de dados.

A bandeira --parallel permite a execução de marionetistas em paralelo, o que é útil se você precisar tirar capturas de tela repetidamente de uma fonte. Observe que isso gerará tantas instâncias de marionetistas quanto você tiver as permutações totais solicitadas. Veja o seguinte comando, por exemplo.

 node takeScreenshots.js -f source-code-pro -l all -t all

Ele gerará 8 instâncias de marionetistas (1 fonte * 4 idiomas * 2 temas = 8 instâncias) de uma só vez para tirar as capturas de tela. Isso geralmente é bom e não resulta em nenhum problema, mas no caso de você fazer isso para todas as fontes também, você geraria centenas de instâncias que quase sempre fariam um fracasso.

Exemplos adicionais

 # Take a screenshot of the Source Code Pro font, using the JavaScript code sample, and the dark theme.
node takeScreenshots.js -f source-code-pro -l js -t dark

# Take a screenshot of the Menlo font, using all of the code samples, and the light theme.
node takeScreenshots.js -f menlo -l all -t light

# Take a screenshot of all of the fonts, using all of the code samples, and all of the themes.
node takeScreenshots.js -f all -l all -t all

# Take a screenshot of the Input font, using all of the code samples, all of the themes, and do so in parallel
node takeScreenshots.js -f input -l all -t all --parallel