rougify를 이용해서 원하는 스타일의 코드 블록 css 파일을 받으실 수 있습니다.
백지부터 시작하시는 고수분들도 있겠지만 저는 기본 템플릿에서 약간의 커스텀만 적용하도록 하겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
% rougify help style
usage: rougify style [<theme-name>] [<options>]
Print CSS styles for the given theme. Extra options are
passed to the theme. To select a mode (light/dark) for the
theme, append '.light' or '.dark' to the <theme-name>
respectively. Theme defaults to thankful_eyes.
options:
--scope (default: .highlight) a css selector to scope by
--tex (default: false) render as TeX
--tex-prefix (default: RG) a command prefix for TeX
implies --tex if specified
available themes:
base16, base16.dark, base16.light, base16.monokai, base16.monokai.dark, base16.monokai.light, base16.solarized, base16.solarized.dark, base16.solarized.light, bw, colorful, github, gruvbox, gruvbox.dark, gruvbox.light, igorpro, magritte, molokai, monokai, monokai.sublime, pastie, thankful_eyes, tulip
available themes에서 각자 원하는 테마를 골라봅시다.
1
% rougify style <themes> > ~/<블로그>/assets/highlight.css
1
<link rel="stylesheet" href="/assets/highlight.css">
1
2
3
4
5
markdown: kramdown
kramdown:
syntax_highlighter: rouge
syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
css_class: highlight
아마 생각보다 이쁘지 않다 느끼셨을 겁니다. 저도 그러했고요. 몇가지 커스텀을 추가해봅시다.
저는 가로 스크롤바가 맘에 들지 않아 평소에는 투명색으로 하고 hover시에 보이도록 했습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.highlight pre {
&::-webkit-scrollbar {
height: 5px;
width: auto;
}
/* 스크롤바 뒷 배경 설정 */
&::-webkit-scrollbar-track {
background-color: #f8f8f8;
}
&:hover {
border-color: var(--gray);
transition: border-color 0.2s ease;
}
/* 스크롤바 막대 설정 */
&::-webkit-scrollbar-thumb {
background-color: transparent;
border-color: inherit;
border-radius: 10px;
border-right-style: inset;
border-right-width: calc(100vw + 100vh);
}
}
그리고 라인줄에 대한 처리도 추가하였습니다. 라인줄에 대한 처리중 복잡했던 부분은 table이 생성되면서 기존 table에서 썻던 스타일이 같이 적용되면서 문제가 있었는데 잘 분리해줍시다.
그리고 복사하기 편하도록 라인 줄은 복사가 안되도록 처리하였습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.highlight td {
padding: 10px;
border-top: 1px solid #c6c9cc;
}
.highlight tr:first-child td:first-child {
border-top-left-radius: 6px;
}
.highlight tr:first-child td:last-child {
border-top-right-radius: 6px;
}
.highlight table pre {
margin: 0;
}
/* 라인 줄 복사 방지 */
.highlight .rouge-gutter {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 10px;
background-color: var(--gray);
}
.highlight .rouge-gutter .lineno{
color: #f8f8f8;
text-align: right
}
참고하시고 각자 개성넘치게 꾸미실 수 있으면 좋겠습니다.😆