add: 名前付きコードブロックに名前を表示するようアップデート

package.json

@@ -27,6 +27,7 @@
     "katex": "^0.16.3",
     "markdown-it": "^13.0.1",
     "markdown-it-anchor": "^8.6.7",
+    "markdown-it-named-code-blocks": "^0.2.0",
     "markdown-it-texmath": "^1.0.0",
     "nuxt": "^2.15.7",
     "nuxt-fontawesome": "^0.4.0",

pages/blog/_id.vue

@@ -154,10 +154,26 @@ export default Vue.extend({
   margin: 0 auto;
 }
 </style>
-<style>
+<style lang="scss">
 .markdown video {
   display: block;
   margin: auto;
   width: 60vw;
 }
+
+.named-fence-block.named-fence-block {
+  position: relative;
+  padding-top: 2em;
+}
+
+.named-fence-filename {
+  position: absolute;
+  top: 0;
+  left: 1em;
+  padding: 0 6px;
+  color: $black;
+  background-color: $light-gray;
+  border-radius: 0 0 4px 4px;
+  opacity: 0.8;
+}
 </style>

plugins/markdownit.js

@@ -3,6 +3,7 @@ import 'katex/dist/katex.min.css'
 import katex from 'katex'
 import tm from 'markdown-it-texmath'
 import anchor from 'markdown-it-anchor'
+import namedCodeBlocks from 'markdown-it-named-code-blocks'
 
 export default ({ app }, inject) => {
   const md = new MarkdownIt({
@@ -32,6 +33,7 @@ export default ({ app }, inject) => {
     katexOptions: { macros: { '\\RR': '\\mathbb{R}' } },
   })
   md.use(anchor, {})
+  md.use(namedCodeBlocks, {})
 
   inject('md', md)
 }