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

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

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

การสำรวจ

นี่คือภาพรวมของการออกแบบตัวอย่างข้อมูลที่เป็นไปได้ในบทช่วยสอนนี้

กล่องข้อมูลโค้ดที่มีข้อมูลโค้ดเพิ่มโหมดแมนนวล

สามารถดูตัวอย่างโค้ดได้ด้วย Diviสิ่งที่จำเป็นต้องมีสำหรับบทช่วยสอน

สำหรับบทช่วยสอนนี้ สิ่งที่คุณต้องมีคือ ธีม Divi, ติดตั้งและใช้งานอยู่ เราจะสร้างตัวอย่างโค้ดตั้งแต่เริ่มต้นโดยใช้ Divi Builder ในหน้าใหม่

ในการเริ่มต้นให้สร้างเพจใหม่และปรับใช้ Divi Builder บนอินเทอร์เฟซสาธารณะ จากนั้นเลือกตัวเลือก "สร้างตั้งแต่ต้น"

ตอนนี้คุณพร้อมที่จะไป!

การออกแบบกล่องส่วนบุคคลสำหรับข้อมูลโค้ดบน Divi

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

การสร้างส่วนแถวและคอลัมน์

ก่อนอื่นเราต้องสร้างส่วนใหม่ด้วยแถวของคอลัมน์

คอลัมน์มีแถว Divi

จากนั้นอัพเดตพารามิเตอร์บรรทัดดังนี้:

ความกว้างของรางน้ำ: 1
ช่องว่างภายในที่กำหนดเอง: 0px ที่ด้านบน, 0px ที่ด้านล่าง

แก้ไขพารามิเตอร์บรรทัด diviเพิ่มโมดูลข้อความ

จากนั้นเพิ่มโมดูลข้อความลงในบรรทัด

โมดูลข้อความ Divi 1คุณสามารถออกจาก เนื้อหา โดยค่าเริ่มต้น. เราจะเพิ่มข้อมูลโค้ด WordPress ของเราในภายหลัง ในตอนนี้ เรามาสร้างโมเดลโมดูลข้อความด้วยการอัพเดตพารามิเตอร์ข้อความต่อไปนี้:

สีพื้นหลัง: # eff0f1 สีข้อความ: # 000000 ระยะขอบที่กำหนดเอง: 60px ซ้ายช่องว่างที่กำหนดเอง: ด้านบน 3%, ด้านล่าง 3%, ซ้าย 3%, ด้านขวา 3%

การตั้งค่าพารามิเตอร์โมดูลข้อความ Divi

ความกว้างของเส้นขอบด้านบน: 10px สีของเส้นขอบด้านบน: # 7cda24

การตั้งค่าข้อความเส้นขอบการสร้างป้ายกำกับข้อมูลโค้ด

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

สร้างโมดูลการนำเสนอแล้วลากไปไว้เหนือโมดูลข้อความ จากนั้นอัปเดตการตั้งค่าการนำเสนอต่อไปนี้:

ชื่อเรื่อง: css เนื้อหา: [ลบเนื้อหาที่เป็นเท็จ] ใช้ไอคอน: ใช่ไอคอน: ดูภาพหน้าจอ

โมดูลข้อความ Divi ที่ปรับเปลี่ยนจากนั้นอัพเดตพารามิเตอร์การออกแบบดังนี้:

สีพื้นหลัง: # 1b2426 สีไอคอน: # 7cda24 ตำแหน่งรูปภาพ / ไอคอน: ซ้ายขนาดตัวอักษร: 20px ชื่อข้อความสี: #ffffff ขนาดตัวอักษรชื่อเรื่อง: 16px

แจ้งการตั้งค่าโมดูล Divi

ความสูงของบรรทัดชื่อเรื่อง: 1.3em Width: 100px Custom Margin: -44px Bottom, -50px Left Custom Padding: 10px Top, 2px Bottom, 15px Left, 15px Right

การตั้งค่าโมดูลการแจ้งเตือน Css

ทำซ้ำส่วนเพื่อสร้างการออกแบบกล่องตัวอย่างเพิ่มเติม

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

ตัวอย่างเช่นทำซ้ำส่วนและเปิดการตั้งค่าโมดูล Blurb

อัปเดตชื่อเป็น "js" สำหรับ Javascript

จากนั้นคลิกขวาที่ Image / Icon Color และเลือก Find and Replace

ทำซ้ำส่วน Diviอัปเดตตัวเลือกการค้นหาและการแทนที่:

ใน: ส่วนนี้แทนที่ด้วย: [สีใหม่] แทนที่ทั้งหมด: เลือกแทนที่ค่าทั้งหมดที่พบ

ตอนนี้คุณมีบล็อกข้อมูลโค้ดใหม่สำหรับตัวอย่าง JS

นี่คือตัวอย่างของกล่องข้อมูลโค้ดสำหรับประเภทโค้ดยอดนิยมสำหรับ WordPress

เพิ่มข้อมูลโค้ด Diviการใช้ปลั๊กอิน Prettify Code เพื่อเพิ่มการเน้นไวยากรณ์ให้กับข้อมูลโค้ดแบบแมนนวล

มันเป็นความจริงที่ว่าด้วยวิธีการด้วยตนเองคุณสามารถวางข้อความและผ่านได้ทันที Prettify Code plugin จะเพิ่มโค้ดที่ไฮไลต์ลงในแท็ก "pre" ทั้งหมดทันที ความสวยงามของปลั๊กอินนี้คือไม่จำเป็นต้องมีการปรับแต่งใด ๆ สิ่งที่คุณต้องทำคือดาวน์โหลดและเปิดใช้งานปลั๊กอิน

นี่คือตัวอย่างของรหัสที่จะมีลักษณะด้วย Active Prettify Code

รหัส Prettfy ในการดำเนินการรหัส Prettify มา จาก Google และยังใช้เพื่อปรับแต่งตัวอย่างที่ยอดเยี่ยมเหล่านั้นทั้งหมด stackoverflow.com.

เพื่อเสร็จสิ้น

การดูข้อมูลโค้ดบน Divi ไม่จำเป็นต้องเป็นเรื่องยาก การเพิ่มตัวอย่างข้อมูลด้วยตนเองโดยใช้แท็กโค้ดก่อนและ Word ที่ WordPress จัดเตรียมไว้ให้จะทำงานสำหรับส่วนย่อยที่ไม่ใช่ html ส่วนใหญ่ แต่คุณต้องเรียกใช้ข้อมูลโค้ดผ่านตัวเข้ารหัสก่อน html ให้แน่ใจ นอกจากนี้คุณสามารถปรับแต่งรูปแบบข้อความตัวอย่างเพิ่มเติมได้โดยใช้การตั้งค่าโมดูลข้อความ และอย่าลืม Code Prettify เพื่อเพิ่มไฮไลต์ให้กับตัวอย่างคู่มือของคุณ

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

Bonne โอกาส