พีซีและมือถือ

วิธีเพิ่มการเน้นไวยากรณ์ให้กับซอร์สโค้ดใน Google Docs

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

วิธีเพิ่มการเน้นไวยากรณ์ให้กับซอร์สโค้ดใน Google Docs

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

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

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

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

JavaScript สามารถทำอะไรได้บ้าง?

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

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

เปิดไฟ

ปิดไฟ

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

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

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

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

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

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

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

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

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

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

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

มีวิธีอื่นในการเพิ่มการจัดรูปแบบไวยากรณ์ใน Google เอกสารหรือไม่ แบ่งปันกับเราด้านล่าง!