coding fonts

Fuentes de codificación

Un micrositio que muestra fuentes diseñadas para escribir código.

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

Ejecutando este sitio.

• Dependencias de instalación: npm install
• Inicio del servidor: npm run dev

Agregar una fuente

• Inicio del servidor (ver arriba)
• Si la fuente es de código abierto, coloque una copia de la fuente en la carpeta fonts . Al menos un archivo .woff2 en una carpeta del nombre de las fuentes. Eg /src/assets/fonts/NewFont/NewFont.woff2
• Haga una hoja de estilo que prepare esa fuente para usar en esa carpeta de fuente. Eg /src/assets/fonts/NewFont/NewFont.css
• Agregue un archivo como new-font.md a /src/fonts . Agregue la información de la fuente. Marque la URL de la hoja de estilo desde el paso anterior en el campo stylesheet_url , en relación con /src/assets/fonts/ . Si la URL es absoluta, es decir, no se agrega al repositorio, agregue un stylesheet_absolute: true . Vea este como ejemplo.
• Para obtener una vista previa de lo que será captura de pantalla, la estructura de URL es: http: // localhost: 8080/code_samples/html/? Font = anyymous-pro & thema = dark donde font coincide con el Title de casas kebab del archivo de markdown que creó.
• ¡Tome capturas de pantalla! Este es un proceso solo local. Siga las instrucciones de capturas de pantalla en la línea de comando.
• Haga una solicitud de extracción para ello. Debería poder ver una vista previa construida en Netlify como parte del PR.

Tomar capturas de pantalla

Puede tomar capturas de pantalla utilizando el archivo takeScreenshots.js incluido. Las opciones se enumeran en la pantalla de ayuda a continuación.

 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 y --theme todos aceptan la palabra clave 'todo' para manejar tomar capturas de pantalla de todos sus puntos de datos respectivos.

La bandera --parallel permite la ejecución de titiriteros en paralelo, lo que es útil si necesita tomar capturas de pantalla repetidamente de una fuente. Tenga en cuenta que esto generará tantas instancias de titiriteros como tenga las permutaciones totales que solicita. Tome el siguiente comando por ejemplo.

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

Generará 8 instancias de titiriteros (1 fuente * 4 idiomas * 2 temas = 8 instancias) todo a la vez para tomar las capturas de pantalla. Esto suele estar bien y no da como resultado ningún problema, pero en el caso de que también hiciera esto para todas las fuentes, generaría cientos de instancias que casi siempre en una falla.

Ejemplos adicionales

 # 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