🥇วิธีการระบายสีโค้ดบน Habr อย่างถูกต้องและเหตุใดจึงยากมาก

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

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

ทั้งหมดนี้เพื่ออะไร

เมื่อมองแวบแรกอาจดูเหมือนว่าการกระทำนี้เกิดจากความชั่วร้าย เพียงเพราะว่าการส่องสว่างมาตรฐานที่ใช้ผ่านแท็กนั้นไม่น่าพอใจ <source>.

ในแง่หนึ่ง แน่นอนว่านี่เป็นเรื่องจริง แต่ก็ไม่ทั้งหมด

ประการแรกแสงสว่างภายใน <source> ไม่สามารถทำงานกับโค้ดได้เนื่องจากจะไม่มีข้อมูลเพียงพอสำหรับการระบายสี องค์ประกอบทั้งหมดที่ประกาศนอกขอบเขตของชิ้นงานจะถูกทาสีแบบสุ่ม ปัญหานี้ไม่มีทางแก้ไข เนื่องจากเท่าที่ฉันทราบ ไม่มีบริการระบายสีออนไลน์ใดที่อนุญาตให้คุณทำสิ่งใดสิ่งหนึ่งต่อไปนี้:

แทรกโค้ดโปรเจ็กต์แบบเต็มลงในบทความโดยไม่แสดงทั้งหมด หรือแทรกลิงก์ไปยังคอมมิตบน GitHub ในตำแหน่งเฉพาะของบทความ ให้ใช้ข้อความที่ตัดตอนมาจากโค้ดเต็ม (ระบุช่วง) ในกรณีนี้ การไฮไลต์ควรพิจารณาจากโค้ดที่สมบูรณ์
ระบุข้อมูลเมตาอย่างชัดเจนสำหรับองค์ประกอบที่ไม่ได้กำหนด ค่อนข้างเป็นเส้นทางที่ยากสำหรับผู้ใช้ แต่ฉันก็เห็นด้วยกับสิ่งนี้

ประการที่สองแสงสว่างภายใน <source> จะไม่จับคู่จำนวนองค์ประกอบประเภทต่างๆ กับ IDE ปกติ และเนื่องจากปัญหาที่อธิบายไว้ข้างต้น จึงไม่มีประโยชน์ในการระบายสีขั้นสูง: ไม่มีใครใส่โค้ดโปรเจ็กต์แบบเต็มลงในบทความ ดังนั้นฟังก์ชันนี้จึงไม่สามารถทำงานได้

ในขณะเดียวกัน ความจริงก็คือจำเป็นต้องแทรกโค้ดบางส่วนลงในบทความ และยิ่งโค้ดมีขนาดเล็กเท่าไรก็ยิ่งดีเท่านั้น

คุณสามารถอ่านโค้ดได้โดยไม่ต้องมีแบ็คไลท์ แต่ทำไม?

คุณสมบัติของมาร์กอัป "Habr"

IntelliJ IDEA มีการสนับสนุนในตัวสำหรับการส่งออกโค้ดเป็น HTML การคัดลอกโค้ดตามปกติจะวางโค้ดสีไว้บนคลิปบอร์ด ซึ่งสามารถอ่านได้ในรูปแบบ HTML

ขออภัย Habr ไม่อนุญาตให้ใช้มาร์กอัป HTML ในบทความโดยตรง เหตุผลของเรื่องนี้เป็นเรื่องลึกลับที่ปกคลุมไปด้วยความมืด แต่บางทีนี่อาจเป็นเพราะการรวมบทความประเภทต่างๆ เข้าด้วยกัน การอนุญาตให้ใช้ HTML ในบทความจะช่วยชดเชยปัญหาการรับชมที่อาจเกิดขึ้นได้

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

ดังนั้นเราจึงมีแท็กไว้คอยบริการ , , . นอกจากนี้ ทั้งหมดนี้ใช้งานได้ภายในแท็ก <code>ซึ่งจำเป็นสำหรับการจัดรูปแบบ ดี   นอกจากนี้เรายังบันทึกมันไว้ด้วย ซึ่งมีประโยชน์สำหรับโค้ดและการเยื้องบรรทัดยาวๆ

ไม่จำเป็นต้องพูดว่า วิธีมาตรฐานทั้งหมดในการรับโค้ด HTML จาก IDEA จะสร้าง HTML ที่แตกต่างไปจากเดิมอย่างสิ้นเชิง ดังนั้นจึงมีงานการแปลงอีกมากรออยู่ข้างหน้า

วิธีการ

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

ข้อเสียอย่างเดียวของการเผยแพร่นี้คือโค้ดจำนวนมากรวมกับคำอธิบายที่กระจัดกระจายมากว่ามันทำอะไรและทำไม

ฉันจะพยายามแก้ไขสถานการณ์และอธิบายสิ่งที่คุณต้องทำกับโค้ดมาร์กอัป HTML ของคุณ หากคุณต้องการนำมาลงในแบบฟอร์มที่พร้อมที่จะแทรกลงใน Habr

