Skip to content

Commit 9485783

Browse files
egoistegoist
committed
feat: support code highlighting
1 parent aa72f1f commit 9485783

File tree

8 files changed

+150
-8
lines changed

8 files changed

+150
-8
lines changed

‎demo/pages/about.md

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,47 @@ title: About
33
layout: page
44
---
55

6-
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.
6+
## Prerequisite
77

8-
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.
8+
You need [Node.js](https://nodejs.org) installed on your machine.
99

10-
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.
10+
## Quick Start
1111

12-
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.
12+
Create a new project with a single command:
1313

14-
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.
14+
```bash
15+
npx create-portfolio my-site
16+
# OR Yarn
17+
yarn create portfolio my-site
18+
```
1519

16-
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.
20+
Alternatively, you can install `create-portfolio` globally:
21+
22+
```bash
23+
npm i -g create-portfolio
24+
create-portfolio my-site
25+
```
26+
27+
Change into your new directory:
28+
29+
```bash
30+
cd my-site
31+
```
32+
33+
Install dependencies:
34+
35+
```bash
36+
npm install
37+
```
38+
39+
Run the website locally:
40+
41+
```bash
42+
npm run dev
43+
```
44+
45+
Now browse to http://localhost:3000 you should see your page.
46+
47+
## Build for Production
48+
49+
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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@
1919
"grid.css": "^0.6.1",
2020
"jump.js": "^1.0.2",
2121
"normalize.css": "^8.0.1",
22+
"prismjs": "^1.16.0",
23+
"saber-highlight-css": "^0.0.4",
24+
"saber-plugin-prismjs": "^0.2.0",
2225
"typeface-source-sans-pro": "^0.0.54",
2326
"vue-feather-icons": "^4.21.0"
2427
},

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "./variables.css";
2+
@import "./highlight.css";
23

