การแทรกโค้ดโปรแกรมเข้าไปในบทความ พร้อมกับแสดงหมายเลขบรรทัด

โพสต์เมื่อวันที่ 5 ตุลาคม 2567

การแทรกโค้ดโปรแกรมเข้ามาในบทความ ไม่ใช่เรื่องยาก เราสามารถเลือกวางเป็น ข้อความปกติ หรือ จะใช้สัญลักษณ์บางอย่างเพื่อแยกระหว่างข้อความธรรมดา และโค้ดโปรแกรมก็ได้

หรือบางเว็บบล็อก อย่างเช่น Medium อาจมีแท็กพิเศษ ที่เอาไว้ให้เราใส่โค้ดเข้าไปได้เลย

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

ดังนั้นในบทความนี้เราจะนำเสนอวิธีการโพสต์โค้ดโปรแกรม แบบแสดงหมายเลขบรรทัด โดยใช้ HTML Scripts ดังนี้

<style>
  pre[class*="language-"] {
    background-color: #f5f5f5 !important; /* บังคับเปลี่ยนสีพื้นหลัง */
    color: #ffffff !important; /* บังคับเปลี่ยนสีข้อความ */
    padding: 15px;
    border-radius: 5px;
  }
</style>

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet"/>

<pre class="line-numbers">
<code class="language-python">
#-------------- START CODE --------------

#--------------- END CODE ---------------
</code>
</pre>

เมื่อผมนำโค้ดนี้ไปใช้ และแทรกโค้ดโปรแกรม Python แบบนี้

from moviepy.editor import VideoFileClip

# นำเข้าไฟล์วิดีโอ
video_clip = VideoFileClip("tmp_vid.mp4")

# ครอปวิดีโอจากจุด (x1, y1) ไปยัง (x2, y2)
cropped_clip = video_clip.crop(x1=620, y1=270, x2=1295, y2=430)

# ตัดช่วงวิดีโอที่ต้องการ (ตั้งแต่ 2 วินาทีถึง 5 วินาที)
subclip = cropped_clip.subclip(2, 5)

# ปรับขนาดวิดีโอให้เหลือ 50% ของขนาดเดิม หากต้องการใช้ขนาดเดิม ตั้งเป็น 1.0
cropped_clip_resized = cropped_clip.resize(1.0)

# บันทึกช่วงวิดีโอที่ตัดเป็นไฟล์ GIF
cropped_clip_resized.write_gif("Link_Preview_Card_with_Hover_Effect.gif", fps=10)

ผลลัพธ์ที่ได้ก็คือ

จะเห็นว่าโค้ดโปรแกรม Python ของเรามีหมายเลขบรรทัดกำกับเอาไว้ทุกบรรทัดแล้ว