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} */ |
/** @type {import('tailwindcss').Config} */ |
||||||
module.exports = { |
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: { |
theme: { |
||||||
extend: {}, |
extend: {}, |
||||||
container: { |
container: { |
||||||
center: true, |
center: true, |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
plugins: [], |
plugins: [require("@tailwindcss/typography")], |
||||||
} |
}; |
||||||
|
|||||||
Loading…
Reference in new issue