วิธีการแสดงรหัสบน WordPress ของคุณ

ถ้าคุณเรียกใช้เว็บไซต์พัฒนา, เอกสารประกอบโครงการ, ส่วนวิธีใช้ผลิตภัณฑ์หรือสิ่งที่คล้ายกันจากเว็บไซต์ WordPress, โอกาสคุณต้องแสดงรหัสครั้งเดียวหรืออื่น. ขึ้นอยู่กับภาษาที่ใช้ นี้อาจเจ็บเล็กหรือเจ็บใหญ่จริง ๆ.

ในโครงการนี้ WordPress สุดสัปดาห์, เราจะอธิบายเหตุผลนี้เป็นน่ารำคาญ และสำรวจบางตัวเลือกที่คุณต้อง การแสดงรหัสอย่างสวยงาม และง่ายดาย บนไซต์ของคุณ WordPress.

ทำไมรหัสแสดงเป็นสัด

เข้าใจทำไมแสดงรหัสเป็นเรื่องยากที่ คุณต้องรู้ HTML พื้นฐานบางอย่าง. รหัสสำหรับการทำบางอย่าง ข้อความตัวหนา จะล้อมรอบด้วยแท็ก. การสร้างข้อความตัวหนาในประโยคที่ว่าผมเขียนจริง <strong>bold text</bold> ในตัวแก้ไข WordPress ของฉัน.

รหัสเวิร์ดเพรส
แสดงรหัสบนไซต์ของคุณอาจเป็นเรื่องยากหากคุณไม่ทราบวิธี.

ไปได้สวยทีเดียว, แต่ตอนนี้ สำหรับส่วนยาก: ถ้าอยากจะแสดงให้คุณเห็นวิธีการที่ฉันไม่ได้

ตลอดเวลาที่พิมพ์ <แข็งแกร่ง> เป็นการแก้ไข ได้รับการตีความว่าเป็นโค้ด HTML, ซึ่งหมายความว่า มันจะหายไป และใช้แทน การ embolden ข้อความ.

ปัญหาอื่น ๆ ที่เรามีคือ ไวยากรณ์เน้น. แม้ว่ารหัสจะแสดงอย่างถูกต้อง มันอาจจะยากต่อการอ่าน โดยการจัดแต่งทรงผมที่ถูกต้อง.

ทำรหัสแสดง

เพื่อให้แสดงรหัสคือการ แปลงอักขระที่ มีความหมายเป็นพิเศษเป็น HTML เอนทิตี. คุณอาจจะทราบว่า บางครั้งคุณจะต้องพิมพ์ &amp; แทนที่จะเพียง ampersand ปกติเพื่อให้แสดงขึ้นอย่างถูกต้อง. ทั้งนี้เนื่องจาก &amp; เป็นเอนทิตี HTML สำหรับเครื่องหมาย ampersand.

เอนทิตีของ HTML จะตีความเป็นรหัสแต่เพียงแสดงเหมือนพวกไม่มีเอนทิตี. การแสดงวิธีการสร้างข้อความตัวหนา คุณจะต้องพิมพ์:

1
&ltแข็งแกร่ง&gtข้อความตัวหนา&lt/ตัวหนา&gt
ดูดิบ bold.html โฮสต์กับ❤โดย GitHub

&lt; เป็นเอนทิตี HTML สำหรับต่ำกว่า (ดังนั้น lt) และ &gt; เป็นเอนทิตี HTML สำหรับมากกว่าการลงทะเบียน – ดังนั้น gt.

เพิ่มรหัสการลงเวิร์ดเพรสได้ง่าย ๆ

วิธีการเพิ่มรหัสไปยังโพสต์ของคุณคือการ ใช้เอนทิตีที่ HTML และตัดทุกอย่างใน <pre> แท็ก. แท็กนี้เป็นการแสดงรหัส และรูปแบบส่วนใหญ่จะประกอบด้วยสไตล์ที่เหมาะสม. ตัวอย่างที่รวดเร็วของผมหมายถึง, ตรงมาจากโพสต์:

