syntax highlight tweaks

Author: yyx990803

docs/config.md

@@ -6,6 +6,8 @@
 
 ### title
 
+### description
+
 ### head
 
 ### port
@@ -14,7 +16,7 @@
 
 ### theme
 
-### data
+### themeConfig
 
 ### markdown
 

docs/kitchen/sink.md

@@ -3,6 +3,8 @@ foo: 123
 bar: 234
 ---
 
+# Kitchen Sink
+
 ## Relative Links
 
 - [Go home](../README.md)
@@ -14,7 +16,7 @@ bar: 234
 const a = 123
 ```
 
-``` html{2,10}
+``` html{2,10-13}
 <div id="example">
   <p>Original message: "{{ message }}"</p>
   <p>Computed reversed message: "{{ reversedMessage }}"</p>

docs/test.md

@@ -0,0 +1,5 @@
+## Dynamic Component
+
+<div>
+  <demo-1/>
+</div>

docs/using-vue.md

@@ -4,13 +4,27 @@
 
 ## Using Components
 
+Any `*.vue` file found in `.vuepress/components` are automatically registered as global async components. For example:
+
 ``` bash
 .
 └── .vuepress
     └── components
         └── demo-1.vue
 ```
 
+Inside any markdown file you can then use the component like so:
+
+``` markdown
+<div>
+  <demo-1/>
+</div>
+```
+
+::: warning
+Note **components must be nested inside a `<div>`**, because otherwise they'd be automatically wrapped inside a `<p>`, which can only contain inline elements.
+:::
+
 ## Style & Script
 
 (TODO)

lib/default-theme/Layout.vue

@@ -2,7 +2,7 @@
   <div class="theme-container">
     <ul class="nav">
       <li v-for="page in $site.pages">
-        <router-link :to="page.path">{{ page.path }}</router-link>
+        <router-link :to="page.path">{{ page.title || page.path }}</router-link>
       </li>
     </ul>
     <Index v-if="$page.path === '/index'" />

lib/default-theme/styles.css

@@ -22,8 +22,12 @@ pre code, pre[class*="language-"] code {
 .highlighted-line {
   background-color: #14161a;
   display: block;
-  margin: 1px -1.575rem;
-  padding: 1px 1.575rem;
+  margin: 0 -1.575rem;
+  padding: 0 1.575rem;
+}
+
+div.warning {
+  background-color: yellow;
 }
 
 /*

lib/markdown/highlight.js

@@ -1,9 +1,12 @@
 const prism = require('prismjs')
 const loadLanguages = require('prismjs/components/index')
 
+// required to make embedded highlighting work...
+loadLanguages(['markup', 'css', 'javascript'])
+
 module.exports = (str, lang) => {
-  if (lang === 'vue') {
-    lang = 'html'
+  if (lang === 'vue' || lang === 'html') {
+    lang = 'markup'
   }
   if (!prism.languages[lang]) {
     try {

lib/prepare.js

@@ -97,7 +97,7 @@ async function resolveOptions (sourceDir) {
     // extract yaml frontmatter
     const frontmatter = yaml.loadFront(content)
     // infer title
-    const titleMatch = frontmatter.__content.match(/^#+\s+(.*)/)
+    const titleMatch = frontmatter.__content.trim().match(/^#+\s+(.*)/)
     if (titleMatch) {
       data.title = titleMatch[1]
     }
@@ -109,11 +109,13 @@ async function resolveOptions (sourceDir) {
   })
 
   // resolve site data
-  options.siteData = Object.assign({}, siteConfig.data, {
+  options.siteData = {
     title: siteConfig.title,
+    description: siteConfig.description,
     base: siteConfig.base || '/',
-    pages: pagesData
-  })
+    pages: pagesData,
+    themeConfig: siteConfig.themeConfig
+  }
 
   return options
 }