วิธีใส่รหัสต้นฉบับด้วยการไฮไลต์ใน Google เอกสาร

นักเขียนโปรแกรมและนักพัฒนาเว็บไซต์หลายคนใช้บรรณาธิการข้อความของบุคคลที่สามเพื่อป้อนรหัสที่มาสำหรับซอฟต์แวร์และไซต์ของตน ตัวแก้ไขข้อความเช่น Notepad ++ ซึ่งรวมอยู่ในคู่มือการใช้งาน Tech Junkie นี้ประกอบด้วยการเน้นไวยากรณ์ที่จัดรูปแบบซอร์สโค้ดด้วยสีแบบอักษรทางเลือก หมายเหตุรองนี้ทำให้โค้ดชัดเจนขึ้นในเอกสารข้อความ เช่นโปรแกรมเมอร์และนักพัฒนาซอฟต์แวร์ส่วนใหญ่อาจมองข้ามเอกสารของ Google เนื่องจากไม่มีตัวเลือกการเน้นไวยากรณ์ในตัว

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

จัดรูปแบบซอร์สโค้ดด้วย Code Pretty

Code Pretty เป็นส่วนเสริมสำหรับ Google เอกสารที่จะเพิ่มไฮไลต์ให้กับโค้ดที่เลือกโดยอัตโนมัติ Code Pretty ไม่รวมการตั้งค่าจำนวนมากเพื่อกำหนดรูปแบบไวยากรณ์ แต่ก็ยังเพิ่มตัวเลือกการเน้นไวยากรณ์ที่มีประโยชน์ให้กับ Docs คุณสามารถเพิ่ม CP ลงใน Documents ได้โดยคลิกที่ปุ่ม + free บนหน้าเว็บนี้ จากนั้นกดปุ่ม อนุญาต เพื่อยืนยันสิทธิ์สำหรับ Add-on

จากนั้นเปิดเอกสารในเบราเซอร์ของคุณ และคลิกแท็บ Add-ons เพื่อเปิดเมนู เมนูนี้จะมี Add-on Code Pretty เพื่อให้ตัวอย่างของวิธีเพิ่มส่วนเสริมของไวยากรณ์ให้เลือกและคัดลอกโค้ด JavaScript ตัวอย่างด้านล่างโดยกด Ctrl + C

สิ่งที่ JavaScript สามารถทำได้?

JavaScript สามารถเปลี่ยนแอตทริบิวต์ HTML ได้

ในกรณีนี้ JavaScript จะเปลี่ยนแอตทริบิวต์ src (source) ของรูปภาพ

เปิดไฟ

ปิดไฟ

วางตัวอย่าง JavaScript ลงในเอกสารโดยกด Ctrl + V. จากนั้นเลือกโค้ดในโปรแกรมประมวลผลคำด้วยเคอร์เซอร์ คลิก Add-ons > Code Pretty และเลือกตัวเลือกการเลือก รูปแบบ จากเมนูย่อย ที่จะจัดรูปแบบ JavaScript ตามที่แสดงในภาพรวมด้านล่าง

ตามที่ระบุ CP ไม่มีการตั้งค่าหลายอย่างสำหรับการเน้นไวยากรณ์ อย่างไรก็ตามคุณสามารถปรับขนาดตัวอักษรของโค้ดที่ไฮไลต์โดยคลิกที่ Add-ons > Code Pretty and Settings ที่จะเปิดแถบด้านข้างที่แสดงด้านล่าง จากนั้นคุณสามารถเลือกขนาดตัวอักษรเริ่มต้นอื่นสำหรับโค้ดที่ไฮไลต์ได้จากที่นั่น

จัดรูปแบบซอร์สโค้ดด้วยโค้ดบล็อค

