หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ดาวน์โหลดแบบอักษร
ดาวน์โหลด

การเขียนโค้ดแบบอักษร

ไมโครไซต์ที่แสดงแบบอักษรที่ออกแบบมาสำหรับการเขียนโค้ด

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

เรียกใช้ไซต์นี้

  • ติดตั้งการพึ่งพา: npm install
  • เริ่มเซิร์ฟเวอร์: npm run dev

การเพิ่มแบบอักษร

  • เริ่มเซิร์ฟเวอร์ (ดูด้านบน)
  • หากตัวอักษรเป็นโอเพ่นซอร์สให้ใส่สำเนาของแบบอักษรในโฟลเดอร์ fonts อย่างน้อยที่สุดไฟล์ .woff2 ในโฟลเดอร์ของชื่อตัวอักษร เช่น /src/assets/fonts/NewFont/NewFont.woff2
  • สร้างสไตล์ชีทที่ทำให้แบบอักษรนั้นพร้อมที่จะใช้ในโฟลเดอร์ตัวอักษรนั้น เช่น /src/assets/fonts/NewFont/NewFont.css
  • เพิ่มไฟล์เช่น new-font.md to /src/fonts เพิ่มข้อมูลของตัวอักษร ทำเครื่องหมาย URL ของสไตล์ชีทจากขั้นตอนก่อนหน้าในฟิลด์ stylesheet_url เทียบกับ /src/assets/fonts/ หาก URL เป็นแบบสัมบูรณ์เช่นไม่ได้เพิ่มลงใน repo ให้เพิ่ม stylesheet_absolute: true ดูอันนี้เป็นตัวอย่าง
  • ในการดูตัวอย่างสิ่งที่จะเป็นภาพหน้าจอโครงสร้าง URL เป็นเช่น: http: // localhost: 8080/code_samples/html/? font = anonymous-pro & theme = dark ที่ตัวอักษรตรงกับชื่อเคบับ Title ของไฟล์ markdown ที่คุณสร้างขึ้น
  • ถ่ายภาพหน้าจอ! นี่เป็นกระบวนการเฉพาะท้องถิ่น ทำตามคำแนะนำการถ่ายภาพหน้าจอในบรรทัดคำสั่ง
  • ขอดึงขอ คุณควรจะเห็นตัวอย่างที่สร้างขึ้นบน Netlify ซึ่งเป็นส่วนหนึ่งของ PR

ถ่ายภาพหน้าจอ

คุณสามารถถ่ายภาพหน้าจอโดยใช้ไฟล์ takeScreenshots.js ตัวเลือกแสดงอยู่ในหน้าจอช่วยเหลือด้านล่าง 

 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 และ --theme ทั้งหมดยอมรับคำหลัก 'ทั้งหมด' เพื่อจัดการกับการจับภาพหน้าจอของจุดข้อมูลทั้งหมดของพวกเขา

ธง --parallel ช่วยให้การรันของ puppeteer ในคู่ขนานซึ่งมีประโยชน์หากคุณต้องการถ่ายภาพหน้าจอซ้ำ ๆ ซ้ำ ๆ โปรดทราบว่าสิ่งนี้จะวางไข่อินสแตนซ์ของนักเชิดหุ่นจำนวนมากเท่าที่คุณมีการเรียงสับเปลี่ยนทั้งหมดที่คุณร้องขอ ใช้คำสั่งต่อไปนี้เช่น 

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

มันจะวางไข่ 8 อินสแตนซ์ Puppeteer (1 แบบอักษร * 4 ภาษา * 2 ธีม = 8 อินสแตนซ์) ทั้งหมดในครั้งเดียวเพื่อนำภาพหน้าจอ นี่เป็นเรื่องปกติและไม่ส่งผลให้เกิดปัญหาใด ๆ แต่ในกรณีที่คุณต้องทำสิ่งนี้สำหรับแบบอักษรทั้งหมดเช่นกันคุณจะวางไข่หลายร้อยกรณีซึ่งมักจะล้มเหลว

ตัวอย่างเพิ่มเติม 

 # 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
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด