coding fonts

Font pengkodean

Microsite yang memamerkan font yang dirancang untuk menulis kode.

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

Menjalankan situs ini.

• Instal Ketergantungan: npm install
• Mulai Server: npm run dev

Menambahkan font

• Mulai Server (lihat di atas)
• Jika font adalah open source, masukkan salinan font di folder fonts . Paling tidak file .woff2 dalam folder nama font. eg /src/assets/fonts/NewFont/NewFont.woff2
• Buat stylesheet yang membuat font itu siap digunakan di folder font itu. eg /src/assets/fonts/NewFont/NewFont.css
• Tambahkan file seperti new-font.md ke /src/fonts . Tambahkan informasi font. Tandai URL stylesheet dari langkah sebelumnya di bidang stylesheet_url , relatif ke /src/assets/fonts/ . Jika URL mutlak, IE tidak ditambahkan ke repo, tambahkan stylesheet_absolute: true . Lihat yang ini sebagai contoh.
• Untuk pratinjau apa yang akan menjadi tangkapan layar, struktur URL seperti: http: // localhost: 8080/code_samples/html/? Font = anonymous-pro & tema = gelap di mana font cocok dengan Title kasus markdown yang Anda buat.
• Ambil tangkapan layar! Ini adalah proses khusus lokal. Ikuti instruksi screenshot yang mengambil di baris perintah.
• Buat permintaan tarik untuk itu. Anda harus dapat melihat pratinjau yang dibangun di Netlify sebagai bagian dari PR.

Mengambil tangkapan layar

Anda dapat mengambil tangkapan layar menggunakan file takeScreenshots.js yang disertakan. Opsi tercantum di layar Bantuan di bawah ini.

 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 , dan --theme semua menerima kata kunci 'semua' untuk menangani mengambil tangkapan layar dari semua titik data masing-masing.

Bendera --parallel memungkinkan pengoperasian dalang secara paralel yang berguna jika Anda perlu berulang kali mengambil tangkapan layar font. Perhatikan bahwa ini akan menelurkan sebanyak mungkin contoh dalang karena Anda memiliki total permutasi yang Anda minta. Ambil perintah berikut misalnya.

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

Ini akan menelurkan 8 instance dalang (1 font * 4 bahasa * 2 tema = 8 instance) sekaligus untuk mengambil tangkapan layar. Ini biasanya baik -baik saja dan tidak menghasilkan masalah apa pun tetapi jika Anda juga melakukan ini untuk semua font, Anda akan menelurkan ratusan contoh yang hampir selalu gagal.

Contoh tambahan

 # 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