신규 블로그를 만들었습니다!
Code Highlights
코드 깔끔하게 올리는 여러가지 방법이 있습니다. 가장 간단하게 사용할 수 있는 웹 서비스를 이용하는 방법부터 javascript 플러그인을 이용해서 하는 방법이 있습니다.
1. ColorScripter
다른 설치 필요없이 바로 사용할 수 있어서 초보자들도 쉽게 사용할 수 있습니다.
왼쪽 상단에서 사용하실 프로그래밍 언어를 선택한 뒤에 그 아래 텍스트 입력칸에 코드를 입력하면 됩니다. 그리고 코드 작성을 마쳤다면, 오른쪽 하단 클립보드에 복사를 누른뒤에 넣고싶은 부분에 붙여넣기를 하시면 됩니다.
아래 코드는 Color Scripter를 이용해서 작성한 파이썬 코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
# Test Dictionary
my_dict = {"name" : "hongku", "age" : 26}
# Test Class
class cTest() :
def __init__(self) :
print("test class")
def run(self) :
print("test class")
# Test main
if __name__ == "__main__" :
test = cTest()
test.run()
|
cs |
2. Highlight.js 플러그인
이 방법은 자바스크립트 플러그인을 이용하는 방법입니다. 일단 사용하기 전에, https://highlightjs.org/ 이 사이트에서 라이브러리를 다운 받아야 합니다. 사이트를 들어가면 아래와 같은 화면이 나옵니다.
"Get version 9.12.0" 버튼을 눌러줍니다. 그러면 화면이 이동합니다.
옵션을 선택할 수 있는데, 그냥 다운로드 받습니다. 다운로드 버튼은 밑에 있습니다. 설치를 하게되면 js파일과 css 파일들이 다운로드 됩니다.
여기서 중요한 파일은 "highlights.pack.js"와 styles 폴더 아래에 있는 테마 css 파일입니다. 적용하는 방법은 https://highlightjs.org/usage/ 에 자세히 나와있지만, 영어로 되어 있기 때문에 잘 모를실분들을 위해 차근차근 적용하는 방법을 알려드리겠습니다.
styles폴더에 있는 css 파일 중 하나를 골라줍니다. 원하는 테마를 선택해서 하나만 골라주시면 됩니다. 저는 monokai-sublime.css 를 선택하도록 하겠습니다.
그리고, "highlights.pack.js"와 "monokai-sublime.css" 파일 2개를 자신의 티스토리 블로그에 추가 시켜줍니다. 마지막으로 html코드에 아래 코드를 넣어줍니다. <body>안에 넣든 <head> 안에 넣든 상관없습니다.
<link rel="stylesheet" href="./images/monokai-sublime.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>플러그인 적용이 완료됐습니다.
사용할때는 글쓰기 우측 상단에 HTML를 눌러서
<pre><code class="css파일 이름">코드 내용</code></pre>
위와 같이 넣어서 작성하시면 됩니다.
잘 모르는 부분이 있다면, 댓글로 물어봐주시면 알려드리도록 하겠습니다.
Reference
'ETC' 카테고리의 다른 글
| 팀뷰어(Team Viewer) 설치하기, 원격으로 로스트아크 접속하는 방법! 퇴근길에 미리 실행하자! (0) | 2018.11.15 |
|---|---|
| Froxy :: Explorer 브라우저 이용해서 프록시 설정하기 (0) | 2018.10.21 |
| 무료로 사용할 수 있는 이미지, 사진 사이트(Unsplash, pixbay) (0) | 2018.09.06 |
| Sublime Text :: 맥북(Mac os)에 서브라임 텍스트 설치하기 (0) | 2018.09.06 |
| 우분투/리눅스 서버에 Docker(도커엔진) 설치하기, 사용하기, 기본 명령어 (4) | 2018.05.09 |
최근댓글