ก่อนส่งออก คุณต้องตั้งค่าโทนสีที่ต้องการใน IDEA เป็นต้น จากเว็บไซต์ธีมสี. รหัสจะถูกส่งออกพร้อมกับโครงร่างที่เลือก ควรเลือกรูปแบบที่มีพื้นหลังสีขาว (เนื่องจากไม่สามารถตั้งค่าพื้นหลังเป็น Habr ได้) และไม่มีการขีดเส้นใต้ ฉันไม่รู้วิธีลากมันง่ายๆ เพราะฉันไม่ต้องการจริงๆ
เราทำงานเฉพาะกับด้านในของแท็กเท่านั้น <pre>. แม้ว่าคุณจะใช้การส่งออกไม่ใช่จาก IDEA แต่เป็นอย่างอื่น ก็อาจมีแท็กนี้ในมาร์กอัป HTML เนื่องจากหากไม่มีแท็กนี้ก็จะเป็นการยากที่จะจัดรูปแบบโค้ดให้ถูกต้อง เราลบแท็กออกแล้วแทนที่ด้วย <code>.
ข้อความมักจะถูกนำเสนอเป็นรายการ  ด้วยสไตล์ที่แตกต่าง เราจะต้องกำจัดพวกมันทั้งหมด บริการระบายสีจำนวนมากจะยุบสไตล์ลงในสไตล์ชีตซึ่งเป็นตรรกะ และใช้การอ้างอิงถึงชื่อสไตล์ IDEA ยังไม่ได้ทำสิ่งนี้โดยเฉพาะ ซึ่งทำให้งานค่อนข้างง่ายขึ้น (การตั้งค่าสไตล์ถูกต้อง) ).
กำหนดสีตัวอักษรโดยใช้แท็ก . ขออภัย ไม่สามารถกำหนดสีพื้นหลังได้
คุณสมบัติ font-style:italic เปลี่ยนเป็นแท็กสองสามอัน และ font-weight:bold - ใน .
แทนที่ช่องว่างทั้งหมดด้วย  .
การแปลสตริงในแบบฟอร์ม   แทนที่ด้วย n.
มาร์กอัป HTML ใน IDEA สร้างบรรทัดว่างพร้อมสไตล์และบรรทัดช่องว่างพร้อมสไตล์ เป็นการดีกว่าที่จะทิ้งสไตล์ดังกล่าว: ซึ่งจะช่วยลดความยาวได้อย่างมากและเพิ่มความเข้าใจของโค้ด
เราตรวจสอบให้แน่ใจว่าตัวแบ่งบรรทัดไม่มีสไตล์ใดๆ ไม่เช่นนั้นจะเกิดปัญหากับบรรทัดว่าง

ฉันจะอธิบายจุดสุดท้ายด้วยตัวอย่าง:

<code>
1
2
</code>

รหัสนี้จะถูกเปลี่ยนโดย Habr เป็น 12. เช่นเดียวกับแท็ก  и รวมถึงการรวมกันใดๆ ของสิ่งเหล่านั้น การขึ้นบรรทัดใหม่ไม่ควรมีสไตล์ แล้วทุกอย่างจะเรียบร้อย

การดำเนินงาน

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

เพื่อป้องกันไม่ให้การขึ้นบรรทัดใหม่มีสไตล์ เราจำเป็นต้องทำการแทนที่ที่ค่อนข้างยุ่งยาก ซึ่งอาจเป็นสิ่งที่เข้าใจยากที่สุด (ดูฟังก์ชัน popupBr) แนวคิดก็คือว่าแท็ก   หลังจากการแทนที่แต่ละครั้ง พวกมันจะ "โผล่ขึ้นมา" จากส่วนลึกของแท็กการจัดรูปแบบออกไปด้านนอก ดังนั้นหลังจากเปลี่ยนแท็กทั้งหมดแล้ว   ปรากฏว่าไม่อยู่ในรูปแบบ

นอกจากนี้ ปรากฎว่า IDEA ไม่เพียงแต่ใส่ Rich Text ไว้ในคลิปบอร์ดเท่านั้น แต่ยังรวมถึงวัตถุที่ค่อนข้างยุ่งยากด้วย application/x-java-jvm-local-objectref. ปัญหาคือการมีวัตถุดังกล่าวอยู่บนคลิปบอร์ดทำให้เกิดข้อผิดพลาดอย่างต่อเนื่องในคอนโซลของฉันเกี่ยวกับการสร้าง DataFlavor น่าเสียดายที่คุณไม่สามารถทำอะไรกับมันได้ นั่นคือวิธีที่ JDK ทำงานร่วมกับคลิปบอร์ด มันเป็นการเปิดเผยสำหรับฉัน นี่คือรหัส. เห็นได้ชัดว่าคนฉลาดที่เขียนเรื่องนี้คิดว่ามันจะทำได้ดี โดยทั่วไปอย่ากลัวข้อผิดพลาดที่อาจเกิดขึ้นเมื่อทำงานกับเครื่องมือ

โปรเจ็กต์นี้เขียนด้วยภาษา Kotlin และดำเนินต่อไป GitHub.

ข้อเสนอแนะสำหรับการปรับปรุงยินดีเป็นอย่างยิ่ง! ตัวอย่างเช่น คงจะดีถ้าออกแบบเครื่องมือนี้เป็นปลั๊กอินสำหรับ IDEA ฉันยังไม่พบวิธีง่ายๆ ในการทำเช่นนี้: น่าเสียดายที่แหล่งที่มาของปลั๊กอิน Copy as HTML ถูกปิดไปแล้ว และการหาวิธีเขียนปลั๊กอินดังกล่าวตั้งแต่เริ่มต้นใช้เวลานานเกินไป

เฉพาะผู้ใช้ที่ลงทะเบียนเท่านั้นที่สามารถเข้าร่วมในการสำรวจได้ เข้าสู่ระบบ, โปรด.