feat(nuxt-styleguide-renderer-default): add markup highlighting

by using prism.js for code blocks.

fixes #15

packages/nuxt-styleguide-renderer-default/component/CodeBlock.vue

@@ -0,0 +1,27 @@
+<template>
+  <Prism :language="language">
+    <slot />
+  </Prism>
+</template>
+
+<style>
+@import 'prismjs/themes/prism.css';
+</style>
+
+<script>
+import 'prismjs'
+import Prism from 'vue-prism-component'
+
+export default {
+  name: 'CodeBlock',
+  components: {
+    Prism,
+  },
+  props: {
+    language: {
+      type: String,
+      default: 'html',
+    },
+  },
+}
+</script>

packages/nuxt-styleguide-renderer-default/component/CodeView.vue

@@ -1,14 +1,15 @@
 <template>
-  <div><pre><code>{{ code }}</code></pre></div>
+  <div><code-block language="html">{{ code }}</code-block></div>
 </template>
 
-<style>
-</style>
-
 <script>
 import pretty from 'pretty'
+import CodeBlock from './CodeBlock.vue'
 
 export default {
+  components: {
+    CodeBlock,
+  },
   props: {
     comp: {
       type: Object,

packages/nuxt-styleguide-renderer-default/component/Component.vue

@@ -1,7 +1,7 @@
 <template>
   <sg-frame>
     <h1>{{ name }}</h1>
-    <pre><code>import {{ importName }} from '{{ importPath }}';</code></pre>
+    <code-block language="js">import {{ importName }} from '{{ importPath }}';</code-block>
     <h2>Demo:</h2>
     <div
       v-for="(state) in states"
@@ -106,13 +106,21 @@
 
 <script>
 import CodeView from './CodeView.vue'
+import CodeBlock from './CodeBlock.vue'
 import SgComponentDemo from './ComponentDemo.vue'
 import SgStyleguideNav from '../nav/nav.vue'
 import SgFrame from '../frame.vue'
 import SgTags from './Tags.vue'
 
 export default {
-  components: { SgStyleguideNav, SgTags, SgFrame, SgComponentDemo, CodeView },
+  components: {
+    SgStyleguideNav,
+    SgTags,
+    SgFrame,
+    SgComponentDemo,
+    CodeView,
+    CodeBlock,
+  },
   props: {
     Comp: { type: Object, default: null },
     name: { type: String, default: null },

packages/nuxt-styleguide-renderer-default/designTokens.vue

@@ -3,7 +3,7 @@
     <h1>{{ name }}</h1>
     <div v-html="description" />
     <sg-tags :tags="tags" />
-    <pre><code>@import "{{ importPath }}";</code></pre>
+    <code-block language="css">@import "{{ importPath }}";</code-block>
 
     <sg-color-demo
       v-if="colors.length"
@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import CodeBlock from './component/CodeBlock.vue'
 import SgTags from './component/Tags.vue'
 import SgColorDemo from './component/ColorDemo.vue'
 import SgDefaultDtDemo from './component/SgDefaultDtDemo.vue'
@@ -39,6 +40,7 @@ import SgFrame from './frame.vue'
 
 export default {
   components: {
+    CodeBlock,
     SgTags,
     SgFrame,
     SgColorDemo,

packages/nuxt-styleguide-renderer-default/frame.vue

@@ -140,7 +140,7 @@ code {
   background: $grey;
   border-radius: 1px;
   padding: 0 0.3em;
-  font-size: 1.1em;
+  font-size: 0.85em;
 }
 
 .hamburger {
@@ -191,6 +191,7 @@ code {
     background: black;
     color: white;
     transform: translateY(-100vh);
+    z-index: 42;
   }
 }
 </style>

packages/nuxt-styleguide-renderer-default/package.json

@@ -5,6 +5,8 @@
   "dependencies": {
     "node-sass": "^4.9.0",
     "pretty": "^2.0.0",
-    "sass-loader": "^7.0.1"
+    "prismjs": "^1.15.0",
+    "sass-loader": "^7.0.1",
+    "vue-prism-component": "^1.1.1"
   }
-}
+}