Syntax Highligh วิธีการแสดงโค้ดในหน้าเว็บ

Syntax Highlight คืออะไร?

ก็คือการแสดงโค้ดโปรแกรม ให้มันดูต่างจากตัวหนังสือ หรือข้อความธรรมดาที่เราเขียนบนเว็บนั่นแหละครับ ถ้าใครอ่านบนทความอื่นๆ ของผม ก็จะเห็นส่วนที่เป็นโค้ด ซึ่งต่างจากส่วนข้อความธรรมดาอย่างชัดเจน นั่แหละครับคือ Syntax Highlight

การทำ Syntax Highlight ทำได้หลายวิธีครับ ส่วนมากก็จะเป็นการใช้งาน javascript ฟรีต่างๆ ที่ปล่อยให้ใช้กัน ซึ่งมันจะมีปัญหาอยู่อย่างหนึ่งคือ มันจะทำให้หน้าเว็บเราโหลดช้าลง และวันดีคืนดี เกิดผู้ให้บริการเขาปิดบริการไปละ Syntax Highlight ทั้งหมดที่เราทำไว้ ก็เจ้งสิครับ

หาไปหามา เลยมาเจอเว็บนี้ครับ ตอบโจทย์ได้ดีเลยทีเดียว แถมใช้งานง่ายมาก

https://tohtml.com/matlab/

ผลลัพธ์ที่ได้ จะเป็นโค้ด HTML ที่ฝังลงไปในหน้าเว็บเลยครับ ไม่จำเป็นต้องไปเพิ่ม javascript ให้ยุ่งยาก ซึ่งหมายความว่าโค้ดชุดนี้จะอยู่บนหน้าเว็บเราตลอดไป ไม่หายไปไหนแน่นอน


วิธีการใช้งานก็ง่ายมากครับ copy โค้ดของเรามาวางในช่อง Source code แล้วคลิกที่ปุ่ม Highlight จากนั้นคลิกปุ่ม Copy to clipboard เพื่อ copy HTML code แล้วเอามาวางในหน้าเว็บของเรา แค่นี้ก็เสร็จเรียบร้อยครับ

ความเห็น

โพสต์ยอดนิยมจากบล็อกนี้

การแก้สมการ Differential ด้วย MATLAB

รูปภาพ
ถ้าใครเรียนด้านวิศวกรรม หรือ วิทย์คณิต หรือ ฟิสิกส์ ผมเชื่อว่าทุกคนคงจะเคยเจอสมการพวกนี้แน่นอน และสมการพวกนี้ก็จะยิ่งยุ่งยากซับซ้อนขึ้นไปเรื่อยๆ จนเราไม่สามารถแก้สมการด้วยมือได้ ยกตัวอย่างเช่น สมการของ error ฟังก์ชัน ถ้าใครจำได้สมัยเรียนอาจารย์จะแจกเป็นตารางมาให้เลย โดยที่เราไม่ต้องแก้สมการนี้ด้วยตัวเอง แต่เวลาเราใช้งานจริงๆ นั้น ไม่มีใครไปนั่งแก้สมการให้เสียเวลาหรอกครับ เพราะมันเสียเวลา และไม่รู้ว่าคำตอบที่ได้ออกมาจะถูกรึเปล่า ดังนั้นในการทำงาน หรือการทำวิจัย เราจะใช้ MATLAB เข้ามาช่วยแก้ปัญหาพวกนี้ให้แทนครับ ตัวอย่างเช่น ผมมีสมการ differential ที่ต้องการแก้อยู่ 3 สมการ ดังนี้ dy1/dt = y2*y3 dy2/dt = -y1*y3 dy3/dt = -0.51*y1*y2 โดยมีค่าเริ่มต้น (initial condition) ดังนี้ y1(0) = 0 y2(0) = 1 y3(0) = 1 ปกติแล้วค่าเริ่มต้นจะเป็นค่าใดก็ได้ เราแค่สุ่มเลือกมาใช้ก็พอ แต่....ก็ไม่ใช่ว่าทุกค่าจะใช้ได้ ซึ่งจริงๆ มันก็มีวิธีการเช็คว่าค่าไหนใช้ได้หรือไม่ได้ แต่ผมแนะนำให้เช็คด้วยการทดสอบจริงเลยง่ายกว่าครับ ค่าเริ่มต้นที่ไม่เหมาะสม จะทำให้สมการหาคำตอบไม่ได้ หรือคำตอบผิดเพี้ยน...
อ่านเพิ่มเติม