Code Blocks เป็นอีกทางเลือกหนึ่งสำหรับ CP ที่คุณสามารถเพิ่มลงในเอกสาร นี่เป็นส่วนเสริมที่ดีขึ้นเล็กน้อยเพื่อเน้นไวยากรณ์โดยมีรูปแบบเน้นเป็นจำนวนมาก กดปุ่ม + free ในหน้าเว็บไซต์นี้เพื่อเพิ่ม Code Blocks ใน Docs

เมื่อคุณติดตั้งบล็อกโค้ดให้เปิดเอกสารและคัดลอกและวางโค้ด JavaScript เดียวกันข้างต้นลงในตัวประมวลผลคำเหมือนก่อน คลิก Add-ons > Code Blocks และเลือก Start เพื่อเปิดแถบด้านข้างที่แสดงในภาพด้านล่าง

เลือกเฉพาะข้อความ JavaScript ด้วยเคอร์เซอร์ของคุณ ตรวจสอบว่าคุณไม่ได้เลือกช่องว่างด้านเอกสารว่างหรือเหนือกว่าโค้ด เลือก JavaScript จากเมนูแบบเลื่อนลงเมนูแรก จากนั้นคุณยังสามารถเลือกธีมจากเมนูแบบเลื่อนลง Theme กดปุ่ม รูปแบบ เพื่อเพิ่มการเน้นไวยากรณ์ลงในโค้ดดังที่แสดงด้านล่าง ขณะนี้ข้อความ JavaScript มีความชัดเจนมากขึ้นโดยไฮไลต์แท็กมาร์กอัพ

คัดลอกและวางโค้ดต้นฉบับที่ไฮไลต์ลงใน Google เอกสาร

นอกเหนือจากโค้ดบล็อคและโค้ด Pretty เอกสารคุณยังสามารถใช้เว็บแอ็พพลิเคชันเน้นข้อความเพื่อจัดรูปแบบซอร์สโค้ด จากนั้นคุณสามารถคัดลอกและวางซอร์สโค้ดที่ไฮไลต์จากแอปพลิเคชันเว็บลงในเอกสารของคุณได้ Textmate เป็นเว็บแอ็พพลิเคชันที่เน้นการใช้ไวยากรณ์ซึ่งมีรูปแบบการเขียนโปรแกรมและภาษามาร์กอัปมากมาย

คลิกที่ลิงค์นี้เพื่อเปิด Textmate จากนั้นคัดลอกและวางข้อความ JavaScript ที่รวมอยู่ในโพสต์นี้ลงในช่องซอร์สโค้ดของ Textmate โดยใช้ปุ่มลัด Ctrl + C และ Ctrl + V เลือก JavaScript จากเมนูแบบเลื่อนลงภาษา เลือกธีมไฮไลต์ไวยากรณ์จากเมนูแบบเลื่อนลง Theme กดปุ่ม ไฮไลต์ เพื่อดูตัวอย่างการจัดรูปแบบของซอร์สโค้ดตามที่แสดงในภาพรวมด้านล่าง

จากนั้นเลือก JavaScript ที่ไฮไลต์ในหน้าตัวอย่างด้วยเคอร์เซอร์และกด Ctrl + C วางโค้ดที่ไฮไลต์ลงใน Google เอกสารโดยกด Ctrl + V ซึ่งจะเพิ่มซอร์สโค้ด JavaScript ที่ไฮไลต์ลงในเอกสารดังที่แสดงด้านล่าง

ดังนั้นคุณจึงไม่จำเป็นต้องมีโปรแกรมแก้ไขข้อความบนเดสก์ท็อปเพื่อเพิ่มการเน้นไวยากรณ์ให้กับซอฟต์แวร์และโค้ดเว็บไซต์ คุณสามารถเน้นรหัสไวยากรณ์ในเอกสารเอกสารโดยใช้ส่วนขยาย Code Pretty และ Code Blocks อีกวิธีหนึ่งคือคัดลอกและวางโค้ดของคุณไปยังและจากแอปพลิเคชันเว็บของ Textmate เพื่อแทรกโค้ดต้นฉบับพร้อมกับเน้นใน Google เอกสาร