coding fonts

Polices de codage

Un microsite qui montre des polices conçues pour écrire du code.

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

Exécuter ce site.

• Installation des dépendances: npm install
• Démarrer le serveur: npm run dev

Ajout d'une police

• Démarrer le serveur (voir ci-dessus)
• Si la police est open source, mettez une copie de la police dans le dossier fonts . À tout le moins un fichier .woff2 dans un dossier du nom des polices. par exemple /src/assets/fonts/NewFont/NewFont.woff2
• Faites une feuille de style qui prépare cette police dans ce dossier de police. par exemple /src/assets/fonts/NewFont/NewFont.css
• Ajoutez un fichier comme new-font.md à /src/fonts . Ajoutez les informations de la police. Marquez l'URL de la feuille de style à partir de l'étape précédente du champ stylesheet_url , par rapport à /src/assets/fonts/ . Si l'URL est absolue, c'est-à-dire non ajoutée au dépôt, ajoutez un Field stylesheet_absolute: true Field. Voir celui-ci comme un exemple.
• Pour prévisualiser ce qui sera la capture d'écran, la structure URL est comme: http: // localhost: 8080 / code_samples / html /? Font = anonymous-pro & theme = sombre où la police correspond Title case kebab du fichier de marquage que vous avez créé.
• Prenez des captures d'écran! Il s'agit d'un processus local uniquement. Suivez les instructions de capture d'écran dans la ligne de commande.
• Faites une demande de traction pour cela. Vous devriez être en mesure de voir un aperçu construit sur Netlify dans le cadre du PR.

Prendre des captures d'écran

Vous pouvez prendre des captures d'écran à l'aide du fichier takeScreenshots.js inclus. Les options sont répertoriées dans l'écran d'aide ci-dessous.

 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 et --theme acceptent tous le mot-clé «tout» pour gérer la prise de captures d'écran de tous leurs points de données respectifs.

L'indicateur --parallel permet le fonctionnement du marionnettiste en parallèle, ce qui est utile si vous devez prendre à plusieurs reprises des captures d'écran d'une police. Notez que cela engendrera autant d'instances de marionnet-marins que vous avez les permutations totales que vous demandez. Prenez la commande suivante par exemple.

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

Il engendrera 8 instances de marionnetteer (1 police * 4 langues * 2 thèmes = 8 instances) en même temps pour prendre les captures d'écran. Cela est généralement bien et n'entraîne aucun problème, mais dans le cas où vous deviez le faire pour toutes les polices, vous engendreriez des centaines de cas qui seront presque toujours en échec.

Exemples supplémentaires

 # 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