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

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

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

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

Code Pretty เป็นโปรแกรมเสริมสำหรับ Google Docs ที่จะเพิ่มการเน้นสีให้กับโค้ดที่เลือกโดยอัตโนมัติ Code Pretty ไม่ได้รวมการตั้งค่าจำนวนมากสำหรับกำหนดการจัดรูปแบบไวยากรณ์เอง แต่ก็ยังเพิ่มตัวเลือกการเน้นไวยากรณ์ที่สะดวกให้กับเอกสาร คุณสามารถเพิ่ม 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 ดังที่แสดงด้านล่าง

วิธีกำจัดภาพที่ซ้ำกันใน google photos

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

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