diff --git a/README.md b/README.md
index ecbfca1..afc0b0b 100644
--- a/README.md
+++ b/README.md
@@ -53,18 +53,19 @@ Mocking up web app with Vitesse(speed)
### Icons
- [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/)
-- [vite-plugin-icons](https://github.com/antfu/vite-plugin-icons) - icons as Vue components
+- [`vite-plugin-icons`](https://github.com/antfu/vite-plugin-icons) - icons as Vue components
### Plugins
- [Vue Router](https://github.com/vuejs/vue-router)
- - [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages) - file system based routing
-- [vite-plugin-components](https://github.com/antfu/vite-plugin-components) - components auto import
-- [vite-plugin-pwa](https://github.com/antfu/vite-plugin-pwa) - PWA
-- [vite-plugin-md](https://github.com/antfu/vite-plugin-md) - Markdown as components / components in Markdown
- - [markdown-it-prism](https://github.com/jGleitz/markdown-it-prism) - [Prism](https://prismjs.com/) for syntax highlighting
+ - [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) - file system based routing
+- [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components) - components auto import
+- [`vite-plugin-pwa`](https://github.com/antfu/vite-plugin-pwa) - PWA
+- [`vite-plugin-md`](https://github.com/antfu/vite-plugin-md) - Markdown as components / components in Markdown
+ - [`markdown-it-prism`](https://github.com/jGleitz/markdown-it-prism) - [Prism](https://prismjs.com/) for syntax highlighting
+ - [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) - customizable Prism.js theme using CSS variables
- [Vue I18n](https://github.com/intlify/vue-i18n-next) - Internationalization
- - [vite-plugin-vue-i18n](https://github.com/intlify/vite-plugin-vue-i18n) - Vite plugin for Vue I18n
+ - [`vite-plugin-vue-i18n`](https://github.com/intlify/vite-plugin-vue-i18n) - Vite plugin for Vue I18n
- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
### Coding Style
@@ -77,7 +78,7 @@ Mocking up web app with Vitesse(speed)
- [TypeScript](https://www.typescriptlang.org/)
- [Vue TypeScript Plugin](https://github.com/znck/vue-developer-experience/tree/master/packages/typescript-plugin-vue) - better type support for Vue
- [pnpm](https://pnpm.js.org/) - fast, disk space efficient package manager
-- [vite-ssg](https://github.com/antfu/vite-ssg) - Server-side generation
+- [`vite-ssg`](https://github.com/antfu/vite-ssg) - Server-side generation
- [Netlify](https://www.netlify.com/) - deploy
- [VS Code Extensions](./.vscode/extensions.json)
- [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify)
diff --git a/package.json b/package.json
index cff019e..1d7f2a7 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
"@vueuse/core": "^4.0.8",
"@vueuse/head": "^0.2.3",
"nprogress": "^0.2.0",
+ "prism-theme-vars": "^0.0.1",
"vue": "^3.0.5",
"vue-i18n": "^9.0.0-rc.3",
"vue-router": "^4.0.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a538dfb..05f1af4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2,6 +2,7 @@ dependencies:
'@vueuse/core': 4.0.8_vue@3.0.5
'@vueuse/head': 0.2.3_vue@3.0.5
nprogress: 0.2.0
+ prism-theme-vars: 0.0.1
vue: 3.0.5
vue-i18n: 9.0.0-rc.3_vue@3.0.5
vue-router: 4.0.3_vue@3.0.5
@@ -4256,6 +4257,10 @@ packages:
node: '>= 0.8'
resolution:
integrity: sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
+ /prism-theme-vars/0.0.1:
+ dev: false
+ resolution:
+ integrity: sha512-Ga9N3OwRSv1f0yPTP0TrL36kZrIf99KQiBfNjA047Fv/tY+x5u725/YXAGuo+aS+FQpyvAcDhKx7lO4DGC0AAQ==
/prismjs/1.23.0:
dev: true
optionalDependencies:
@@ -4427,7 +4432,7 @@ packages:
request-promise-core: 1.1.4_request@2.88.2
stealthy-require: 1.1.1
tough-cookie: 2.5.0
- deprecated: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
+ deprecated: 'request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142'
dev: true
engines:
node: '>=0.12.0'
@@ -4457,7 +4462,7 @@ packages:
tough-cookie: 2.5.0
tunnel-agent: 0.6.0
uuid: 3.4.0
- deprecated: request has been deprecated, see https://github.com/request/request/issues/3142
+ deprecated: 'request has been deprecated, see https://github.com/request/request/issues/3142'
dev: true
engines:
node: '>= 6'
@@ -5607,6 +5612,7 @@ specifiers:
pnpm: ^5.15.1
postcss: ^8.2.4
postcss-nested: ^5.0.3
+ prism-theme-vars: ^0.0.1
tailwindcss: ^2.0.2
typescript: ^4.1.3
vite: 2.0.0-beta.35
diff --git a/src/styles/main.postcss b/src/styles/main.postcss
index 401478c..99e4063 100755
--- a/src/styles/main.postcss
+++ b/src/styles/main.postcss
@@ -1,7 +1,7 @@
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
-@import './prose.postcss';
+@import './markdown.postcss';
html,
body,
diff --git a/src/styles/markdown.postcss b/src/styles/markdown.postcss
new file mode 100644
index 0000000..3943afa
--- /dev/null
+++ b/src/styles/markdown.postcss
@@ -0,0 +1,55 @@
+/* https://github.com/antfu/prism-theme-vars */
+@import 'prism-theme-vars/base.css';
+
+:root {
+ --prism-font-family: 'Input Mono', monospace;
+}
+
+html:not(.dark) {
+ --prism-foreground: #393a34;
+ --prism-background: #f8f8f8;
+
+ --prism-comment: #758575;
+ --prism-namespace: #444444;
+ --prism-string: #bc8671;
+ --prism-punctuation: #80817d;
+ --prism-literal: #36acaa;
+ --prism-keyword: #248459;
+ --prism-function: #849145;
+ --prism-deleted: #9a050f;
+ --prism-class: #2b91af;
+ --prism-builtin: #800000;
+ --prism-property: #ce9178;
+ --prism-regex: #ad502b;
+}
+
+html.dark {
+ --prism-foreground: #d4d4d4;
+ --prism-background: #1e1e1e;
+ --prism-selection-background: #75a7ca;
+
+ --prism-namespace: #aaaaaa;
+ --prism-comment: #758575;
+ --prism-comment-style: italic;
+ --prism-namespace: #444444;
+ --prism-string: #ce9178;
+ --prism-punctuation: #d4d4d4;
+ --prism-literal: #36acaa;
+ --prism-keyword: #38a776;
+ --prism-function: #dcdcaa;
+ --prism-deleted: #9a050f;
+ --prism-class: #4ec9b0;
+ --prism-builtin: #d16969;
+ --prism-property: #ce9178;
+ --prism-regex: #ad502b;
+ --prism-keyword-control: #c586c0;
+
+ --prism-line-highlight: #f7ebc6;
+}
+
+/* fix tailwind typography on darkmode */
+.prose {
+ a code {
+ color: inherit;
+ }
+}
diff --git a/src/styles/prism-dark.postcss b/src/styles/prism-dark.postcss
deleted file mode 100644
index 01c46b5..0000000
--- a/src/styles/prism-dark.postcss
+++ /dev/null
@@ -1,259 +0,0 @@
-/*
- * https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-vsc-dark-plus.css
- */
-
-html.dark {
- pre[class*='language-'],
- code[class*='language-'] {
- color: #d4d4d4;
- background: #1e1e1e;
- }
-
- pre[class*='language-']::selection,
- code[class*='language-']::selection,
- pre[class*='language-'] *::selection,
- code[class*='language-'] *::selection {
- text-shadow: none;
- background: #75a7ca;
- }
-
- /*********************************************************
- * Tokens
- */
- .namespace {
- opacity: 0.7;
- }
-
- .token.doctype .token.doctype-tag {
- color: #569cd6;
- }
-
- .token.doctype .token.name {
- color: #9cdcfe;
- }
-
- .token.comment,
- .token.prolog {
- color: #707c70;
- font-style: italic;
- }
-
- .token.punctuation,
- .language-html .language-css .token.punctuation,
- .language-html .language-javascript .token.punctuation {
- color: #d4d4d4;
- }
-
- .token.property,
- .token.tag,
- .token.boolean,
- .token.number,
- .token.constant,
- .token.symbol,
- .token.inserted,
- .token.unit {
- color: #b5cea8;
- }
-
- .token.selector,
- .token.attr-name,
- .token.string,
- .token.char,
- .token.builtin,
- .token.deleted {
- color: #ce9178;
- }
-
- .language-css .token.string.url {
- text-decoration: underline;
- }
-
- .token.operator,
- .token.entity {
- color: #d4d4d4;
- }
-
- .token.operator.arrow {
- color: #569cd6;
- }
-
- .token.atrule {
- color: #ce9178;
- }
-
- .token.atrule .token.rule {
- color: #c586c0;
- }
-
- .token.atrule .token.url {
- color: #9cdcfe;
- }
-
- .token.atrule .token.url .token.function {
- color: #dcdcaa;
- }
-
- .token.atrule .token.url .token.punctuation {
- color: #d4d4d4;
- }
-
- .token.keyword {
- color: #38a776;
- }
-
- .token.keyword.module,
- .token.keyword.control-flow {
- color: #c586c0;
- }
-
- .token.function,
- .token.function .token.maybe-class-name {
- color: #dcdcaa;
- }
-
- .token.regex {
- color: #d16969;
- }
-
- .token.important {
- color: #569cd6;
- }
-
- .token.italic {
- font-style: italic;
- }
-
- .token.constant {
- color: #9cdcfe;
- }
-
- .token.class-name,
- .token.maybe-class-name {
- color: #4ec9b0;
- }
-
- .token.console {
- color: #9cdcfe;
- }
-
- .token.parameter {
- color: #9cdcfe;
- }
-
- .token.interpolation {
- color: #9cdcfe;
- }
-
- .token.punctuation.interpolation-punctuation {
- color: #569cd6;
- }
-
- .token.boolean {
- color: #569cd6;
- }
-
- .token.property,
- .token.variable,
- .token.imports .token.maybe-class-name,
- .token.exports .token.maybe-class-name {
- color: #9cdcfe;
- }
-
- .token.selector {
- color: #d7ba7d;
- }
-
- .token.escape {
- color: #d7ba7d;
- }
-
- .token.tag {
- color: #569cd6;
- }
-
- .token.tag .token.punctuation {
- color: #808080;
- }
-
- .token.cdata {
- color: #808080;
- }
-
- .token.attr-name {
- color: #9cdcfe;
- }
-
- .token.attr-value,
- .token.attr-value .token.punctuation {
- color: #ce9178;
- }
-
- .token.attr-value .token.punctuation.attr-equals {
- color: #d4d4d4;
- }
-
- .token.entity {
- color: #569cd6;
- }
-
- .token.namespace {
- color: #4ec9b0;
- }
- /*********************************************************
-* Language Specific
-*/
-
- pre[class*='language-javascript'],
- code[class*='language-javascript'],
- pre[class*='language-jsx'],
- code[class*='language-jsx'],
- pre[class*='language-typescript'],
- code[class*='language-typescript'],
- pre[class*='language-tsx'],
- code[class*='language-tsx'] {
- color: #9cdcfe;
- }
-
- pre[class*='language-css'],
- code[class*='language-css'] {
- color: #ce9178;
- }
-
- pre[class*='language-html'],
- code[class*='language-html'] {
- color: #d4d4d4;
- }
-
- .language-regex .token.anchor {
- color: #dcdcaa;
- }
-
- .language-html .token.punctuation {
- color: #808080;
- }
- /*********************************************************
- * Line highlighting
- */
- pre[data-line] {
- position: relative;
- }
-
- pre[class*='language-'] > code[class*='language-'] {
- position: relative;
- z-index: 1;
- }
-
- .line-highlight {
- position: absolute;
- left: 0;
- right: 0;
- padding: inherit 0;
- margin-top: 1em;
- background: #f7ebc6;
- box-shadow: inset 5px 0 0 #f7d87c;
- z-index: 0;
- pointer-events: none;
- line-height: inherit;
- white-space: pre;
- }
-}
diff --git a/src/styles/prism-light.postcss b/src/styles/prism-light.postcss
deleted file mode 100644
index 55ff331..0000000
--- a/src/styles/prism-light.postcss
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * VS theme by Andrew Lock (https://andrewlock.net)
- * Inspired by Visual Studio syntax coloring
- *
- * https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-vs.css
- */
-
-html:not(.dark) {
- code[class*='language-'],
- pre[class*='language-'] {
- color: #393a34;
- }
-
- pre[class*='language-']::-moz-selection,
- pre[class*='language-'] ::-moz-selection,
- code[class*='language-']::-moz-selection,
- code[class*='language-'] ::-moz-selection {
- background: #c1def1;
- }
-
- pre[class*='language-']::selection,
- pre[class*='language-'] ::selection,
- code[class*='language-']::selection,
- code[class*='language-'] ::selection {
- background: #c1def1;
- }
-
- /* Code blocks */
- pre[class*='language-'] {
- background-color: #f8f8f8 !important;
- }
-
- /* Inline code */
- :not(pre) > code[class*='language-'] {
- background: #f8f8f8;
- }
-
- .token.comment,
- .token.prolog,
- .token.doctype,
- .token.cdata {
- color: #758575;
- font-style: italic;
- }
-
- .token.namespace {
- opacity: 0.7;
- }
-
- .token.string {
- color: #a31515;
- }
-
- .token.punctuation,
- .token.operator {
- color: #393a34; /* no highlight */
- }
-
- .token.url,
- .token.symbol,
- .token.number,
- .token.boolean,
- .token.variable,
- .token.constant,
- .token.inserted {
- color: #36acaa;
- }
-
- .token.atrule,
- .token.keyword,
- .token.attr-value,
- .language-autohotkey .token.selector,
- .language-json .token.boolean,
- .language-json .token.number,
- code[class*='language-css'] {
- color: #248459;
- }
-
- .token.function {
- color: #849145;
- }
-
- .token.deleted,
- .language-autohotkey .token.tag {
- color: #9a050f;
- }
-
- .token.selector,
- .language-autohotkey .token.keyword {
- color: #248459;
- }
-
- .token.important,
- .token.bold {
- font-weight: bold;
- }
-
- .token.italic {
- font-style: italic;
- }
-
- .token.class-name,
- .language-json .token.property {
- color: #2b91af;
- }
-
- .token.tag,
- .token.builtin,
- .token.selector {
- color: #800000;
- }
-
- .token.attr-name,
- .token.property,
- .token.regex,
- .token.entity {
- color: #ce9178;
- }
-
- .token.directive.tag .tag {
- background: #ffff00;
- color: #393a34;
- }
-
- /* overrides color-values for the Line Numbers plugin
- * http://prismjs.com/plugins/line-numbers/
- */
- .line-numbers .line-numbers-rows {
- border-right-color: #a5a5a5;
- }
-
- .line-numbers-rows > span:before {
- color: #2b91af;
- }
-
- /* overrides color-values for the Line Highlight plugin
- * http://prismjs.com/plugins/line-highlight/
- */
- .line-highlight {
- background: rgba(193, 222, 241, 0.2);
- background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
- background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
- }
-}
diff --git a/src/styles/prose.postcss b/src/styles/prose.postcss
deleted file mode 100644
index 288469e..0000000
--- a/src/styles/prose.postcss
+++ /dev/null
@@ -1,46 +0,0 @@
-@import './prism-light.postcss';
-@import './prism-dark.postcss';
-
-.prose {
- pre[class*='language-'],
- code[class*='language-'] {
- text-shadow: none;
- direction: ltr;
- text-align: left;
- white-space: pre;
- word-spacing: normal;
- word-break: normal;
- line-height: 1.5;
- -moz-tab-size: 2;
- -o-tab-size: 2;
- tab-size: 2;
- -webkit-hyphens: none;
- -moz-hyphens: none;
- -ms-hyphens: none;
- hyphens: none;
- }
-
- pre[class*='language-'],
- code[class*='language-'] {
- text-shadow: none;
- }
-
- pre[class*='language-'] {
- padding: 1em;
- margin: 0.5em 0;
- overflow: auto;
- }
-
- :not(pre) > code[class*='language-'] {
- padding: 0.1em 0.3em;
- border-radius: 0.3em;
- }
-
- pre {
- text-align: left;
- }
-
- a code {
- color: inherit;
- }
-}