coding fonts

Schriftarten codieren

Ein Microsite, das Schriftarten zeigt, die für das Schreiben von Code entwickelt wurden.

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

Ausführen dieser Seite.

• Installieren Sie Abhängigkeiten: npm install
• SERVER SERVER: npm run dev

Hinzufügen einer Schriftart

• Server starten (siehe oben)
• Wenn die Schrift offene Quelle ist, legen Sie eine Kopie der Schriftart in den Ordner fonts . Zumindest eine .woff2 -Datei in einem Ordner des Namens der Schriftarten. EG /src/assets/fonts/NewFont/NewFont.woff2
• Machen Sie ein Stylesheet, das diese Schriftart in diesem Schriftfeld zur Verwendung vorbereitet. EG /src/assets/fonts/NewFont/NewFont.css
• Fügen Sie eine Datei wie new-font.md zu /src/fonts hinzu. Fügen Sie die Informationen der Schriftart hinzu. Markieren Sie die URL des Stylesheet aus dem vorherigen Schritt im Feld stylesheet_url , relativ zu /src/assets/fonts/ . Wenn die URL absolut ist, dh dem Repo nicht hinzugefügt, fügen Sie ein stylesheet_absolute: true Field hinzu. Sehen Sie dieses als Beispiel.
• Um eine Vorschau zu erhalten Was wird Screenshot sein, die URL-Struktur lautet wie: http: // localhost: 8080/code_samples/html/? Font = anonymous-pro & thema = dark, wo die Schriftart mit dem Kebab-Case Title der von Ihnen erstellten Markdown-Datei übereinstimmt.
• Machen Sie Screenshots! Dies ist ein nur lokaler Prozess. Befolgen Sie die Anweisungen für Screenshots in der Befehlszeile.
• Machen Sie eine Pull -Anfrage dafür. Sie sollten in der Lage sein, eine erstellte Vorschau auf Netlify als Teil der PR zu sehen.

Screenshots machen

Sie können Screenshots mit der mitgelieferten takeScreenshots.js -Datei aufnehmen. Die Optionen sind auf dem Bildschirm "Hilfebereich" aufgeführt.

 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 und --theme alle akzeptieren das "all" -Speursword, um Screenshots aller ihrer jeweiligen Datenpunkte zu verarbeiten.

Das --parallel ermöglicht das Ausführen des Puppenspielers parallel, was nützlich ist, wenn Sie wiederholt Screenshots einer Schriftart aufnehmen müssen. Beachten Sie, dass dies so viele Puppenspieler -Instanzen erzeugt, wie Sie die gesamten, die Sie anfordern. Nehmen Sie zum Beispiel den folgenden Befehl.

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

Es wird 8 Puppenspieler -Instanzen (1 Schriftart * 4 Sprachen * 2 Themen = 8 Instanzen) auf einmal erzeugen, um die Screenshots zu machen. Dies ist in der Regel in Ordnung und führt nicht zu Problemen, aber für den Fall, dass Sie dies auch für alle Schriftarten tun, würden Sie Hunderte von Fällen hervorbringen, die fast immer in einem Versagen werden.

Zusätzliche Beispiele

 # 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