1 2 3 4 5 6 7
การเพิ่มแรงจูงใจข้อความพื้นที่ด้านบน, เพียงตะขอฟังก์ชันลงใน admin_notices, แบบนั้นเช่น:
<ก่อน>add_action ('admin_notices', ' show_mot_text’ );
ฟังก์ชัน show_mot_text() {
$ข้อความที่ = get_motivation_text()
เสียงก้อง “&ltรหัส p ='wp admin-แรงจูงใจ’&gt$ข้อความ&lt/p&gt“;
}</ก่อน>
ดูดิบ รหัส simple.html โฮสต์กับ❤โดย GitHub

ผมเริ่มรหัสหลังจากแท็กเปิด และผมเขียนแท็กปิดหลังอักขระตัวสุดท้ายของรหัส. มันจะทำความสะอาดวางบนบรรทัดใหม่ แต่ไฮไลท์ไวยากรณ์ Javascript มากจะตีตัวแบ่งบรรทัดเหล่านี้เป็นตัวแบ่งบรรทัดจริง. ดังนั้น, มันเป็นความคิดดีจะเป็นนิสัยที่ไม่ออกจากตัวแบ่งบรรทัดที่นี่.

นี้ทำงานได้ดี แต่ก็เป็นฝันร้ายเพื่อรักษา. หากคุณสามารถแท็กจำนวนมากมี, ไม่ใช่แค่ย่อหน้าคี่จะกลายเป็นของทำยากมากที่จะแก้ไขรหัสเอนทิตีของ HTML. ถ้าต้องการใช้วิธีการนี้ ใช้ตัวแก้ไขข้อความของฉันการสร้างเอนทิตีที่ HTML.

ผมเขียนโค้ดปกติ และใช้ตัวแก้ไขข้อความของฉันเพื่อแปลงหน่วยงาน HTML ทั้งหมดในครั้งเดียว. ถ้าคุณต้องการปรับเปลี่ยนรหัสคุณสามารถวางรุ่นแปลง และถอดรหัสเหล่านั้นลงในอักขระที่เหมาะสมของตน. ถ้าคุณใช้ Atom.io คุณสามารถใช้การ เอนทิตีของ HTML แพคเกจ, ถ้าคุณใช้ประเสริฐ คุณสามารถใช้การ HTML: Encode Special Characters คำสั่ง.

แม้จะได้ลำดับดีแค่ดูเกเรดังนั้น ในเวิร์ดเพรสลงตัวแก้ไข และ – เถอะว่าจากเวิร์กโฟลว์รวดเร็ว.

รหัสลำดับดีกว่า

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

คว้า ปริซึม WP, ติดตั้ง และเริ่มต้นการเขียนโค้ด, โดยปฏิบัติดังนี้.

  • ตัดรหัสของคุณใน <pre> และ <code> แท็กเป็นอย่างดี
  • รหัสอาจได้รับชั้นพิเศษซึ่งกำหนดภาษาเป้าหมาย, ใช้สำหรับเน้น
  • หากคุณต้องการหมายเลขบรรทัด คุณต้องเปิดใช้งานนี้ในการตั้งค่าของปลั๊กอิน และเพิ่มการ line-numbers ระดับองค์ก่อน.

โค้ดตัวอย่างข้างต้นนี้มีลักษณะดังนี้ในโปรแกรมแก้ไขรหัส:

1 2 3 4 5
<ก่อน คลาส=หมายเลขบรรทัด><รหัส คลาส=ภาษา php>add_action ('admin_notices', ' show_mot_text’ );
ฟังก์ชัน show_mot_text() {
$ข้อความที่ = get_motivation_text()
เสียงก้อง “<p รหัส=wp admin-แรงจูงใจ>$ข้อความ</p>”;
}</รหัส></ก่อน>
ดูดิบ รหัส prism.html โฮสต์กับ❤โดย GitHub

ที่ดูดีขึ้นไม่ได้ มีการส่งออกน่ารักด้วย, โดยค่าเริ่มต้น ดูเหมือนว่า screnshot ด้านล่างเมื่อใช้ชุดรูปแบบยี่สิบห้า.

ปริซึมออกปากกาเน้นข้อความ
ปริซึมออกปากกาเน้นข้อความ

มีชุดรูปแบบอื่น ๆ ที่คุณสามารถใช้, ลองดู ปริซึม หน้าแรก. สามารถเปลี่ยนธีมในขวาด้วย thingies รอบ. ปลั๊กอินที่ช่วยให้คุณสามารถเปลี่ยนชุดรูปแบบในการตั้งค่าของปลั๊กอิน.

บริการภายนอก

มีตันของบริการที่ช่วยให้คุณสามารถวางรหัสของคุณเช่น จับใจความสำคัญ, JSFiddle และ Pastebin. บริการเหล่านี้มีปลั๊กอิน WordPress ที่ช่วยให้คุณสามารถฝังไว้ในกระทู้เวิร์ดเพรส, เหมือนที่เราทำนี่ที่ DEV WPMU กับ Gists.

ผมแนะนำให้ไป ค้นหาปลั๊กอิน หน้าบน WordPress และค้นหาผู้ให้บริการที่ต้องการ, คุณจะพบปลั๊กอินดีในวินาที.

DIY

ผมชอบที่จะมากับโซลูชัน DIY ปัญหาเสมอ, จึงขอลอง และทำสิ่งนี้เพื่อตัวเราเอง. ไม่กันเถอะเป็นทั้งเน้นพื้นที่ที่มีความซับซ้อนมากจริง ๆ – แต่เรา สามารถ ทำมากจะทำให้ง่ายขึ้นแทรกรหัสในเวิร์ดเพรส.

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

ความคิดคือ ก่อนจะแสดงเนื้อหาที่ เราจะมองผ่านเนื้อหาสำหรับข้อความภายในแท็กรหัส และแทนที่อักขระพิเศษในกับ HTML.

ผมเขียนปลั๊กอินเล็ก ๆ ชื่อจริง รหัสอัจฉริยะหนี การทำเพียงไม่กี่เดือนกลับ. ก็เป็นตัวอย่างของสิ่งที่มีประโยชน์ที่ใช้ทั้งหมด 15 บรรทัดของรหัส. ลองมาดูตอนนี้.

สิ่งแรกที่คุณต้องทำคือ สร้างปลั๊กอิน. เรามีความสะดวกสบาย สร้างคำแนะนำปลั๊กอิน สำหรับคุณถ้าคุณไม่ทราบวิธี.

สั้น: สร้างโฟลเดอร์ในไดเรกทอรีของคุณปลั๊กอินที่ชื่อ smart-code-escape และไฟล์ภายในโฟลเดอร์ที่ชื่อ smart-code-escape.php. เพิ่มเนื้อหาต่อไปนี้ลงในแฟ้ม, เราจะอธิบายทุกอย่างในช่วงเวลา.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
<? php
/*
* ชื่อปลั๊กอิน: สมาร์ทรหัสหนี
* ปลั๊กอิน URI: https://github.com/danielpataki/Smart-Code-Escape
* คำอธิบาย: แปลงน้อยกว่า, มากกว่า และอักขระ ampersand HTML ของพวกเขา
เอนทิตีภายในแท็กก่อนก่อนที่จะแสดงผลบนหน้า. คุณจะเห็นเสมอ
ไม่หนีรุ่นในตัวแก้ไข, ทำให้รหัสที่ง่ายต่อการปรับเปลี่ยน. มันจะไม่แปลงรหัส
แท็กโดยตรงภายในก่อนแท็กเพื่อสนับสนุนเน้นแบบปริซึม.
* เวอร์ชัน: 1.1
* ผู้เขียน: แดเนียล Pataki
* ผู้เขียน URI: http://danielpataki.com
* ใบอนุญาต: GPL v2
* ใบอนุญาต URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/
ฟังก์ชัน smart_code_escape_pre( $ข้อมูล ) {
preg_match(@(<code.*>)(.*)(<\/รหัส>) @isU, $ข้อมูล[2], $ตรงกับ );
ถ้า( !ว่างเปล่า( $ตรงกับ ) ) {
กลับ $ข้อมูล[1] . $ตรงกับ[1] . str_replace( อาร์เรย์( &, <, > ), อาร์เรย์( &amp, &lt, &gt ), $ตรงกับ[2] ) . $ตรงกับ[3] . $ข้อมูล[3];
}
อื่น {
กลับ $ข้อมูล[1] . str_replace( อาร์เรย์( &, <, > ), อาร์เรย์( &amp, &lt, &gt ), $ข้อมูล[2] ) . $ข้อมูล[3];
}
}
add_filter ( the_content, smart_code_escape_content, 9 );
ฟังก์ชัน smart_code_escape_content( $เนื้อหา ) {
$เนื้อหา = preg_replace_callback(@(<pre.*>)(.*)(<\/ก่อน>) @isU, smart_code_escape_pre, $เนื้อหา );
กลับ $เนื้อหา;
}
ดูดิบ sce.php โฮสต์กับ❤โดย GitHub

ปลั๊กอินที่แท้จริงมีเอกสารรหัสแบบอินไลน์, หากคุณสนใจ ดาวน์โหลดได้จากเก็บข้อมูล และดู. สิ่งแรกที่สังเกตเห็นคือ ว่า ฉันได้เพิ่มตัวกรองเพื่อ the_content. ตัวกรองนี้เรียกฟังก์ชันการเรียกกลับเนื้อหาที่พบระหว่าง <pre> แท็ก.

(ฟังก์ชันการเรียกกลับsmart_code_escape_pre()) จะดูแลการแปลง. ทำการตรวจสอบถ้าจะมีตัดเนื้อหาในการ <code> แท็กแรก. ฉันคิดว่า ฉันจะเพิ่มข้อมูลนี้เพื่อให้แน่ใจว่า ปลั๊กอินไม่ขัดแย้งกับรหัสปลั๊กอินที่มีอยู่เช่นปริซึมหนึ่งกล่าวถึงก่อนหน้านี้. ผมคิดว่าถ้ามีคนเพิ่มรหัสของพวกเขา ด้วยการห่อในแบบ <pre> และ มี <code> แท็กพวกเขาจริงจังรหัสแทรก และมีระบบเป็นเรียบร้อยแล้ว.

ถ้าเนื้อหาของการ <pre> แท็กไม่ได้อยู่ในบล็อกรหัสฟังก์ชันการแทนอักขระพิเศษทั้งหมดกับ HTML ของพวกเขา.

สรุป

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

หากคุณมี บางวิธีการเพิ่มรหัสเว็บไซต์ของคุณแจ้งให้เราทราบในข้อคิดเห็นด้านล่าง.

ทิ้งคำตอบไว้