Kamran Ahmed
2 years ago
parent
358c1440d8
commit
274eeece7a
6 changed files with 320 additions and 10 deletions
@ -0,0 +1,9 @@ |
||||
--- |
||||
import "./Prism.css"; |
||||
--- |
||||
|
||||
<div class="bg-gray-50 py-4 sm:py-10"> |
||||
<div class="container prose prose-headings:mt-4 prose-headings:mb-2 prose-p:mb-0.5 prose-ul:mt-0"> |
||||
<slot /> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,208 @@ |
||||
div[class*="language-"], |
||||
code[class*='language-'], |
||||
pre[class*='language-'] { |
||||
color: #9efeff; |
||||
direction: ltr; |
||||
text-align: left; |
||||
white-space: pre; |
||||
word-spacing: normal; |
||||
word-break: normal; |
||||
|
||||
-moz-tab-size: 4; |
||||
-o-tab-size: 4; |
||||
tab-size: 4; |
||||
|
||||
-webkit-hyphens: none; |
||||
-moz-hyphens: none; |
||||
-ms-hyphens: none; |
||||
hyphens: none; |
||||
|
||||
font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
font-weight: 400; |
||||
font-size: .95rem; |
||||
line-height: 1.3; |
||||
|
||||
letter-spacing: 0.5px; |
||||
text-shadow: 0 1px #222245; |
||||
|
||||
margin-bottom: 25px !important; |
||||
} |
||||
|
||||
pre[class*='language-']::-moz-selection, |
||||
pre[class*='language-'] ::-moz-selection, |
||||
code[class*='language-']::-moz-selection, |
||||
code[class*='language-'] ::-moz-selection, |
||||
pre[class*='language-']::selection, |
||||
pre[class*='language-'] ::selection, |
||||
code[class*='language-']::selection, |
||||
code[class*='language-'] ::selection { |
||||
color: inherit; |
||||
background: #a599e9; |
||||
} |
||||
|
||||
code:not([class]) { |
||||
padding: 2px 4px; |
||||
font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
font-size: .875rem; |
||||
background-color: #FAFAFA; |
||||
border: 1px solid #EAEAEA; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
/* Code blocks. */ |
||||
pre[class*='language-'] { |
||||
padding: 1em; |
||||
border-radius: 4px; |
||||
|
||||
margin: 0.5em 0; |
||||
overflow: auto; |
||||
} |
||||
|
||||
:not(pre) > code[class*='language-'], |
||||
pre[class*='language-'] { |
||||
background: #1e1e3f; |
||||
} |
||||
|
||||
/* Inline code */ |
||||
:not(pre) > code[class*='language-'] { |
||||
padding: 0.1em; |
||||
border-radius: 0.3em; |
||||
} |
||||
|
||||
.token { |
||||
font-weight: 400; |
||||
} |
||||
|
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.cdata { |
||||
color: #b362ff; |
||||
} |
||||
|
||||
.token.delimiter, |
||||
.token.keyword, |
||||
.token.selector, |
||||
.token.important, |
||||
.token.atrule { |
||||
color: #ff9d00; |
||||
} |
||||
|
||||
.token.operator, |
||||
.token.attr-name { |
||||
color: rgb(255, 180, 84); |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #ffffff; |
||||
} |
||||
|
||||
.token.boolean { |
||||
color: rgb(255, 98, 140); |
||||
} |
||||
|
||||
.token.tag, |
||||
.token.tag .punctuation, |
||||
.token.doctype, |
||||
.token.builtin { |
||||
color: rgb(255, 157, 0); |
||||
} |
||||
|
||||
.token.entity, |
||||
.token.symbol { |
||||
color: #6897bb; |
||||
} |
||||
|
||||
.token.number { |
||||
color: #ff628c; |
||||
} |
||||
|
||||
.token.property, |
||||
.token.constant, |
||||
.token.variable { |
||||
color: #ff628c; |
||||
} |
||||
|
||||
.token.string, |
||||
.token.char { |
||||
color: #a5ff90; |
||||
} |
||||
|
||||
.token.attr-value, |
||||
.token.attr-value .punctuation { |
||||
color: #a5c261; |
||||
} |
||||
|
||||
.token.attr-value .punctuation:first-child { |
||||
color: #a9b7c6; |
||||
} |
||||
|
||||
.token.url { |
||||
color: #287bde; |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.token.function { |
||||
color: rgb(250, 208, 0); |
||||
} |
||||
|
||||
.token.regex { |
||||
background: #364135; |
||||
} |
||||
|
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.inserted { |
||||
background: #00ff00; |
||||
} |
||||
|
||||
.token.deleted { |
||||
background: #ff000d; |
||||
} |
||||
|
||||
code.language-css .token.property, |
||||
code.language-css .token.property + .token.punctuation { |
||||
color: #a9b7c6; |
||||
} |
||||
|
||||
code.language-css .token.id { |
||||
color: #ffc66d; |
||||
} |
||||
|
||||
code.language-css .token.selector > .token.class, |
||||
code.language-css .token.selector > .token.attribute, |
||||
code.language-css .token.selector > .token.pseudo-class, |
||||
code.language-css .token.selector > .token.pseudo-element { |
||||
color: #ffc66d; |
||||
} |
||||
|
||||
.token.class-name { |
||||
color: #fb94ff; |
||||
} |
||||
|
||||
.token.operator, |
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
background: none; |
||||
} |
||||
|
||||
pre .line-highlight, |
||||
pre .line-highlight.line-highlight, |
||||
pre > code.line-highlight { |
||||
margin-top: 36px; |
||||
background: linear-gradient(to right, rgba(179, 98, 255, 0.17), transparent); |
||||
} |
||||
|
||||
pre .line-highlight:before, |
||||
pre > code.line-highlight:before, |
||||
pre .line-highlight[data-end]:after, |
||||
pre > code.line-highlight[data-end]:after { |
||||
content: ''; |
||||
} |
||||
@ -1,11 +1,11 @@ |
||||
/** @type {import('tailwindcss').Config} */ |
||||
module.exports = { |
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,svg}'], |
||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,svg}"], |
||||
theme: { |
||||
extend: {}, |
||||
container: { |
||||
center: true, |
||||
}, |
||||
}, |
||||
plugins: [], |
||||
} |
||||
plugins: [require("@tailwindcss/typography")], |
||||
}; |
||||
|
||||
Loading…
Reference in new issue