usar markdown-it en vez de commonmark

package.json

@@ -11,8 +11,9 @@
   },
   "dependencies": {
     "@ibm/plex": "^4.0.2",
-    "commonmark": "^0.29.1",
     "date-fns": "^2.9.0",
+    "markdown-it": "^10.0.0",
+    "markdown-it-link-attributes": "^3.0.0",
     "serviceworker-webpack-plugin": "^1.0.1",
     "vue": "2.6.11",
     "vue-router": "^3.1.5",

pnpm-lock.yaml

 dependencies:
   '@ibm/plex': 4.0.2
-  commonmark: 0.29.1
   date-fns: 2.9.0
+  markdown-it: 10.0.0
+  markdown-it-link-attributes: 3.0.0
   serviceworker-webpack-plugin: 1.0.1_webpack@4.41.6
   vue: 2.6.11
   vue-router: 3.1.5
@@ -362,7 +363,6 @@ packages:
   /argparse/1.0.10:
     dependencies:
       sprintf-js: 1.0.3
-    dev: true
     resolution:
       integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
   /arr-diff/4.0.0:
@@ -1059,16 +1059,6 @@ packages:
   /commondir/1.0.1:
     resolution:
       integrity: sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
-  /commonmark/0.29.1:
-    dependencies:
-      entities: 1.1.2
-      mdurl: 1.0.1
-      minimist: 1.2.0
-      string.prototype.repeat: 0.2.0
-    dev: false
-    hasBin: true
-    resolution:
-      integrity: sha512-DafPdNYFXoEhsSiR4O+dJ45UJBfDL4cBTks4B+agKiaWt7qjG0bIhg5xuCE0RqU71ikJcBIf4/sRHh9vYQVF8Q==
   /compare-versions/3.6.0:
     dev: true
     resolution:
@@ -1729,10 +1719,10 @@ packages:
     resolution:
       integrity: sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==
   /entities/1.1.2:
+    dev: true
     resolution:
       integrity: sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
   /entities/2.0.0:
-    dev: true
     resolution:
       integrity: sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
   /errno/0.1.7:
@@ -3184,6 +3174,12 @@ packages:
     dev: true
     resolution:
       integrity: sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+  /linkify-it/2.2.0:
+    dependencies:
+      uc.micro: 1.0.6
+    dev: false
+    resolution:
+      integrity: sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==
   /load-json-file/1.1.0:
     dependencies:
       graceful-fs: 4.2.3
@@ -3331,6 +3327,21 @@ packages:
       node: '>=0.10.0'
     resolution:
       integrity: sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
+  /markdown-it-link-attributes/3.0.0:
+    dev: false
+    resolution:
+      integrity: sha512-B34ySxVeo6MuEGSPCWyIYryuXINOvngNZL87Mp7YYfKIf6DcD837+lXA8mo6EBbauKsnGz22ZH0zsbOiQRWTNg==
+  /markdown-it/10.0.0:
+    dependencies:
+      argparse: 1.0.10
+      entities: 2.0.0
+      linkify-it: 2.2.0
+      mdurl: 1.0.1
+      uc.micro: 1.0.6
+    dev: false
+    hasBin: true
+    resolution:
+      integrity: sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==
   /md5.js/1.3.5:
     dependencies:
       hash-base: 3.0.4
@@ -5212,7 +5223,6 @@ packages:
     resolution:
       integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
   /sprintf-js/1.0.3:
-    dev: true
     resolution:
       integrity: sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
   /sshpk/1.16.1:
@@ -5323,10 +5333,6 @@ packages:
       node: '>=6'
     resolution:
       integrity: sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
-  /string.prototype.repeat/0.2.0:
-    dev: false
-    resolution:
-      integrity: sha1-q6Nt4I3O5qWjN9SbLqHaGyj8Ds8=
   /string.prototype.trimleft/2.1.1:
     dependencies:
       define-properties: 1.1.3
@@ -5641,6 +5647,10 @@ packages:
   /typedarray/0.0.6:
     resolution:
       integrity: sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+  /uc.micro/1.0.6:
+    dev: false
+    resolution:
+      integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
   /uglify-js/3.4.10:
     dependencies:
       commander: 2.19.0
@@ -6233,7 +6243,6 @@ specifiers:
   buble: ^0.19.8
   buble-loader: ^0.5.1
   cache-loader: ^4.1.0
-  commonmark: ^0.29.1
   compression-webpack-plugin: ^3.1.0
   copy-webpack-plugin: ^5.1.1
   css-loader: ^3.4.2
@@ -6242,6 +6251,8 @@ specifiers:
   file-loader: ^4.3.0
   html-webpack-plugin: ^3.2.0
   husky: ^4.2.3
+  markdown-it: ^10.0.0
+  markdown-it-link-attributes: ^3.0.0
   node-sass: ^4.13.1
   prettier: 1.19.1
   pretty-quick: ^2.0.1

src/components/Markdown.vue

@@ -3,17 +3,24 @@
 </template>
 
 <script>
-import commonmark from 'commonmark'
+import markdownit from 'markdown-it'
+import mila from 'markdown-it-link-attributes'
 
-const reader = new commonmark.Parser()
-const writer = new commonmark.HtmlRenderer({ safe: true })
+const md = markdownit({
+  linkify: true,
+}).use(mila, {
+  attrs: {
+    target: '_blank',
+    rel: 'noopener noreferer',
+  },
+})
 
 export default {
   name: 'Markdown',
   props: ['markdown'],
   computed: {
     markdownHtml() {
-      return writer.render(reader.parse(this.markdown))
+      return md.render(this.markdown)
     },
   },
 }