การแก้ไขปัญหา Markdown ไม่สามารถสร้างลิงค์ new tab หรือ window ได้

การทำลิงค์ในเว็บไซต์ เมื่อมีการคลิกที่ลิงค์ ก็จะแสดงหน้าเพจขึ้นมาแสดง และไม่แสดงในแท๊บใหม่ หรือเปิดหน้าต่างใหม่ เป็นค่าเริ่มต้นปกติ ถ้าต้องการให้แสดงในแท๊บใหม่ หรือเปิดหน้าต่างใหม่ ต้องมีการเขียนโค้ด HTML ตามโค้ดด้านล่างนี้

<a href="http://www.google.com/" target="_blank">Hello, world!</a>

ถ้าผู้พัฒนาเว็บไซต์มีการใช้ Markdown ตามมาตรฐาน Markdown Basic Syntax ณ ตอนนี้ยังไม่รองรับ new tab or window จึงเป็นป้ญหาสำหรับผู้พัฒนาเว็บไซต์ที่นำ Markdown มาใช้งาน จึงเป็นที่มาของโพสต์นี้ ที่ต้องการแชร์ และเป็นการช่วยเหลือนักพัฒนาเว็บไซต์อีกทางหนึ่ง

เราสามารถเขียนโค้ดใน Markdown ได้เหมือนกับการเขียนโค้ด HTML ตามปกติ ตัวอย่างโค้ดด้านล่างนี้

<a href="http://www.google.com/" target="_blank">Hello, world!</a>

ถ้าเรามีความรู้ด้านการเขียนโค้ด HTML มาบ้างก็คงไม่เป็นปัญหาอะไร แต่ผู้ใช้งานส่วนใหญ่เป็นผู้ใช้งานที่ไม่มีความรู้ด้านนี้ มาก่อน มีวิธีที่ไม่ต้องเขียนโค้ด HTML เอง โดยนำความสามารถของ Javascript (jQuery) มาใช้งาน สามารถแก้ไขปัญหา Markdown ไม่สามารถสร้างลิงค์ new tab หรือ window ได้ แสดงตัวอย่างโค้ดด้านล่างนี้

<script>
$(document.links).filter(function() {
  return this.hostname != window.location.hostname;
}).attr('target', '_blank');
</script>

จากโค้ดด้านล่าง เราสามารถกำหนดเพิ่มเติมได้ว่า ชื่อเว็บ หรือโดเมนไหน ที่เราไม่ต้องการให้แสดงหน้าเว็บไซต์ในแท๊บใหม่ หรือ หน้าต่างใหม่ สามารถกำหนดได้มากกว่าหนึ่งโดเมน

<script>
$(document).ready(function() {
   $("a[href^=http]").each(function(){
      var excluded = ['example.com', 'myblog.com']; //whitelist
      for(i=0; i<excluded.length; i++) {
         if(this.href.indexOf(excluded[i]) != -1) {
            return true;
         }
      }
      if(this.href.indexOf(location.hostname) == -1) {
           $(this).click(function() { return true; }); 
           $(this).attr({
               target: "_blank",
               title: "Opens in a new tab or window"
           });
           $(this).click();
      }
   })
});
</script>

แต่โจทย์ของผู้เขียนคือ ต้องการให้คลิกลิงค์แล้วขึ้นหน้าแท๊บใหม่ เฉพาะในส่วนของเนื้อหาที่โพสต์ ทั้งลิงค์ภายในเว็บ หรือภายนอกเว็บ ต้องมีการปรับจาวาสคริปอีกเล็กน้อย ตามตัวอย่างโค้ดด้านล่าง

<!DOCTYPE html>
<html>
<head>
<title>Webmasty.com</title>
</head>
<body>
<h1>Webmasty.com</h1>
<div class="description"><a href="https://www.webmasty.com">go to Webmasty.com</a> 
<a href="https://www.foundthemes.com">go to External link</a></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var content = $('.description a');
content.filter(function() {
    return this.hostname == window.location.hostname || this.hostname != window.location.hostname;
}).attr('target', '_blank');
});
</script>
</body>
</html>

Output

go to Webmasty.com

go to External link

แต่ยังมี Markdown อีกตัวนึงที่บอกว่าสามารถสร้าง new tap ได้ ชื่อว่า kramdown แต่ผู้เขียนก็ยังไม่ได้ทดสอบ ถ้าได้ไปทดลองแล้วเวิร์คจะมาแชร์ให้ทราบกันอีกทีครับ

kramdown ตัวอย่างการนำมาใช้งาน

[link](url){:target="_blank"}

<a href="https://www.webmasty.com/" target="_blank">Hello, world!</a>

ผู้เขียนหวังว่าคงจะมีประโยชน์แก่ผู้อ่านได้พอสมควร