์ด์ ๋ธ๋ก๊ทธ์ MAC ์คํ์ผ ์ฝ๋๋ธ๋ญ ํ ๋ง ์ ์ฉํ๋ ค๊ณ ํ๋๋ฐ
COPY ๋ธ๋ญ์ด ์ ๋จนํ๋ ๋ฌธ์ & window์์ ์ฝ๋๋ธ๋ก ๊นจ์ง๋ ํ์์ผ๋ก ์์๋ณต๊ตฌ ํ๋ค.
๋ด ๋ธ๋ก๊ทธ๋ ๋คํฌ๋ชจ๋ ๋ง์๋จ๋๋ฐ ์ฝ๋๋ธ๋ญ๋ง ๋คํฌ๋ชจ๋๋ก ๋์ค๊ฒ ํด ์ฃผ๊ณ ์ถ์ด์
๊ทธ๋์ ๊ทธ๋ฅ ๋คํฌ๋ชจ๋๋ก ์ง์ ์ปค์คํ ํ๊ธฐ๋ก ํ์
์ฐธ๊ณ ๋ก ๋๋ heLLO ์คํจ ์ฌ์ฉ์ค + ๋คํฌ๋ชจ๋ ๊ฐ์ ๋ก ํด์ + ์ฝ๋๋ธ๋ญ์ธ๋ผ์ธ๋๋ฒ ์ถ๊ฐ
ํด ๋์ ์ํ์์ ์์ํจ
์์ฑ์ (์ฝ๋ ์นดํผ ๋ฒํผ์ ๋ณ๋๋ก ํฌ์คํ ํ ์์ )
1. ์ฝ๋๋ธ๋ญ ๋ฐฐ๊ฒฝ ์์ ๋ณ๊ฒฝ
์คํจํธ์ง > htmlํธ์ง > css ํธ์ง > pre code ๊ฒ์
ํด๋น ๋ธ๋ญ ์ฃผ์ ์ฒ๋ฆฌ
#content .contents_style pre code {
padding-left: 1rem;
padding-right: 1rem;
line-height: 1.5
}
์๋ ์ฝ๋ ์ ์ฉ
/* ์ฝ๋๋ธ๋ญ ๋ฐฐ๊ฒฝ์ ๋ธ๋ & border-radius */
#content .contents_style pre code {
background-color: #292A2D !important; // ๋ธ๋ ๋ฐฐ๊ฒฝ
border-radius: 0.75rem; // ํ
๋๋ฆฌ ๋ฅ๊ธ๊ฒ
padding-left: 1rem;
padding-right: 1rem;
line-height: 1.5
}
์ด ๊ณผ์ ์ ์ฝ๋๋ธ๋ญ ์์์ ์๋์ผ๋ก ๋ณ๊ฒฝ ํด ์ฃผ๊ณ , ์ฝ๋๋ธ๋ญ์ ๊ฐ์ง ํ ๋๋ฆฌ๋ฅผ ๋ฅ๊ธ๊ฒ ํด ์ฃผ๋ ๊ณผ์ ์ด๋ค.
pre code์ background-color, border-radius ์์ฑ์ ๋ฃ์ด ์ฃผ์๋ค.
์ฌ๊ธฐ๊น์ง ์ฝ๋ ๋ธ๋ญ ๋ฐฐ๊ฒฝ์ ์ด๋ก๊ฒ ๋ฐ๊ฟจ๋๋ฐ ์ด์ ๊ธ์จ๊ฐ ์ ์ ๋ณด์ธ๋ค.
ํฐ์คํ ๋ฆฌ Syntax Highlighter ํ๋ฌ๊ทธ์ธ์์ ๋คํฌ ๋ชจ๋๋ฅผ ์ง์ํ์ง๋ง ์ฝ๋ ์์์ด ์ ์๋ป์
highlight.js ์น์ฌ์ดํธ์ ๊ฐ์ ๋ง์์ ๋๋ ํ ๋ง๋ก ๊พธ๋ฉฐ์ค ์์ ์ด๋ค.
๋จผ์ ํฐ์คํ ๋ฆฌ Syntax Highlighter ํ๋ฌ๊ทธ์ธ ํด์ ํด ์ฃผ์
ํน์๋ผ๋ ์ถฉ๋์ด ๋๊ฑฐ๋ ๋ณ๊ฒฝํ ๊ฐ์ด ์๋จนํ ์ ์๊ธฐ ๋๋ฌธ
2. ์ฝ๋๋ธ๋ญ ๊ธ์จ ์์ ์ปค์คํ
highlightjs ์น์ฌ์ดํธ์ DEMO ํญ ๋ค์ด๊ฐ๋ฉด ์ํ๋ ํ ๋ง๋ฅผ ํ ์คํธ ํด ๋ณผ ์ ์์
์ผ์ชฝ ํ๋จ์ ์ฝ๋๋ฅผ ๋ถ์ฌ๋ฃ๊ธฐ ํ๊ณ ์ด๊ฒ์ ๊ฒ ๊ณจ๋ผ ๋ณด๋ฉด ์ฐ์ธก์์ ํ๋ฉด์ ์ด๋ป๊ฒ ๋ณด์ด๋์ง ๋ฐ๋ก ํ์ธ ํ ์ ์๋ค.
https://highlightjs.org/download
Download a Custom Build - highlight.js
highlightjs.org
๋๋ ๋คํฌ๋ชจ๋์ ์ด์ธ๋ฆฌ๋ vs2015๋ฅผ ๊ณจ๋ผ ์ฃผ์๋ค. ๊ณจ๋์ผ๋ฉด DOWNLOAD ํญ ๊ฐ์ zipํ์ผ ๋ค์ด๋ฐ๊ธฐ
์ค๋น๋ฌผ
1. highlight.min.js
2. sytles ํด๋ ์์ ์๋ vs2015.min.css
(๋๋ vs2015์ด์ง๋ง ๊ฐ์ธ์ ๋ฐ๋ผ ์ํ๋ ํ ๋ง ํ์ผ๋ช ์ด ๋ค๋ฆ)
๋ธ๋ก๊ทธ ์ค์ > ์คํจ ํธ์ง > html ํธ์ง > ํ์ผ์ ๋ก๋์ ๊ฐ์
1. highlight.min.js
2. sytles ํด๋ ์์ ์๋ vs2015.min.css
์ ๋ ๊ฐ์ง ํ์ผ ๋ฑ๋ก
๊ทธ ๋ค์์ html ํธ์ง์ผ๋ก ๊ฐ์ ์๋ ํ๊ทธ 4์ค์ ๋ณต์ฌํด์ <head> ์์ ๋ฃ์ด์ค๋ค.
๊ทธ๋ฅ </head> ๋ฐ๋ก ์์ ๋ฃ์ผ๋ฉด ๋๋ค.
๋๋ vs2015.min.css์ด์ง๋ง ๋ง์ฝ ๋ค๋ฅธ ํ ๋ง๋ฅผ ์ ํํ์ผ๋ฉด ๊ทธ ํ ๋ง์ ํ์ผ๋ช ์ด ๋ค์ด๊ฐ์ฃผ์ด์ผ ํ๋ค.
<!--Syntax Highlighter-->
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/vs2015.min.css">
<script>hljs.initHighlightingOnLoad();</script>
3. ์ธ๋ผ์ธ ๋๋ฒ ์ถ๊ฐ & ํฐํธ ๋ณ๊ฒฝ
์ ์ฉ ํ css ํธ์ง์ผ๋ก ๊ฐ์ ์ธ๋ผ์ธ ๋๋ฒ ์ฝ๋๋ฅผ ์ถ๊ฐ ํด ์ฃผ๊ณ , ํฐํธ๋ฅผ ๋ณ๊ฒฝํด์ค ๊ฒ์ด๋ค.
์๋ ์ฝ๋ ๋ณต์ฌํด์ css ๋งจ ๋ฐ์ ์ถ๊ฐ ํด ์ฃผ๊ธฐ
๋๋ ์ด๋ฏธ ์ธ๋ผ์ธ๋๋ฒ๊ฐ ์ ์ฉ ๋์ด ์์๋๋ฐ ํน์ ์ถฉ๋ํ ๊น๋ด << ์ฃผ์์ฒ๋ฆฌ ํ๊ณ ๋ค์ ์ถ๊ฐํ์์
pre code {
font-family: "consolas", monospace;
font-size:0.9rem;
line-height: 1.3;
}
pre code.hljs {
padding: 10px; margin: 15px 0; max-width: 100%;
overflow-x: auto; overflow-y: hidden; border-radius: 7px; line-height: 130%;
}
.hljs {
white-space: pre;
overflow-x: auto;
}
/* for block of numbers */
.hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
color: #ccc;
border-right: 2px solid #CCC;
vertical-align: top;
padding-right: 10px !important;
/* your custom style here */
}
/* for block of code */
.hljs-ln-code {
padding-left: 15px !important;
}
4. ์ธ๋ผ์ธ ๋๋ฒ ์ ๋ ๋
์ ์ฝ๋ ์ถ๊ฐํ๋๋ฐ๋ ์ธ๋ผ์ธ ๋๋ฒ๊ฐ ์ ๋๋ฉด ๋ค์ html ํธ์ง์ผ๋ก ๋์ด์ค๊ธฐ
</body>์์ ์๋ ์คํฌ๋ฆฝํธ ํ๊ทธ ๋ ๊ฐ ์ถ๊ฐํด๋ณด์
<script defer src='//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'></script>
<script>
window.addEventListener('load', () => {
hljs.initLineNumbersOnLoad()
})
</script>
์ ์ฉ๋๋ฅด๊ณ test ํฌ์คํ ์์ฑ ํด ๋ณด์๋ค
์๋์ด ์ ๋๋ค.
์ด ์ MACํ ๋ง ์ปค์คํ ์๋ ์ฝ๋๋ธ๋ญ์ด ์กฐ๊ธ๋ง ๊ธธ์ด์ง๋ฉด ์ํ ์คํฌ๋กค์ด ์๊ธฐ๊ณ ์ฝ๋์ ์ธ๋ผ์ธ๋๋ฒ ํ์ค์ด ๋ ์๊ธฐ๋ ๋ฌธ์ ๊ฐ ์์๋๋ฐ highlight.js๋ก ํ ๋ง๋ฅผ ๋ฐ๊พธ๊ณ ๋์๋ ๊ทธ ๋ฌธ์ ๋ค์ ์๋์ผ๋ก ํด๊ฒฐ๋์๋ค.
๋ค์ ํ ์ผ
- ์ฝ๋๋ธ๋ญ Copy(๋ณต์ฌ)๋ฒํผ ๋ง๋ค๊ธฐ
- ๊ธ ์๋จ ์ธ๋ค์ผ => ์ผ์ชฝ์ผ๋ก ๋ถ์ด๊ณ ๋ฏธ๋ชจ์ง ์์ด์ฝ์ผ๋ก ๋ฃ๊ธฐ
