หากคุณเสนอซอฟต์แวร์หรือเคล็ดลับการเขียนโปรแกรมคุณจะต้องแบ่งปันข้อมูลโค้ดอย่างแน่นอน วิธีการแบ่งปันข้อมูลโค้ดนี้สามารถช่วยให้พวกเขาตั้งหลักปฏิบัติได้อย่างรวดเร็ว อย่างไรก็ตามการแชร์โค้ดกับการจัดรูปแบบที่จำเป็นทั้งหมดไม่สามารถทำได้โดยค่าเริ่มต้น ความหมายของการจัดรูปแบบคือการเน้นไวยากรณ์ ถึงกระนั้นก็เป็นสิ่งที่ทำได้ง่ายมาก
โชคดี หากคุณใช้ divi คุณควรรู้ว่ามีวิธีในตัวในการดำเนินการนี้ด้วยตนเอง เพื่อเพิ่มสไตล์ที่กำหนดเองให้กับข้อมูลโค้ดเหล่านี้ นอกจากนี้ยังมีปลั๊กอินและ บริการสารสนเทศ แอพของบุคคลที่สามที่ช่วยลดความซับซ้อนของกระบวนการสร้างตัวอย่างที่สวยงามและใช้งานได้จริงใน Divi
ในบทช่วยสอนนี้ฉันจะแสดงวิธีแชร์ข้อมูลโค้ดใน Divi (ด้วยตนเอง) และฉันจะแสดงวิธีออกแบบบล็อกตัวอย่างด้วย Divi Builder ซึ่งจะนำคุณไปสู่อีกระดับ
การสำรวจ
นี่คือภาพรวมของการออกแบบตัวอย่างข้อมูลที่เป็นไปได้ในบทช่วยสอนนี้
กล่องข้อมูลโค้ดที่มีข้อมูลโค้ดเพิ่มโหมดแมนนวล
สิ่งที่จำเป็นต้องมีสำหรับบทช่วยสอน
สำหรับบทช่วยสอนนี้ สิ่งที่คุณต้องมีคือ ธีม Divi, ติดตั้งและใช้งานอยู่ เราจะสร้างตัวอย่างโค้ดตั้งแต่เริ่มต้นโดยใช้ Divi Builder ในหน้าใหม่
ในการเริ่มต้นให้สร้างเพจใหม่และปรับใช้ Divi Builder บนอินเทอร์เฟซสาธารณะ จากนั้นเลือกตัวเลือก "สร้างตั้งแต่ต้น"
ตอนนี้คุณพร้อมที่จะไป!
การออกแบบกล่องส่วนบุคคลสำหรับข้อมูลโค้ดบน Divi
เนื่องจากข้อมูลโค้ดของเราอยู่ในโมดูลข้อความเราจึงสามารถใช้ตัวสร้าง Divi เพื่อเพิ่มองค์ประกอบการออกแบบลงในโมดูลข้อความ (และรอบ ๆ ) สำหรับการออกแบบนี้เราจะใช้โมดูลสรุปเพื่อใช้เป็นป้ายกำกับสำหรับข้อมูลโค้ด ต่อไปเราจะจัดรูปแบบและวางเคอร์เซอร์ทางด้านซ้ายของโมดูลข้อความ ต่อไปเราจะจัดรูปแบบโมดูลข้อความของข้อมูลโค้ดของเรา
การสร้างส่วนแถวและคอลัมน์
ก่อนอื่นเราต้องสร้างส่วนใหม่ด้วยแถวของคอลัมน์
จากนั้นอัพเดตพารามิเตอร์บรรทัดดังนี้:
ความกว้างของรางน้ำ: 1
ช่องว่างภายในที่กำหนดเอง: 0px ที่ด้านบน, 0px ที่ด้านล่าง
เพิ่มโมดูลข้อความ
จากนั้นเพิ่มโมดูลข้อความลงในบรรทัด
คุณสามารถออกจาก เนื้อหา โดยค่าเริ่มต้น. เราจะเพิ่มข้อมูลโค้ด WordPress ของเราในภายหลัง ในตอนนี้ เรามาสร้างโมเดลโมดูลข้อความด้วยการอัพเดตพารามิเตอร์ข้อความต่อไปนี้:
สีพื้นหลัง: # eff0f1 สีข้อความ: # 000000 ระยะขอบที่กำหนดเอง: 60px ซ้ายช่องว่างที่กำหนดเอง: ด้านบน 3%, ด้านล่าง 3%, ซ้าย 3%, ด้านขวา 3%
ความกว้างของเส้นขอบด้านบน: 10px สีของเส้นขอบด้านบน: # 7cda24
การสร้างป้ายกำกับข้อมูลโค้ด
ในการสร้างป้ายกำกับตัวอย่างเราจะใช้โมดูลการแจ้งเตือน วิธีนี้จะช่วยให้คุณสามารถเพิ่มไอคอนข้อความนำเสนอ (หรือไอคอนรูปภาพที่กำหนดเอง) ถัดจากภาษารหัสที่แสดง
สร้างโมดูลการนำเสนอแล้วลากไปไว้เหนือโมดูลข้อความ จากนั้นอัปเดตการตั้งค่าการนำเสนอต่อไปนี้:
ชื่อเรื่อง: css เนื้อหา: [ลบเนื้อหาที่เป็นเท็จ] ใช้ไอคอน: ใช่ไอคอน: ดูภาพหน้าจอ
จากนั้นอัพเดตพารามิเตอร์การออกแบบดังนี้:
สีพื้นหลัง: # 1b2426 สีไอคอน: # 7cda24 ตำแหน่งรูปภาพ / ไอคอน: ซ้ายขนาดตัวอักษร: 20px ชื่อข้อความสี: #ffffff ขนาดตัวอักษรชื่อเรื่อง: 16px
ความสูงของบรรทัดชื่อเรื่อง: 1.3em Width: 100px Custom Margin: -44px Bottom, -50px Left Custom Padding: 10px Top, 2px Bottom, 15px Left, 15px Right
ทำซ้ำส่วนเพื่อสร้างการออกแบบกล่องตัวอย่างเพิ่มเติม
สิ่งนี้สนับสนุนการออกแบบกล่องรหัสแรกของเรา ตอนนี้เราต้องทำซ้ำส่วนที่มีการออกแบบบล็อกโค้ดและอัปเดตฉลากและสีเพื่อสร้างบล็อกโค้ดใหม่สำหรับภาษาการเข้ารหัสอื่น แน่นอนว่านี่เป็นทางเลือก แต่ถ้าคุณวางแผนที่จะเพิ่มส่วนย่อยที่แตกต่างกันในหน้าเว็บจะช่วยให้มีโทนสีที่แตกต่างกันสำหรับแต่ละหน้า
ตัวอย่างเช่นทำซ้ำส่วนและเปิดการตั้งค่าโมดูล Blurb
อัปเดตชื่อเป็น "js" สำหรับ Javascript
จากนั้นคลิกขวาที่ Image / Icon Color และเลือก Find and Replace
อัปเดตตัวเลือกการค้นหาและการแทนที่:
ใน: ส่วนนี้แทนที่ด้วย: [สีใหม่] แทนที่ทั้งหมด: เลือกแทนที่ค่าทั้งหมดที่พบ
ตอนนี้คุณมีบล็อกข้อมูลโค้ดใหม่สำหรับตัวอย่าง JS
นี่คือตัวอย่างของกล่องข้อมูลโค้ดสำหรับประเภทโค้ดยอดนิยมสำหรับ WordPress
การใช้ปลั๊กอิน Prettify Code เพื่อเพิ่มการเน้นไวยากรณ์ให้กับข้อมูลโค้ดแบบแมนนวล
มันเป็นความจริงที่ว่าด้วยวิธีการด้วยตนเองคุณสามารถวางข้อความและผ่านได้ทันที Prettify Code plugin จะเพิ่มโค้ดที่ไฮไลต์ลงในแท็ก "pre" ทั้งหมดทันที ความสวยงามของปลั๊กอินนี้คือไม่จำเป็นต้องมีการปรับแต่งใด ๆ สิ่งที่คุณต้องทำคือดาวน์โหลดและเปิดใช้งานปลั๊กอิน
นี่คือตัวอย่างของรหัสที่จะมีลักษณะด้วย Active Prettify Code
รหัส Prettify มา จาก Google และยังใช้เพื่อปรับแต่งตัวอย่างที่ยอดเยี่ยมเหล่านั้นทั้งหมด stackoverflow.com.
เพื่อเสร็จสิ้น
การดูข้อมูลโค้ดบน Divi ไม่จำเป็นต้องเป็นเรื่องยาก การเพิ่มตัวอย่างข้อมูลด้วยตนเองโดยใช้แท็กโค้ดก่อนและ Word ที่ WordPress จัดเตรียมไว้ให้จะทำงานสำหรับส่วนย่อยที่ไม่ใช่ html ส่วนใหญ่ แต่คุณต้องเรียกใช้ข้อมูลโค้ดผ่านตัวเข้ารหัสก่อน html ให้แน่ใจ นอกจากนี้คุณสามารถปรับแต่งรูปแบบข้อความตัวอย่างเพิ่มเติมได้โดยใช้การตั้งค่าโมดูลข้อความ และอย่าลืม Code Prettify เพื่อเพิ่มไฮไลต์ให้กับตัวอย่างคู่มือของคุณ
สำหรับผู้ที่แชร์ตัวอย่างข้อมูลเป็นประจำการใช้ปลั๊กอิน SyntaxHighlighter น่าจะเป็นทางออกที่ดีที่สุดของคุณ ไม่ว่าจะด้วยวิธีใดคุณจะมีตัวเลือกในการเพิ่มการออกแบบที่สร้างสรรค์ให้กับตัวอย่างของคุณโดยใช้ Divi Builder
Bonne โอกาส