feat: update prism theme
This commit is contained in:
Anthony Fu
parent
fd82166129
commit
39eb658ccc
17
README.md
17
README.md
@ -53,18 +53,19 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
|
||||
### 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 <b>Vitesse</b><sup><em>(speed)</em></sup><br>
|
||||
- [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)
|
||||
|
||||
@ -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"
|
||||
|
||||
10
pnpm-lock.yaml
generated
10
pnpm-lock.yaml
generated
@ -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
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
@import './prose.postcss';
|
||||
@import './markdown.postcss';
|
||||
|
||||
html,
|
||||
body,
|
||||
|
||||
55
src/styles/markdown.postcss
Normal file
55
src/styles/markdown.postcss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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));
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user