34
body {
45
font: 16px/1.6 "Source Sans Pro", serif;
@@ -51,7 +52,7 @@ a {
5152
}
5253

5354
.page-title {
54-
font-size: 2.4rem;
55+
font-size: 3rem;
5556
font-weight: 400;
5657
margin: 0 0 20px 0;
5758
line-height: 1.4;
@@ -72,6 +73,14 @@ a {
7273
&>*:first-child {
7374
margin-top: 0;
7475
}
76+
77+
& h2,
78+
& h3,
79+
& h4,
80+
& h5,
81+
& h6 {
82+
font-weight: 400;
83+
}
7584
}
7685

7786
.card {

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.saber-highlight {
2+
background-color: var(--card-bg);
3+
}
4+
5+
.saber-highlight:before {
6+
color: var(--code-language-color);
7+
}
8+
9+
:not(pre) code {
10+
background-color: var(--card-bg);
11+
border-radius: 3px;
12+
padding: 3px;
13+
font-size: .875rem;
14+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
--nav-link-hover-color: #ccc;
1212
--button-border-color: #4e4e4e;
1313
--button-hover-border-color: rgb(156, 156, 156);
14+
--code-language-color: rgb(94, 92, 92);
1415
}
1516

1617
.is-light-style {
@@ -26,4 +27,5 @@
2627
--nav-link-hover-color: rgb(85, 85, 85);
2728
--button-border-color: #e2e2e2;
2829
--button-hover-border-color: #ccc;
30+
--code-language-color: #ccc;
2931
}

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
1+
/* globals __PORTFOLIO_STYLE__ */
12
import 'normalize.css/normalize.css'
23
import 'typeface-source-sans-pro/index.css'
34
import 'grid.css/grid.css'
4-
import './css/global.css'
55
import HomeSection from './components/HomeSection.vue'
66

7+
if (__PORTFOLIO_STYLE__ === 'dark') {
8+
require('prismjs/themes/prism-tomorrow.css')
9+
} else if (__PORTFOLIO_STYLE__ === 'light') {
10+
require('prismjs/themes/prism.css')
11+
}
12+
13+
require('saber-highlight-css/default.css')
14+
require('./css/global.css')
15+
716
export default ({ Vue, setHead }) => {
817
Vue.component(HomeSection.name, HomeSection)
918

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,14 @@ exports.beforePlugins = async function() {
4646
this.hooks.onUpdateConfigFile.tap('theme-node-api', () => {
4747
updateConfig()
4848
})
49+
50+
this.applyPlugin(require('saber-plugin-prismjs'))
51+
}
52+
53+
exports.chainWebpack = function(config) {
54+
config.plugin('constants').tap(([constants]) => [
55+
Object.assign(constants, {
56+
__PORTFOLIO_STYLE__: JSON.stringify(this.config.themeConfig.style)
57+
})
58+
])
4959
}

‎yarn.lock

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2182,6 +2182,15 @@ cli-width@^2.0.0:
21822182
resolved "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
21832183
integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
21842184

2185+
clipboard@^2.0.0:
2186+
version "2.0.4"
2187+
resolved "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"
2188+
integrity sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==
2189+
dependencies:
2190+
good-listener "^1.2.2"
2191+
select "^1.1.2"
2192+
tiny-emitter "^2.0.0"
2193+
21852194
cliui@^4.0.0:
21862195
version "4.1.0"
21872196
resolved "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
@@ -2760,6 +2769,11 @@ delayed-stream@~1.0.0:
27602769
resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
27612770
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
27622771

2772+
delegate@^3.1.2:
2773+
version "3.2.0"
2774+
resolved "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
2775+
integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
2776+
27632777
delegates@^1.0.0:
27642778
version "1.0.0"
27652779
resolved "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -3847,6 +3861,13 @@ globby@^9.0.0:
38473861
pify "^4.0.1"
38483862
slash "^2.0.0"
38493863

3864+
good-listener@^1.2.2:
3865+
version "1.2.2"
3866+
resolved "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
3867+
integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
3868+
dependencies:
3869+
delegate "^3.1.2"
3870+
38503871
got@^6.7.1:
38513872
version "6.7.1"
38523873
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:
65346555
resolved "https://registry.npm.taobao.org/prettier/download/prettier-1.17.1.tgz#ed64b4e93e370cb8a25b9ef7fef3e4fd1c0995db"
65356556
integrity sha1-7WS06T43DLiiW573/vPk/RwJlds=
65366557

6558+
prismjs@^1.16.0:
6559+
version "1.16.0"
6560+
resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.16.0.tgz#406eb2c8aacb0f5f0f1167930cb83835d10a4308"
6561+
integrity sha512-OA4MKxjFZHSvZcisLGe14THYsug/nF6O1f0pAJc0KN0wTyAcLqmsbE+lTGKSpyh+9pEW57+k6pg2AfYR+coyHA==
6562+
optionalDependencies:
6563+
clipboard "^2.0.0"
6564+
65376565
private@^0.1.6:
65386566
version "0.1.8"
65396567
resolved "https://registry.npmjs.org/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -7078,6 +7106,30 @@ rxjs@^6.3.3, rxjs@^6.4.0:
70787106
dependencies:
70797107
tslib "^1.9.0"
70807108

7109+
saber-highlight-css@^0.0.4:
7110+
version "0.0.4"
7111+
resolved "https://registry.npmjs.org/saber-highlight-css/-/saber-highlight-css-0.0.4.tgz#ab938bbe97160ccf66582428bae21ef688f5f64b"
7112+
integrity sha512-QnOI+LsEvMb6CLVNLGXbMHeD2NNBXQEvENktvSxZB/FeMlW19OAJwCVUNrMjXnj3fr+3NhUKIL4qyXV//QRz8g==
7113+
7114+
saber-highlighter-prism@^0.3.0:
7115+
version "0.3.0"
7116+
resolved "https://registry.npmjs.org/saber-highlighter-prism/-/saber-highlighter-prism-0.3.0.tgz#9d0ce7a8b3eac72394a45f5cb40796ea90fe8c09"
7117+
integrity sha512-gsp1Tj3Q4k2yHMY5aJMYhpX1W/xNd7qzTiTgmbbpzHA7qyltlN8w1OtG4tyzzKD97g720U1N5ahSVvz+hAGaoQ==
7118+
dependencies:
7119+
saber-log "^0.2.0"
7120+
7121+
saber-log@^0.2.0:
7122+
version "0.2.0"
7123+
resolved "https://registry.npmjs.org/saber-log/-/saber-log-0.2.0.tgz#6c4a803a3d8c89f243580f0d7259e396220286d6"
7124+
integrity sha512-S0KbP6uktP0g75t+QG7sx1dkib/S1TyhOxPKFj9325eYVJOYi6ECfyeWiuYsma35MxqJTlFp4Dxw7U57JEjvSA==
7125+
7126+
saber-plugin-prismjs@^0.2.0:
7127+
version "0.2.0"
7128+
resolved "https://registry.npmjs.org/saber-plugin-prismjs/-/saber-plugin-prismjs-0.2.0.tgz#caa0cafaedf8cc9b74d4661f1d7341892ed297bd"
7129+
integrity sha512-fHlp8mCs3jxEyJmRq2igtvkFgGAbKNXSo4+mtFCH6WxsUz+wmR4jOPzhWwB27a1U33kMLiQRf8mqMBOzdsXdBQ==
7130+
dependencies:
7131+
saber-highlighter-prism "^0.3.0"
7132+
70817133
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:
70827134
version "5.1.2"
70837135
resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -7102,6 +7154,11 @@ safe-regex@^2.0.1:
71027154
resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
71037155
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
71047156

7157+
select@^1.1.2:
7158+
version "1.1.2"
7159+
resolved "https://registry.npmjs.org/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
7160+
integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
7161+
71057162
semver-compare@^1.0.0:
71067163
version "1.0.0"
71077164
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:
76507707
resolved "https://registry.npm.taobao.org/timed-out/download/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
76517708
integrity sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=
76527709

7710+
tiny-emitter@^2.0.0:
7711+
version "2.1.0"
7712+
resolved "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
7713+
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
7714+
76537715
tmp@^0.0.33:
76547716
version "0.0.33"
76557717
resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"

0 commit comments

Comments
 (0)