오늘은 블로그에서 코드를 보여주는 "코드 블럭"에 대해서 알려드려볼까 해서 글을 써봅니다.
보통 네이버 블로그나 티스토리의 경우는 자체적으로 코드를 보여줄 수 있는 기능을 제공하고 있는 것으로 알고 있습니다.
하지만 구글 블로거(블로그스팟)의 경우는 그런 기능이 없어서 외부에서 가져와야 하는 문제가 있습니다.
그러나 이 기능을 지원하는 것이 몇 개 없는 것 같고 쓰는 것도 서로 다른 부분이 있더라고요.
더불어 사용하기가 불편한 점은 덤입니다.
그래서 오늘은 저도 사용하고 있는 "Prism(프리즘)"에 대해서 알아보겠습니다.
◎ Prism(프리즘)이란 무엇인가?
프리즘은 가볍고 강력하며 우아한 구문 강조 표시 라이브러리입니다. Dabblet에서 스핀오프(기존에 있던 것을 가져와 새로 만든)된 프로젝트입니다.
현재의 이 글을 쓸 때의 최신 버전은 1.29.0이며 현재 버전 2를 제작 중에 있습니다.
◎ Prism 사용법
프리즘은 기본적으로 아래의 코드(기본)를 넣음으로써 사용할 수 있습니다.
◎ Prism을 원하는 테마로 사용하기
테마는 위의 프리즘 사용법에서 첫 번째 "<link>" 태그 부분만 수정해서 사용하시면 됩니다.
<기본>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet">
<CB>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-cb.css" rel="stylesheet">
<GHColors>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-ghcolors.css" rel="stylesheet">
<Pojoaque>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-pojoaque.css" rel="stylesheet">
<Xonokai>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-xonokai.css" rel="stylesheet">
<Ateliersulphurpool-light>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-base16-ateliersulphurpool.light.css" rel="stylesheet">
<Hopscotch>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-hopscotch.css" rel="stylesheet">
<Atom-Dark>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-atom-dark.css" rel="stylesheet">
<Duotone-Dark>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-duotone-dark.css" rel="stylesheet">
<Duotone-Sea>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-duotone-sea.css" rel="stylesheet">
<Duotone-Space>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-duotone-space.css" rel="stylesheet">
<Duotone-Earth>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-duotone-earth.css" rel="stylesheet">
<Duotone-Forest>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-duotone-forest.css" rel="stylesheet">
<Duotone-Light>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-duotone-light.css" rel="stylesheet">
<VS>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-vs.css" rel="stylesheet">
<VSC-Dark-Plus>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-vsc-dark-plus.css" rel="stylesheet">
<Darcula>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-darcula.css" rel="stylesheet">
<a11y-Dark>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-a11y-dark.css" rel="stylesheet">
<Dracula>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-dracula.css" rel="stylesheet">
<Synthwave '84>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-synthwave84.css" rel="stylesheet">
<Shades of Purple>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-shades-of-purple.css" rel="stylesheet">
<Material-Dark>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-material-dark.css" rel="stylesheet">
<Material-Light>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-material-light.css" rel="stylesheet">
<material-oceanic>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-material-oceanic.css" rel="stylesheet">
<Nord>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-nord.css" rel="stylesheet">
<Coldark-Cold>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-coldark-cold.css" rel="stylesheet">
<Coldark-dark>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-coldark-dark.css" rel="stylesheet">
<Coy-Without-Shadows>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-coy-without-shadows.css" rel="stylesheet">
<Gruvbox-Dark>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-gruvbox-dark.css" rel="stylesheet">
<Gruvbox-Light>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-gruvbox-light.css" rel="stylesheet">
<Lucario>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-lucario.css" rel="stylesheet">
<Night-Owl>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-night-owl.css" rel="stylesheet">
<Holi-Theme>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-holi-theme.css" rel="stylesheet">
<Z-Touch>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-z-touch.css" rel="stylesheet">
<Solarized-Dark-Atom>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-solarized-dark-atom.css" rel="stylesheet">
<One-Dark>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-one-dark.css" rel="stylesheet">
<One-Light>
<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes/themes/prism-one-light.css" rel="stylesheet">
◎ 마치며...
위 테마 중 일부는 블로그의 CSS와 충돌이 나는지 적용했을 때 실제 모습과 차이가 나는 부분이 있을 수 있으므로 이점은 참고하여 사용하시기 바랍니다.
이상으로 프리즘 테마에 대해서 알려드렸습니다.
Tags:
코딩
