Fix issue with _blank urls

Author: codegaze

_posts/2015-08-09-highlighting-ruby-code-in-jekyll.md

@@ -6,15 +6,15 @@ post_description: A few days ago I was trying to write a tutorial about creating
 categories: ["Jekyll"]
 ---
 
-A few days ago I was trying to write a [tutorial](https://codegaze.github.io/2015/08/08/how-to-create-a-dynamic-navigation-menu-in-jekyll/){:target="\_blank"} about creating a simple dynamic menu for Jekyll and I came across a strange problem while I was trying to show and highlight some ruby code.
+A few days ago I was trying to write a [tutorial](/2015/08/08/how-to-create-a-dynamic-navigation-menu-in-jekyll/) about creating a simple dynamic menu for Jekyll and I came across a strange problem while I was trying to show and highlight some ruby code.
 
 Instead of ruby code and html I was getting whitespace and html only.
 
-I reinstalled [pip](https://pip.pypa.io/){:target="\_blank"} and [pygments](https://pygments.org/){:target="\_blank"} to check if something was wrong with my installation but that wasn't the problem.
+I reinstalled [pip](https://pip.pypa.io/) and [pygments](https://pygments.org/) to check if something was wrong with my installation but that wasn't the problem.
 
 After a little research I found out that the problem was that Liquid, the template language Jekyll uses, considered everything inside the curly braces as code to execute.
 
-That thing we call the internet helped me to find out that the solution is another tag called [raw](https://docs.shopify.com/themes/liquid-documentation/tags/theme-tags#raw){:target="\_blank"}.
+That thing we call the internet helped me to find out that the solution is another tag called [raw](https://docs.shopify.com/themes/liquid-documentation/tags/theme-tags#raw).
 
 > **raw**
 > Allows output of Liquid code on a page without being parsed.

eleventy.config.cjs

@@ -5,6 +5,8 @@ const fs = require("fs");
 const postcss = require("postcss");
 const postcssImport = require("postcss-import");
 const postNested = require("postcss-nested");
+const markdownIt = require("markdown-it");
+const markdownItAttrs = require("markdown-it-link-attributes");
 
 module.exports = (eleventyConfig) => {
   eleventyConfig.addPlugin(syntaxHighlight);
@@ -100,6 +102,19 @@ module.exports = (eleventyConfig) => {
     }
   );
 
+  let markdownLib = markdownIt({ html: true, linkify: true }).use(
+    markdownItAttrs,
+    {
+      pattern: /^https?:\/\//, // only external links
+      attrs: {
+        target: "_blank",
+        rel: "noopener noreferrer",
+      },
+    }
+  );
+
+  eleventyConfig.setLibrary("md", markdownLib);
+
   return {
     dir: {
       input: "./",

package-lock.json

@@ -18,6 +18,8 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
+    "markdown-it": "^14.1.0",
+    "markdown-it-link-attributes": "^4.0.1",
     "postcss": "^8.4.49",
     "postcss-import": "^16.1.0",
     "postcss-nested": "^7.0.2"

package.json

@@ -1,6 +1,6 @@
 var staticAssetsCacheName = "StaticAssetsList",
   imageAssetsCacheName = "ImgStaticList",
-  version = "v3:1:31";
+  version = "v3:1:32";
 
 var staticPrimaryAssets = ["/", "/index.css"];