fix review, remove ContentMarkdown component, move hljs to utils, add…

… css file

pages/contribute.vue

@@ -1,14 +1,32 @@
 <template>
-  <ContentMarkdown type="contribute" />
+  <section class="content">
+    <VueMarkdown :source="content" :options="options" />
+  </section>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
+import highlight from '~/utils/highlight'
+
+import '@/styles/content-markdown.scss'
+
+import Contributing from '../CONTRIBUTING.md'
 
 @Component({
   components: {
-    ContentMarkdown: () => import('@/components/ContentMarkdown.vue'),
+    VueMarkdown: () => import('vue-markdown-render'),
+  },
+  data() {
+    return {
+      options: {
+        highlight,
+      },
+    }
   },
 })
-export default class Contribute extends Vue {}
+export default class Contribute extends Vue {
+  get content() {
+    return Contributing
+  }
+}
 </script>

pages/first-time.vue

@@ -0,0 +1,32 @@
+<template>
+  <section class="content">
+    <VueMarkdown :source="content" :options="options" />
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import highlight from '~/utils/highlight'
+
+import '@/styles/content-markdown.scss'
+
+import FirstTimeMD from '../FIRST_TIME.md'
+
+@Component({
+  components: {
+    VueMarkdown: () => import('vue-markdown-render'),
+  },
+  data() {
+    return {
+      options: {
+        highlight,
+      },
+    }
+  },
+})
+export default class FirstTime extends Vue {
+  get content() {
+    return FirstTimeMD
+  }
+}
+</script>

styles/content-markdown.scss

@@ -0,0 +1,10 @@
+@import '~/node_modules/highlight.js/styles/github-dark.css';
+
+.content {
+  pre,
+  blockquote {
+    background-color: black;
+    border-left: 5px solid #dbdbdb;
+    padding: 1.25em 1.5em;
+  }
+}

utils/highlight.ts

@@ -0,0 +1,14 @@
+import hljs from 'highlight.js'
+
+const highlight = function (str, lang) {
+  if (lang && hljs.getLanguage(lang)) {
+    try {
+      return hljs.highlight(str, { language: lang }).value
+    } catch (__) {
+      return ''
+    }
+  }
+  return ''
+}
+
+export default highlight