Replace shiki with prismjs

gridsome.config.js

@@ -123,7 +123,7 @@ module.exports = {
       anchorClassName: 'icon icon-link',
       plugins: [
         ['remark-attr'],
-        [ 'gridsome-plugin-remark-shiki', { theme: 'Material-Theme-Palenight', skipInline: true } ],
+        [ '@gridsome/remark-prismjs', { transformInlineCode: false } ],
         ['gridsome-plugin-remark-youtube', {width: '85%', align: 'auto'}],
       ]
     }

package.json

@@ -10,15 +10,16 @@
   "dependencies": {
     "@fullhuman/postcss-purgecss": "1.2.0",
     "@gridsome/plugin-sitemap": "0.2.1",
+    "@gridsome/remark-prismjs": "^0.5.0",
     "@gridsome/source-filesystem": "0.6.2",
     "@gridsome/transformer-remark": "0.6.3",
     "axios": "0.21.2",
     "gridsome": "0.7.22",
-    "gridsome-plugin-remark-shiki": "0.3.0",
     "gridsome-plugin-remark-youtube": "1.0.1",
     "gridsome-plugin-rss": "1.1.0",
     "lodash.pick": "4.4.0",
     "remark-attr": "0.8.3",
+    "shiki": "^0.9.1",
     "vue-fuse": "2.1.0",
     "vue-scrollto": "2.15.0"
   },

src/main.js

@@ -4,6 +4,9 @@
 import DefaultLayout from '~/layouts/Default.vue'
 import VueScrollTo from 'vue-scrollto'
 import VueFuse from 'vue-fuse'
+import 'prismjs/themes/prism.css'
+// Prism default CSS about line numbers
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 
 export default function (Vue, { router, head, isClient }) {
   // Set default layout as a global component