hljs
This commit is contained in:
parent
695ba3f644
commit
e17582823c
3 changed files with 128 additions and 122 deletions
|
|
@ -2,9 +2,9 @@
|
|||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
@import "./hljs.css";
|
||||
@import "./lightbox.css";
|
||||
@import "./tablesort.css";
|
||||
@import "./tokyo-night-dark.css";
|
||||
|
||||
/*
|
||||
The base layer is for things like reset rules or default styles applied to plain HTML elements.
|
||||
|
|
@ -33,6 +33,10 @@
|
|||
margin-block-start: var(--flow-space, 1em);
|
||||
}
|
||||
|
||||
:root .prose {
|
||||
@apply prose-inhji;
|
||||
}
|
||||
|
||||
:root[data-mode=dark] .prose {
|
||||
@apply prose-invert;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,94 +7,95 @@
|
|||
Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
& .hljs {
|
||||
background: #fefefe;
|
||||
color: #545454;
|
||||
}
|
||||
|
||||
/* Comment */
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
& .hljs-comment,
|
||||
& .hljs-quote {
|
||||
color: #696969;
|
||||
}
|
||||
|
||||
/* Red */
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-regexp,
|
||||
.hljs-deletion {
|
||||
& .hljs-variable,
|
||||
& .hljs-template-variable,
|
||||
& .hljs-tag,
|
||||
& .hljs-name,
|
||||
& .hljs-selector-id,
|
||||
& .hljs-selector-class,
|
||||
& .hljs-regexp,
|
||||
& .hljs-deletion {
|
||||
color: #d91e18;
|
||||
}
|
||||
|
||||
/* Orange */
|
||||
.hljs-number,
|
||||
.hljs-built_in,
|
||||
.hljs-literal,
|
||||
.hljs-type,
|
||||
.hljs-params,
|
||||
.hljs-meta,
|
||||
.hljs-link {
|
||||
& .hljs-number,
|
||||
& .hljs-built_in,
|
||||
& .hljs-literal,
|
||||
& .hljs-type,
|
||||
& .hljs-params,
|
||||
& .hljs-meta,
|
||||
& .hljs-link {
|
||||
color: #aa5d00;
|
||||
}
|
||||
|
||||
/* Yellow */
|
||||
.hljs-attribute {
|
||||
& .hljs-attribute {
|
||||
color: #aa5d00;
|
||||
}
|
||||
|
||||
/* Green */
|
||||
.hljs-string,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-addition {
|
||||
& .hljs-string,
|
||||
& .hljs-symbol,
|
||||
& .hljs-bullet,
|
||||
& .hljs-addition {
|
||||
color: #008000;
|
||||
}
|
||||
|
||||
/* Blue */
|
||||
.hljs-title,
|
||||
.hljs-section {
|
||||
& .hljs-title,
|
||||
& .hljs-section {
|
||||
color: #007faa;
|
||||
}
|
||||
|
||||
/* Purple */
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag {
|
||||
& .hljs-keyword,
|
||||
& .hljs-selector-tag {
|
||||
color: #7928a1;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
& .hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
& .hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.hljs-addition,
|
||||
.hljs-attribute,
|
||||
.hljs-built_in,
|
||||
.hljs-bullet,
|
||||
.hljs-comment,
|
||||
.hljs-link,
|
||||
.hljs-literal,
|
||||
.hljs-meta,
|
||||
.hljs-number,
|
||||
.hljs-params,
|
||||
.hljs-string,
|
||||
.hljs-symbol,
|
||||
.hljs-type,
|
||||
.hljs-quote {
|
||||
color: highlight;
|
||||
}
|
||||
& .hljs-addition,
|
||||
& .hljs-attribute,
|
||||
& .hljs-built_in,
|
||||
& .hljs-bullet,
|
||||
& .hljs-comment,
|
||||
& .hljs-link,
|
||||
& .hljs-literal,
|
||||
& .hljs-meta,
|
||||
& .hljs-number,
|
||||
& .hljs-params,
|
||||
& .hljs-string,
|
||||
& .hljs-symbol,
|
||||
& .hljs-type,
|
||||
& .hljs-quote {
|
||||
color: highlight;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag {
|
||||
font-weight: bold;
|
||||
& .hljs-keyword,
|
||||
& .hljs-selector-tag {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -107,93 +108,94 @@
|
|||
Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
& .hljs {
|
||||
background: #2b2b2b;
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
/* Comment */
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
& .hljs-comment,
|
||||
& .hljs-quote {
|
||||
color: #d4d0ab;
|
||||
}
|
||||
|
||||
/* Red */
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-regexp,
|
||||
.hljs-deletion {
|
||||
& .hljs-variable,
|
||||
& .hljs-template-variable,
|
||||
& .hljs-tag,
|
||||
& .hljs-name,
|
||||
& .hljs-selector-id,
|
||||
& .hljs-selector-class,
|
||||
& .hljs-regexp,
|
||||
& .hljs-deletion {
|
||||
color: #ffa07a;
|
||||
}
|
||||
|
||||
/* Orange */
|
||||
.hljs-number,
|
||||
.hljs-built_in,
|
||||
.hljs-literal,
|
||||
.hljs-type,
|
||||
.hljs-params,
|
||||
.hljs-meta,
|
||||
.hljs-link {
|
||||
& .hljs-number,
|
||||
& .hljs-built_in,
|
||||
& .hljs-literal,
|
||||
& .hljs-type,
|
||||
& .hljs-params,
|
||||
& .hljs-meta,
|
||||
& .hljs-link {
|
||||
color: #f5ab35;
|
||||
}
|
||||
|
||||
/* Yellow */
|
||||
.hljs-attribute {
|
||||
& .hljs-attribute {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
/* Green */
|
||||
.hljs-string,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-addition {
|
||||
& .hljs-string,
|
||||
& .hljs-symbol,
|
||||
& .hljs-bullet,
|
||||
& .hljs-addition {
|
||||
color: #abe338;
|
||||
}
|
||||
|
||||
/* Blue */
|
||||
.hljs-title,
|
||||
.hljs-section {
|
||||
& .hljs-title,
|
||||
& .hljs-section {
|
||||
color: #00e0e0;
|
||||
}
|
||||
|
||||
/* Purple */
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag {
|
||||
& .hljs-keyword,
|
||||
& .hljs-selector-tag {
|
||||
color: #dcc6e0;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
& .hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
& .hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.hljs-addition,
|
||||
.hljs-attribute,
|
||||
.hljs-built_in,
|
||||
.hljs-bullet,
|
||||
.hljs-comment,
|
||||
.hljs-link,
|
||||
.hljs-literal,
|
||||
.hljs-meta,
|
||||
.hljs-number,
|
||||
.hljs-params,
|
||||
.hljs-string,
|
||||
.hljs-symbol,
|
||||
.hljs-type,
|
||||
.hljs-quote {
|
||||
color: highlight;
|
||||
}
|
||||
& .hljs-addition,
|
||||
& .hljs-attribute,
|
||||
& .hljs-built_in,
|
||||
& .hljs-bullet,
|
||||
& .hljs-comment,
|
||||
& .hljs-link,
|
||||
& .hljs-literal,
|
||||
& .hljs-meta,
|
||||
& .hljs-number,
|
||||
& .hljs-params,
|
||||
& .hljs-string,
|
||||
& .hljs-symbol,
|
||||
& .hljs-type,
|
||||
& .hljs-quote {
|
||||
color: highlight;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag {
|
||||
font-weight: bold;
|
||||
& .hljs-keyword,
|
||||
& .hljs-selector-tag {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -23,34 +23,34 @@ module.exports = {
|
|||
background: 'rgb(var(--color-background) / <alpha-value>)'
|
||||
},
|
||||
typography: ({ theme }) => ({
|
||||
colorful: {
|
||||
inhji: {
|
||||
css: {
|
||||
'--tw-prose-lead': theme('colors.rose[700]'),
|
||||
'--tw-prose-links': theme('colors.rose[900]'),
|
||||
'--tw-prose-counters': theme('colors.rose[600]'),
|
||||
'--tw-prose-bullets': theme('colors.rose[400]'),
|
||||
'--tw-prose-hr': theme('colors.rose[300]'),
|
||||
'--tw-prose-quotes': theme('colors.rose[900]'),
|
||||
'--tw-prose-quote-borders': theme('colors.rose[300]'),
|
||||
'--tw-prose-captions': theme('colors.rose[700]'),
|
||||
'--tw-prose-code': theme('colors.rose[900]'),
|
||||
'--tw-prose-pre-code': theme('colors.rose[100]'),
|
||||
'--tw-prose-pre-bg': theme('colors.rose[900]'),
|
||||
'--tw-prose-th-borders': theme('colors.rose[300]'),
|
||||
'--tw-prose-td-borders': theme('colors.rose[200]'),
|
||||
'--tw-prose-invert-lead': theme('colors.rose[300]'),
|
||||
'--tw-prose-lead': theme('colors.neutral[700]'),
|
||||
'--tw-prose-links': theme('colors.neutral[900]'),
|
||||
'--tw-prose-counters': theme('colors.neutral[600]'),
|
||||
'--tw-prose-bullets': theme('colors.neutral[400]'),
|
||||
'--tw-prose-hr': theme('colors.neutral[300]'),
|
||||
'--tw-prose-quotes': theme('colors.neutral[900]'),
|
||||
'--tw-prose-quote-borders': theme('colors.neutral[300]'),
|
||||
'--tw-prose-captions': theme('colors.neutral[700]'),
|
||||
'--tw-prose-code': theme('colors.neutral[900]'),
|
||||
'--tw-prose-pre-code': theme('colors.neutral[100]'),
|
||||
'--tw-prose-pre-bg': theme('colors.neutral[200]'),
|
||||
'--tw-prose-th-borders': theme('colors.neutral[300]'),
|
||||
'--tw-prose-td-borders': theme('colors.neutral[200]'),
|
||||
'--tw-prose-invert-lead': theme('colors.neutral[300]'),
|
||||
'--tw-prose-invert-links': theme('colors.white'),
|
||||
'--tw-prose-invert-counters': theme('colors.rose[400]'),
|
||||
'--tw-prose-invert-bullets': theme('colors.rose[600]'),
|
||||
'--tw-prose-invert-hr': theme('colors.rose[700]'),
|
||||
'--tw-prose-invert-quotes': theme('colors.rose[100]'),
|
||||
'--tw-prose-invert-quote-borders': theme('colors.rose[700]'),
|
||||
'--tw-prose-invert-captions': theme('colors.rose[400]'),
|
||||
'--tw-prose-invert-counters': theme('colors.neutral[400]'),
|
||||
'--tw-prose-invert-bullets': theme('colors.neutral[600]'),
|
||||
'--tw-prose-invert-hr': theme('colors.neutral[700]'),
|
||||
'--tw-prose-invert-quotes': theme('colors.neutral[100]'),
|
||||
'--tw-prose-invert-quote-borders': theme('colors.neutral[700]'),
|
||||
'--tw-prose-invert-captions': theme('colors.neutral[400]'),
|
||||
'--tw-prose-invert-code': theme('colors.white'),
|
||||
'--tw-prose-invert-pre-code': theme('colors.rose[300]'),
|
||||
'--tw-prose-invert-pre-code': theme('colors.neutral[300]'),
|
||||
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
|
||||
'--tw-prose-invert-th-borders': theme('colors.rose[600]'),
|
||||
'--tw-prose-invert-td-borders': theme('colors.rose[700]'),
|
||||
'--tw-prose-invert-th-borders': theme('colors.neutral[600]'),
|
||||
'--tw-prose-invert-td-borders': theme('colors.neutral[700]'),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
|
|
|||
Loading…
Reference in a new issue