Skip to content

Commit 3aedf34

Browse files
koh110koh110
committed
theme
1 parent c2a4b8c commit 3aedf34

File tree

6 files changed

+294
-0
lines changed

6 files changed

+294
-0
lines changed

‎astro/astro.config.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default defineConfig({
1010
integrations: [react()],
1111
// https://docs.astro.build/en/reference/configuration-reference/#markdown-options
1212
markdown: {
13+
syntaxHighlight: 'prism',
1314
rehypePlugins: [
1415
rehypeSlug,
1516
[

‎astro/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"serve": "serve ./dist -l 3000"
1313
},
1414
"dependencies": {
15+
"@astrojs/prism": "^3.2.0",
1516
"@astrojs/react": "^4.2.7",
1617
"astro": "^5.7.10",
1718
"react": "^19.1.0",

‎astro/public/themes/prism-vsc-dark-plus.css

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
pre[class*="language-"],
2+
code[class*="language-"] {
3+
color: #d4d4d4;
4+
font-size: 13px;
5+
text-shadow: none;
6+
font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
7+
direction: ltr;
8+
text-align: left;
9+
white-space: pre;
10+
word-spacing: normal;
11+
word-break: normal;
12+
line-height: 1.5;
13+
-moz-tab-size: 4;
14+
-o-tab-size: 4;
15+
tab-size: 4;
16+
-webkit-hyphens: none;
17+
-moz-hyphens: none;
18+
-ms-hyphens: none;
19+
hyphens: none;
20+
}
21+
22+
pre[class*="language-"]::selection,
23+
code[class*="language-"]::selection,
24+
pre[class*="language-"] *::selection,
25+
code[class*="language-"] *::selection {
26+
text-shadow: none;
27+
background: #264F78;
28+
}
29+
30+
@media print {
31+
pre[class*="language-"],
32+
code[class*="language-"] {
33+
text-shadow: none;
34+
}
35+
}
36+
37+
pre[class*="language-"] {
38+
padding: 1em;
39+
margin: .5em 0;
40+
overflow: auto;
41+
background: #1e1e1e;
42+
}
43+
44+
:not(pre) > code[class*="language-"] {
45+
padding: .1em .3em;
46+
border-radius: .3em;
47+
color: #db4c69;
48+
background: #1e1e1e;
49+
}
50+
/*********************************************************
51+
* Tokens
52+
*/
53+
.namespace {
54+
opacity: .7;
55+
}
56+
57+
.token.doctype .token.doctype-tag {
58+
color: #569CD6;
59+
}
60+
61+
.token.doctype .token.name {
62+
color: #9cdcfe;
63+
}
64+
65+
.token.comment,
66+
.token.prolog {
67+
color: #6a9955;
68+
}
69+
70+
.token.punctuation,
71+
.language-html .language-css .token.punctuation,
72+
.language-html .language-javascript .token.punctuation {
73+
color: #d4d4d4;
74+
}
75+
76+
.token.property,
77+
.token.tag,
78+
.token.boolean,
79+
.token.number,
80+
.token.constant,
81+
.token.symbol,
82+
.token.inserted,
83+
.token.unit {
84+
color: #b5cea8;
85+
}
86+
87+
.token.selector,
88+
.token.attr-name,
89+
.token.string,
90+
.token.char,
91+
.token.builtin,
92+
.token.deleted {
93+
color: #ce9178;
94+
}
95+
96+
.language-css .token.string.url {
97+
text-decoration: underline;
98+
}
99+
100+
.token.operator,
101+
.token.entity {
102+
color: #d4d4d4;
103+
}
104+
105+
.token.operator.arrow {
106+
color: #569CD6;
107+
}
108+
109+
.token.atrule {
110+
color: #ce9178;
111+
}
112+
113+
.token.atrule .token.rule {
114+
color: #c586c0;
115+
}
116+
117+
.token.atrule .token.url {
118+
color: #9cdcfe;
119+
}
120+
121+
.token.atrule .token.url .token.function {
122+
color: #dcdcaa;
123+
}
124+
125+
.token.atrule .token.url .token.punctuation {
126+
color: #d4d4d4;
127+
}
128+
129+
.token.keyword {
130+
color: #569CD6;
131+
}
132+
133+
.token.keyword.module,
134+
.token.keyword.control-flow {
135+
color: #c586c0;
136+
}
137+
138+
.token.function,
139+
.token.function .token.maybe-class-name {
140+
color: #dcdcaa;
141+
}
142+
143+
.token.regex {
144+
color: #d16969;
145+
}
146+
147+
.token.important {
148+
color: #569cd6;
149+
}
150+
151+
.token.italic {
152+
font-style: italic;
153+
}
154+
155+
.token.constant {
156+
color: #9cdcfe;
157+
}
158+
159+
.token.class-name,
160+
.token.maybe-class-name {
161+
color: #4ec9b0;
162+
}
163+
164+
.token.console {
165+
color: #9cdcfe;
166+
}
167+
168+
.token.parameter {
169+
color: #9cdcfe;
170+
}
171+
172+
.token.interpolation {
173+
color: #9cdcfe;
174+
}
175+
176+
.token.punctuation.interpolation-punctuation {
177+
color: #569cd6;
178+
}
179+
180+
.token.boolean {
181+
color: #569cd6;
182+
}
183+
184+
.token.property,
185+
.token.variable,
186+
.token.imports .token.maybe-class-name,
187+
.token.exports .token.maybe-class-name {
188+
color: #9cdcfe;
189+
}
190+
191+
.token.selector {
192+
color: #d7ba7d;
193+
}
194+
195+
.token.escape {
196+
color: #d7ba7d;
197+
}
198+
199+
.token.tag {
200+
color: #569cd6;
201+
}
202+
203+
.token.tag .token.punctuation {
204+
color: #808080;
205+
}
206+
207+
.token.cdata {
208+
color: #808080;
209+
}
210+
211+
.token.attr-name {
212+
color: #9cdcfe;
213+
}
214+
215+
.token.attr-value,
216+
.token.attr-value .token.punctuation {
217+
color: #ce9178;
218+
}
219+
220+
.token.attr-value .token.punctuation.attr-equals {
221+
color: #d4d4d4;
222+
}
223+
224+
.token.entity {
225+
color: #569cd6;
226+
}
227+
228+
.token.namespace {
229+
color: #4ec9b0;
230+
}
231+
/*********************************************************
232+
* Language Specific
233+
*/
234+
235+
pre[class*="language-javascript"],
236+
code[class*="language-javascript"],
237+
pre[class*="language-jsx"],
238+
code[class*="language-jsx"],
239+
pre[class*="language-typescript"],
240+
code[class*="language-typescript"],
241+
pre[class*="language-tsx"],
242+
code[class*="language-tsx"] {
243+
color: #9cdcfe;
244+
}
245+
246+
pre[class*="language-css"],
247+
code[class*="language-css"] {
248+
color: #ce9178;
249+
}
250+
251+
pre[class*="language-html"],
252+
code[class*="language-html"] {
253+
color: #d4d4d4;
254+
}
255+
256+
.language-regex .token.anchor {
257+
color: #dcdcaa;
258+
}
259+
260+
.language-html .token.punctuation {
261+
color: #808080;
262+
}
263+
/*********************************************************
264+
* Line highlighting
265+
*/
266+
pre[class*="language-"] > code[class*="language-"] {
267+
position: relative;
268+
z-index: 1;
269+
}
270+
271+
.line-highlight.line-highlight {
272+
background: #f7ebc6;
273+
box-shadow: inset 5px 0 0 #f7d87c;
274+
z-index: 0;
275+
}

‎astro/src/layouts/Layout.astro

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const { title, description, content, ogImagePath, path } = Astro.props;
3030
<meta property="og:site_name" content="kohsweblog" />
3131
<meta name="twitter:card" content="summary_large_image" />
3232
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
33+
<slot name="head" />
3334
<Ga />
3435
</head>
3536
<body>

‎astro/src/layouts/MarkdownPostLayout.astro

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const imgFlag = true
3131
ogImagePath={ogImagePath}
3232
path={`/${post.id}`}
3333
>
34+
<link slot="head" href="/themes/prism-vsc-dark-plus.css" rel="stylesheet" />
3435
<script
3536
slot="scripts"
3637
src="https://b.st-hatena.com/js/bookmark_button.js"
@@ -94,6 +95,20 @@ const imgFlag = true
9495
padding: 1.5rem;
9596
max-width: 50em;
9697
}
98+
main :global(img) {
99+
max-width: 100%;
100+
height: auto;
101+
}
102+
main :global(p) :global(code), main :global(li) :global(code) {
103+
color: #CFD4D4;
104+
background-color: #1e1e1e;
105+
padding: 0.2em 0.4em;
106+
}
107+
main :global(h2) :global(a) :global(.material-symbols-outlined) {
108+
padding-left: 0.2em;
109+
font-size: 1.2em;
110+
vertical-align: middle;
111+
}
97112
hr {
98113
margin: 4em 0 4em 0;
99114
}

‎package-lock.json

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)