สอบถามวิธีการใช้งาน plugins prismjs ครับ

พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server

Moderator: mindphp

flook
PHP VIP Members
PHP VIP Members
โพสต์: 3751
ลงทะเบียนเมื่อ: 06/06/2022 9:43 am

สอบถามวิธีการใช้งาน plugins prismjs ครับ

โพสต์ที่ยังไม่ได้อ่าน โดย flook »

สอบถามวิธีการใช้งาน plugins prismjs https://prismjs.com/#plugins

ถ้าต้องการ
  • ส่วนของ เลขบอกบรรทัด
  • ส่วนของ Line Highlighting
  • ส่วนของ การบอกภาษา
มีรูปแบบการเรียกใช้งานอย่างไรครับ
ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

Re: สอบถามวิธีการใช้งาน plugins prismjs ครับ

โพสต์ที่ยังไม่ได้อ่าน โดย Thanapoom1514 »

ไปที่ในส่วนดาวน์โหลดได้เลย https://prismjs.com/download.html
แล้วเลื่อนมาหาคำว่า Plugins
flook เขียน: 31/03/2023 4:11 pm ถ้าต้องการ
  • ส่วนของ เลขบอกบรรทัด
  • ส่วนของ Line Highlighting
  • ส่วนของ การบอกภาษา
มีรูปแบบการเรียกใช้งานอย่างไรครับ
ติ๊กตามที่ต้องการ
JavaScript & jQuery Ajax & Node.JS-1.png
JavaScript & jQuery Ajax & Node.JS-1.png (115.12 KiB) Viewed 1469 times
จากนั้นก็โหลดมาใช้ได้เลยในส่วน js กับ css
JavaScript & jQuery Ajax & Node.JS-1.png
JavaScript & jQuery Ajax & Node.JS-1.png (174.26 KiB) Viewed 1469 times
ส่วนของ Line Highlighting กับ การบอกภาษา
ไปเพิ่มใน class ใน pre เช่น ภาษา html ใช้ class language-markup ครับ

โค้ด: เลือกทั้งหมด

    <link rel="stylesheet" href="prism.css">
    <script src="prism.js"></script>
    <pre class="language-markup" >
    <code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
&lt;access component="com_mexample"&gt;
	&lt;section name="component"&gt;
		&lt;action name="core.admin" title="JACTION_ADMIN" description="JACTION_ADMIN_COMPONENT_DESC" /&gt;
		&lt;action name="core.options" title="JACTION_OPTIONS" description="JACTION_OPTIONS_COMPONENT_DESC" /&gt;
		&lt;action name="core.manage" title="JACTION_MANAGE" description="JACTION_MANAGE_COMPONENT_DESC" /&gt;
		&lt;action name="core.create" title="JACTION_CREATE" description="JACTION_CREATE_COMPONENT_DESC" /&gt;
		&lt;action name="core.delete" title="JACTION_DELETE" description="JACTION_DELETE_COMPONENT_DESC" /&gt;
		&lt;action name="core.edit" title="JACTION_EDIT" description="JACTION_EDIT_COMPONENT_DESC" /&gt;
		&lt;action name="core.edit.state" title="JACTION_EDITSTATE" description="JACTION_EDITSTATE_COMPONENT_DESC" /&gt;
		&lt;action name="core.edit.value" title="JACTION_EDITVALUE" description="JACTION_EDITVALUE_COMPONENT_DESC" /&gt;
	&lt;/section&gt;
&lt;/access&gt;
​</code>
</pre>
ผลที่ได้จะเป็นแบบนี้ครับ
JavaScript & jQuery Ajax & Node.JS-1.png
JavaScript & jQuery Ajax & Node.JS-1.png (181.85 KiB) Viewed 1469 times
กับส่วนของ เลขบอกบรรทัด ก็เพิ่ม class line-numbers ในแท็ก pre

โค้ด: เลือกทั้งหมด

<pre class="language-markup line-numbers" >
    <code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
    &lt;access component="com_mexample"&gt;
        &lt;section name="component"&gt;
            &lt;action name="core.admin" title="JACTION_ADMIN" description="JACTION_ADMIN_COMPONENT_DESC" /&gt;
            &lt;action name="core.options" title="JACTION_OPTIONS" description="JACTION_OPTIONS_COMPONENT_DESC" /&gt;
            &lt;action name="core.manage" title="JACTION_MANAGE" description="JACTION_MANAGE_COMPONENT_DESC" /&gt;
            &lt;action name="core.create" title="JACTION_CREATE" description="JACTION_CREATE_COMPONENT_DESC" /&gt;
            &lt;action name="core.delete" title="JACTION_DELETE" description="JACTION_DELETE_COMPONENT_DESC" /&gt;
            &lt;action name="core.edit" title="JACTION_EDIT" description="JACTION_EDIT_COMPONENT_DESC" /&gt;
            &lt;action name="core.edit.state" title="JACTION_EDITSTATE" description="JACTION_EDITSTATE_COMPONENT_DESC" /&gt;
            &lt;action name="core.edit.value" title="JACTION_EDITVALUE" description="JACTION_EDITVALUE_COMPONENT_DESC" /&gt;
        &lt;/section&gt;
    &lt;/access&gt;
    ​</code>
</pre>
ผลลัพธ์ที่ได้ครับ
JavaScript & jQuery Ajax & Node.JS-1.png
JavaScript & jQuery Ajax & Node.JS-1.png (138.46 KiB) Viewed 1469 times
:gfb:
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 76