Skip to content

Commit 07152fb

Browse files
chebreadchebread
committed
featL Add code highlighting feature
1 parent 4d4d3d7 commit 07152fb

14 files changed

Lines changed: 176 additions & 33 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ pnpm run build
1111
```shell
1212
go install github.com/cortesi/devd/cmd/devd@latest
1313

14+
brew install chroma
15+
16+
chroma --html-styles --style=github > layout/styles/chroma.css
17+
1418
pnpm install
1519
```
1620

‎content/velog/바닐라 자바스크립트의 한계.md‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,22 @@ Vanilla JavaScript로 코딩하는 것이 어떤 방식으로 이루어지는
2727

2828
```html
2929
<template>
30-
<button @click="increase"></button>
31-
<div>{{ count }}</div>
30+
<button @click="increase"></button>
31+
<div>{{ count }}</div>
3232
</template>
3333
```
3434
```html
3535
<script>
3636
// options api
3737
export default {
38-
data() {
39-
count: 0
40-
},
41-
methods: {
42-
increase() {
43-
this.count++;
44-
}
45-
}
38+
data() {
39+
count: 0
40+
},
41+
methods: {
42+
increase() {
43+
this.count++;
44+
}
45+
}
4646
}
4747
</script>
4848
```
@@ -56,15 +56,15 @@ this.count++;
5656
const app = document.querySelector('#app');
5757
let count = 0;
5858
const component = () => {
59-
app.innerHTML = `
60-
<button id="increase"></button>
61-
<div>${count}</div>
62-
`;
63-
const increaseId = document.querySelector('#increase');
64-
increaseId.addEventListener('click', () => {
65-
count++;
66-
component();
67-
});
59+
app.innerHTML = `
60+
<button id="increase"></button>
61+
<div>${count}</div>
62+
`;
63+
const increaseId = document.querySelector('#increase');
64+
increaseId.addEventListener('click', () => {
65+
count++;
66+
component();
67+
});
6868
};
6969
```
7070

‎go.mod‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,9 @@ require (
77
github.com/yuin/goldmark-meta v1.1.0
88
gopkg.in/yaml.v2 v2.3.0
99
)
10+
11+
require (
12+
github.com/alecthomas/chroma/v2 v2.2.0 // indirect
13+
github.com/dlclark/regexp2 v1.7.0 // indirect
14+
github.com/yuin/goldmark-highlighting/v2 v2.0.0-20230729083705-37449abec8cc // indirect
15+
)

‎go.sum‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,23 @@
1+
github.com/alecthomas/chroma/v2 v2.2.0 h1:Aten8jfQwUqEdadVFFjNyjx7HTexhKP0XuqBG67mRDY=
2+
github.com/alecthomas/chroma/v2 v2.2.0/go.mod h1:vf4zrexSH54oEjJ7EdB65tGNHmH3pGZmVkgTP5RHvAs=
3+
github.com/alecthomas/repr v0.0.0-20220113201626-b1b626ac65ae/go.mod h1:2kn6fqh/zIyPLmm3ugklbEi5hg5wS435eygvNfaDQL8=
4+
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
5+
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
6+
github.com/dlclark/regexp2 v1.4.0/go.mod h1:2pZnwuY/m+8K6iRw6wQdMtk+rH5tNGR1i55kozfMjCc=
7+
github.com/dlclark/regexp2 v1.7.0 h1:7lJfhqlPssTb1WQx4yvTHN0uElPEv52sbaECrAQxjAo=
8+
github.com/dlclark/regexp2 v1.7.0/go.mod h1:DHkYz0B9wPfa6wondMfaivmHpzrQ3v9q8cnmRbL6yW8=
9+
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
10+
github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
11+
github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
12+
github.com/yuin/goldmark v1.4.15/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
113
github.com/yuin/goldmark v1.7.13 h1:GPddIs617DnBLFFVJFgpo1aBfe/4xcvMc3SB5t/D0pA=
214
github.com/yuin/goldmark v1.7.13/go.mod h1:ip/1k0VRfGynBgxOz0yCqHrbZXhcjxyuS66Brc7iBKg=
15+
github.com/yuin/goldmark-highlighting/v2 v2.0.0-20230729083705-37449abec8cc h1:+IAOyRda+RLrxa1WC7umKOZRsGq4QrFFMYApOeHzQwQ=
16+
github.com/yuin/goldmark-highlighting/v2 v2.0.0-20230729083705-37449abec8cc/go.mod h1:ovIvrum6DQJA4QsJSovrkC4saKHQVs7TvcaeO8AIl5I=
317
github.com/yuin/goldmark-meta v1.1.0 h1:pWw+JLHGZe8Rk0EGsMVssiNb/AaPMHfSRszZeUeiOUc=
418
github.com/yuin/goldmark-meta v1.1.0/go.mod h1:U4spWENafuA7Zyg+Lj5RqK/MF+ovMYtBvXi1lBb2VP0=
519
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
620
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
721
gopkg.in/yaml.v2 v2.3.0 h1:clyUAQHOM3G0M3f5vQj7LuJrETvjVot3Z5el9nffUtU=
822
gopkg.in/yaml.v2 v2.3.0/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
23+
gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

‎layout/about.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
<link rel="stylesheet" href="/styles/reset.css" />
4040
<link rel="stylesheet" href="/styles/layout.css" />
4141
<link rel="stylesheet" href="/styles/color-palette.css">
42+
<link rel="stylesheet" href="/styles/chroma.css">
4243

4344
<link rel="stylesheet" href="/styles/about.css">
4445
<link rel="stylesheet" href="/styles/github-markdown.css">

‎layout/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
<link rel="stylesheet" href="/styles/reset.css" />
4040
<link rel="stylesheet" href="/styles/layout.css" />
4141
<link rel="stylesheet" href="/styles/color-palette.css">
42+
<link rel="stylesheet" href="/styles/chroma.css">
4243

4344
<link rel="stylesheet" href="/styles/home.css">
4445
<link rel="stylesheet" href="/styles/github-markdown.css">

‎layout/post.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,10 @@
4040
<link rel="stylesheet" href="/styles/reset.css" />
4141
<link rel="stylesheet" href="/styles/layout.css" />
4242
<link rel="stylesheet" href="/styles/color-palette.css">
43+
<link rel="stylesheet" href="/styles/chroma.css">
4344

44-
<link rel="stylesheet" href="/styles/post.css">
4545
<link rel="stylesheet" href="/styles/github-markdown.css">
46+
<link rel="stylesheet" href="/styles/post.css">
4647

4748
<link rel="icon" href="/favicons/favicon.ico" sizes="any">
4849
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">

‎layout/styles/about.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,10 @@
6363
}
6464

6565
.about-hero {
66-
height: 20rem;
66+
height: 17.5rem;
67+
@media (max-width: 35rem) {
68+
height: 15rem;
69+
}
6770

6871
display: flex;
6972
flex-direction: column;

‎layout/styles/chroma.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/* Background */ .bg { background-color: #ffffff; }
2+
/* PreWrapper */ .chroma { background-color: #ffffff; }
3+
/* Error */ .chroma .err { color: #f6f8fa; background-color: #82071e }
4+
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
5+
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
6+
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
7+
/* LineHighlight */ .chroma .hl { background-color: #e5e5e5 }
8+
/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
9+
/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
10+
/* Line */ .chroma .line { display: flex; }
11+
/* Keyword */ .chroma .k { color: #cf222e }
12+
/* KeywordConstant */ .chroma .kc { color: #cf222e }
13+
/* KeywordDeclaration */ .chroma .kd { color: #cf222e }
14+
/* KeywordNamespace */ .chroma .kn { color: #cf222e }
15+
/* KeywordPseudo */ .chroma .kp { color: #cf222e }
16+
/* KeywordReserved */ .chroma .kr { color: #cf222e }
17+
/* KeywordType */ .chroma .kt { color: #cf222e }
18+
/* NameAttribute */ .chroma .na { color: #1f2328 }
19+
/* NameClass */ .chroma .nc { color: #1f2328 }
20+
/* NameConstant */ .chroma .no { color: #0550ae }
21+
/* NameDecorator */ .chroma .nd { color: #0550ae }
22+
/* NameEntity */ .chroma .ni { color: #6639ba }
23+
/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold }
24+
/* NameNamespace */ .chroma .nn { color: #24292e }
25+
/* NameOther */ .chroma .nx { color: #1f2328 }
26+
/* NameTag */ .chroma .nt { color: #0550ae }
27+
/* NameBuiltin */ .chroma .nb { color: #6639ba }
28+
/* NameBuiltinPseudo */ .chroma .bp { color: #6a737d }
29+
/* NameVariable */ .chroma .nv { color: #953800 }
30+
/* NameVariableClass */ .chroma .vc { color: #953800 }
31+
/* NameVariableGlobal */ .chroma .vg { color: #953800 }
32+
/* NameVariableInstance */ .chroma .vi { color: #953800 }
33+
/* NameVariableMagic */ .chroma .vm { color: #953800 }
34+
/* NameFunction */ .chroma .nf { color: #6639ba }
35+
/* NameFunctionMagic */ .chroma .fm { color: #6639ba }
36+
/* LiteralString */ .chroma .s { color: #0a3069 }
37+
/* LiteralStringAffix */ .chroma .sa { color: #0a3069 }
38+
/* LiteralStringBacktick */ .chroma .sb { color: #0a3069 }
39+
/* LiteralStringChar */ .chroma .sc { color: #0a3069 }
40+
/* LiteralStringDelimiter */ .chroma .dl { color: #0a3069 }
41+
/* LiteralStringDoc */ .chroma .sd { color: #0a3069 }
42+
/* LiteralStringDouble */ .chroma .s2 { color: #0a3069 }
43+
/* LiteralStringEscape */ .chroma .se { color: #0a3069 }
44+
/* LiteralStringHeredoc */ .chroma .sh { color: #0a3069 }
45+
/* LiteralStringInterpol */ .chroma .si { color: #0a3069 }
46+
/* LiteralStringOther */ .chroma .sx { color: #0a3069 }
47+
/* LiteralStringRegex */ .chroma .sr { color: #0a3069 }
48+
/* LiteralStringSingle */ .chroma .s1 { color: #0a3069 }
49+
/* LiteralStringSymbol */ .chroma .ss { color: #032f62 }
50+
/* LiteralNumber */ .chroma .m { color: #0550ae }
51+
/* LiteralNumberBin */ .chroma .mb { color: #0550ae }
52+
/* LiteralNumberFloat */ .chroma .mf { color: #0550ae }
53+
/* LiteralNumberHex */ .chroma .mh { color: #0550ae }
54+
/* LiteralNumberInteger */ .chroma .mi { color: #0550ae }
55+
/* LiteralNumberIntegerLong */ .chroma .il { color: #0550ae }
56+
/* LiteralNumberOct */ .chroma .mo { color: #0550ae }
57+
/* Operator */ .chroma .o { color: #0550ae }
58+
/* OperatorWord */ .chroma .ow { color: #0550ae }
59+
/* Punctuation */ .chroma .p { color: #1f2328 }
60+
/* Comment */ .chroma .c { color: #57606a }
61+
/* CommentHashbang */ .chroma .ch { color: #57606a }
62+
/* CommentMultiline */ .chroma .cm { color: #57606a }
63+
/* CommentSingle */ .chroma .c1 { color: #57606a }
64+
/* CommentSpecial */ .chroma .cs { color: #57606a }
65+
/* CommentPreproc */ .chroma .cp { color: #57606a }
66+
/* CommentPreprocFile */ .chroma .cpf { color: #57606a }
67+
/* GenericDeleted */ .chroma .gd { color: #82071e; background-color: #ffebe9 }
68+
/* GenericEmph */ .chroma .ge { color: #1f2328 }
69+
/* GenericInserted */ .chroma .gi { color: #116329; background-color: #dafbe1 }
70+
/* GenericOutput */ .chroma .go { color: #1f2328 }
71+
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
72+
/* TextWhitespace */ .chroma .w { color: #ffffff }

‎layout/styles/home.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,10 @@
6363
}
6464

6565
.home-hero {
66-
height: 20rem; /* TODO: height 유동적 조절 고려 해보기 */
66+
height: 17.5rem;
67+
@media (max-width: 35rem) {
68+
height: 15rem;
69+
}
6770

6871
display: flex;
6972
flex-direction: column;

0 commit comments

Comments
 (0)