feat: support code highlighting

demo/pages/about.md

@@ -3,14 +3,47 @@ title: About
 layout: page
 ---
 
-Nostrud et dolor aliquip qui magna adipisicing cillum cillum nisi culpa aliquip exercitation. Dolor reprehenderit sint laborum in nisi deserunt culpa ea irure do sit veniam fugiat. Sit ipsum esse excepteur ad sunt reprehenderit in duis. Et non voluptate esse eu elit duis nulla esse veniam.
+## Prerequisite
 
-Culpa sit sit cupidatat nulla sit minim fugiat. Cupidatat tempor ut ut Lorem aliqua id pariatur ex velit enim occaecat cupidatat elit tempor. Voluptate officia exercitation ullamco ullamco incididunt irure reprehenderit deserunt occaecat. Minim excepteur aliquip ullamco elit sint exercitation laboris. Ad deserunt ipsum enim exercitation sint culpa ad cillum culpa nostrud nulla ullamco amet deserunt. Consequat voluptate cillum culpa sunt.
+You need [Node.js](https://nodejs.org) installed on your machine.
 
-Lorem fugiat consectetur nostrud elit aute do ad duis adipisicing ullamco labore officia dolore. Reprehenderit incididunt incididunt eu sint pariatur minim magna. Ipsum Lorem tempor non est commodo id officia. Exercitation mollit incididunt proident veniam veniam aute. Reprehenderit deserunt magna tempor adipisicing sit dolor non exercitation ut. Exercitation sint dolor ullamco veniam non do deserunt excepteur non nisi. Labore irure culpa esse dolor dolor quis dolore exercitation ad.
+## Quick Start
 
-Mollit mollit incididunt aute do fugiat mollit. Proident exercitation mollit culpa sint sit enim laborum. Ut do magna ad Lorem. Exercitation cillum dolor Lorem nisi cillum proident aliquip pariatur mollit. Proident est qui duis ullamco duis eu tempor tempor nostrud velit exercitation reprehenderit aliqua Lorem.
+Create a new project with a single command:
 
-Nulla ad fugiat quis in veniam minim adipisicing. Magna fugiat tempor ut esse quis cupidatat quis exercitation officia. Sit laboris enim aliquip in exercitation elit et eu incididunt nostrud exercitation culpa culpa est. Occaecat ea fugiat proident non esse in aliqua occaecat ea labore quis velit deserunt. Irure nostrud nostrud dolor incididunt velit.
+```bash
+npx create-portfolio my-site
+# OR Yarn
+yarn create portfolio my-site
+```
 
-Sint velit Lorem occaecat consectetur eu irure anim incididunt et mollit eu. Adipisicing fugiat tempor excepteur cupidatat cupidatat adipisicing aliqua officia. Tempor veniam commodo laborum et sunt. Ea pariatur ullamco et labore dolor do ad eiusmod magna. Veniam voluptate amet ea sunt aute elit incididunt. Magna deserunt laborum cupidatat commodo mollit in id id ut adipisicing amet.
+Alternatively, you can install `create-portfolio` globally:
+
+```bash
+npm i -g create-portfolio
+create-portfolio my-site
+```
+
+Change into your new directory:
+
+```bash
+cd my-site
+```
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Run the website locally:
+
+```bash
+npm run dev
+```
+
+Now browse to http://localhost:3000 you should see your page.
+
+## Build for Production
+
+Run `npm run build` to create a production build of your app, generated files can be found at `./public` folder, then it can be [deployed as a static website](https://saber.land/docs/deployment.html).

packages/saber-theme-portfolio/package.json

@@ -19,6 +19,9 @@
     "grid.css": "^0.6.1",
     "jump.js": "^1.0.2",
     "normalize.css": "^8.0.1",
+    "prismjs": "^1.16.0",
+    "saber-highlight-css": "^0.0.4",
+    "saber-plugin-prismjs": "^0.2.0",
     "typeface-source-sans-pro": "^0.0.54",
     "vue-feather-icons": "^4.21.0"
   },

packages/saber-theme-portfolio/src/css/global.css

@@ -1,4 +1,5 @@
 @import "./variables.css";
+@import "./highlight.css";
 
 body {
   font: 16px/1.6 "Source Sans Pro", serif;
@@ -51,7 +52,7 @@ a {
 }
 
 .page-title {
-  font-size: 2.4rem;
+  font-size: 3rem;
   font-weight: 400;
   margin: 0 0 20px 0;
   line-height: 1.4;
@@ -72,6 +73,14 @@ a {
   &>*:first-child {
     margin-top: 0;
   }
+
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6 {
+    font-weight: 400;
+  }
 }
 
 .card {

packages/saber-theme-portfolio/src/css/highlight.css

@@ -0,0 +1,14 @@
+.saber-highlight {
+  background-color: var(--card-bg);
+}
+
+.saber-highlight:before {
+  color: var(--code-language-color);
+}
+
+:not(pre) code {
+  background-color: var(--card-bg);
+  border-radius: 3px;
+  padding: 3px;
+  font-size: .875rem;
+}

packages/saber-theme-portfolio/src/css/variables.css

@@ -11,6 +11,7 @@
   --nav-link-hover-color: #ccc;
   --button-border-color: #4e4e4e;
   --button-hover-border-color: rgb(156, 156, 156);
+  --code-language-color: rgb(94, 92, 92);
 }
 
 .is-light-style {
@@ -26,4 +27,5 @@
   --nav-link-hover-color: rgb(85, 85, 85);
   --button-border-color: #e2e2e2;
   --button-hover-border-color: #ccc;
+  --code-language-color: #ccc;
 }

packages/saber-theme-portfolio/src/saber-browser.js

@@ -1,9 +1,18 @@
+/* globals __PORTFOLIO_STYLE__ */
 import 'normalize.css/normalize.css'
 import 'typeface-source-sans-pro/index.css'
 import 'grid.css/grid.css'
-import './css/global.css'
 import HomeSection from './components/HomeSection.vue'
 
+if (__PORTFOLIO_STYLE__ === 'dark') {
+  require('prismjs/themes/prism-tomorrow.css')
+} else if (__PORTFOLIO_STYLE__ === 'light') {
+  require('prismjs/themes/prism.css')
+}
+
+require('saber-highlight-css/default.css')
+require('./css/global.css')
+
 export default ({ Vue, setHead }) => {
   Vue.component(HomeSection.name, HomeSection)
 

packages/saber-theme-portfolio/src/saber-node.js

@@ -46,4 +46,14 @@ exports.beforePlugins = async function() {
   this.hooks.onUpdateConfigFile.tap('theme-node-api', () => {
     updateConfig()
   })
+
+  this.applyPlugin(require('saber-plugin-prismjs'))
+}
+
+exports.chainWebpack = function(config) {
+  config.plugin('constants').tap(([constants]) => [
+    Object.assign(constants, {
+      __PORTFOLIO_STYLE__: JSON.stringify(this.config.themeConfig.style)
+    })
+  ])
 }

yarn.lock

@@ -2182,6 +2182,15 @@ cli-width@^2.0.0:
   resolved "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
   integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
 
+clipboard@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"
+  integrity sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^4.0.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
@@ -2760,6 +2769,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -3847,6 +3861,13 @@ globby@^9.0.0:
     pify "^4.0.1"
     slash "^2.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
+
 got@^6.7.1:
   version "6.7.1"
   resolved "https://registry.npm.taobao.org/got/download/got-6.7.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgot%2Fdownload%2Fgot-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
@@ -6534,6 +6555,13 @@ prettier@^1.15.2, prettier@^1.17.1:
   resolved "https://registry.npm.taobao.org/prettier/download/prettier-1.17.1.tgz#ed64b4e93e370cb8a25b9ef7fef3e4fd1c0995db"
   integrity sha1-7WS06T43DLiiW573/vPk/RwJlds=
 
+prismjs@^1.16.0:
+  version "1.16.0"
+  resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.16.0.tgz#406eb2c8aacb0f5f0f1167930cb83835d10a4308"
+  integrity sha512-OA4MKxjFZHSvZcisLGe14THYsug/nF6O1f0pAJc0KN0wTyAcLqmsbE+lTGKSpyh+9pEW57+k6pg2AfYR+coyHA==
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 private@^0.1.6:
   version "0.1.8"
   resolved "https://registry.npmjs.org/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -7078,6 +7106,30 @@ rxjs@^6.3.3, rxjs@^6.4.0:
   dependencies:
     tslib "^1.9.0"
 
+saber-highlight-css@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.npmjs.org/saber-highlight-css/-/saber-highlight-css-0.0.4.tgz#ab938bbe97160ccf66582428bae21ef688f5f64b"
+  integrity sha512-QnOI+LsEvMb6CLVNLGXbMHeD2NNBXQEvENktvSxZB/FeMlW19OAJwCVUNrMjXnj3fr+3NhUKIL4qyXV//QRz8g==
+
+saber-highlighter-prism@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npmjs.org/saber-highlighter-prism/-/saber-highlighter-prism-0.3.0.tgz#9d0ce7a8b3eac72394a45f5cb40796ea90fe8c09"
+  integrity sha512-gsp1Tj3Q4k2yHMY5aJMYhpX1W/xNd7qzTiTgmbbpzHA7qyltlN8w1OtG4tyzzKD97g720U1N5ahSVvz+hAGaoQ==
+  dependencies:
+    saber-log "^0.2.0"
+
+saber-log@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/saber-log/-/saber-log-0.2.0.tgz#6c4a803a3d8c89f243580f0d7259e396220286d6"
+  integrity sha512-S0KbP6uktP0g75t+QG7sx1dkib/S1TyhOxPKFj9325eYVJOYi6ECfyeWiuYsma35MxqJTlFp4Dxw7U57JEjvSA==
+
+saber-plugin-prismjs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/saber-plugin-prismjs/-/saber-plugin-prismjs-0.2.0.tgz#caa0cafaedf8cc9b74d4661f1d7341892ed297bd"
+  integrity sha512-fHlp8mCs3jxEyJmRq2igtvkFgGAbKNXSo4+mtFCH6WxsUz+wmR4jOPzhWwB27a1U33kMLiQRf8mqMBOzdsXdBQ==
+  dependencies:
+    saber-highlighter-prism "^0.3.0"
+
 safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -7102,6 +7154,11 @@ safe-regex@^2.0.1:
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
 semver-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/semver-compare/download/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
@@ -7650,6 +7707,11 @@ timed-out@^4.0.0:
   resolved "https://registry.npm.taobao.org/timed-out/download/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
   integrity sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"