การหาค่าเฉลี่ยโดยไม่ต้องเก็บค่า

รูปภาพ
ทุกคนคงทราบอยู่แล้วว่าวิธีการหาค่าเฉลี่ยคือ เอาค่าทั้งหมดมาบวกกัน แล้วหารด้วยจำนวนทั้งหมด ดังสมการนี้ Avr = sum(X)/length(X) แต่ในทางปฎิบัติ เราสามารถเก็บค่าได้จำกัด เพราะว่าในขณะที่โปรแกรมกำลังทำงานอยู่ ข้อมูลในตัวแปรทุกตัวจะถูกเก็บเอาไว้ที่ RAM ซึ่งคอมทุกเครื่องมี RAM จำนวนจำกัด ดังนั้นหากเราเก็บข้อมูลไว้ในตัวแปรเยอะเกินไป ก็จะทำให้พื้นที่ RAM ไม่พอใช้งาน ซึ่งจะทำให้คอมพิวเตอร์ค้างได้ ถ้าเราไม่เก็บข้อมูลทุกตัวเอาไว้ แล้วเราจะคำนวณค่าเฉลี่ยได้ยังไงล่ะ? หลายๆ คนอาจจะกำลังคิดว่าน่าจะคำนวณแบบนี้ ค่าเฉลี่ย = (ค่าใหม่ + ค่าเก่า)/2 อย่างเช่น ค่าเฉลี่ยระหว่าง 1 กับ 2 ค่าเฉลี่ย = (2 + 1)/2 = 1.5 คำตอบก็ถูกต้อง วิธีนี้น่าจะใช้ได้นะ แต่มันใช้ได้จริงรึเปล่า เราลองมาทดสอบกับตัวอย่างอื่นดู เช่น ค่าเฉลี่ยระหว่าง 1 , 2 และ 3 AV1 = (1+2)/2 = 1.5 AV2 = (AV1+3)/2 = 2.25 จะเห็นว่าผลลัพธ์ไม่ถูกต้อง เพราะ AV = (1+2+3)/3 = 2 ดังนั้นวิธีการแบบนี้จึงใช้ไม่ได้ แล้ววิธีการที่ถูกต้องควรจะทำยังไงละ มาดูกันเลยครับ AV = AV - (AV/N) AV = AV + (X/N) โ...
อ่านเพิ่มเติม

การเปรียบเทียบข้อมูล

รูปภาพ
การเปรียบเทียบข้อมูล มักจะถูกนำมาใช้เป็นเงื่อนไขในโปรแกรมเสมอ แต่ก็เป็นเรื่องที่มือใหม่มักจะทำผิดเสมอเช่นกัน ปกติแล้วคนชอบทำผิดการตรงไหน? สมมุติว่าคุณต้องการเปรียบเทียบว่า A เท่ากับ B หรือไม่ สิ่งแรกที่ทุกคนนึกถึง ก็คงจะเป็นเครื่องหมาย "A==B" (ใช้เท่ากับ 2 ตัว เพื่อเปรียบเทียบความเท่ากัน) แต่หลายๆ คนกลับลืมไปว่า ข้อมูลในโปรแกรมไม่ได้มีชนิดเดียว มันมีทั้งตัวเลข และตัวอักษร และใน MATLAB เวอร์ชั่นใหม่ (ตั้งแต่ 2016b ขึ้นมา) MATLAB ได้แบ่งประเภทข้อมูลตัวอักษรออกเป็น 2 แบบ ซึ่งทำให้การใช้งานข้อมูลประเภทตัวอักษรทำได้ง่ายขึ้น แล้ววิธีการเปรียบเทียบตัวเลข กับวิธีการเปรียบเทียบตัวอักษร ต่างกันอย่างไร? คำตอบคือ ต่างกันที่ผลลัพธ์ครับ เช่น การเปรียบเทียบระหว่างตัวเลข เราสามารถใช้เครื่องหมายเปรียบเทียบพวกนี้ได้ เครื่องหมาย ความหมาย ตัวอย่าง >  มากกว่า A>5 <  น้อยกว่า B<12 >= มากกว่าเท่ากับ C>=9 <= น้อยกว่าเท่ากับ D<=26 == เท่ากันกับ A==B ~= ...
อ่านเพิ่มเติม