본문 바로가기

Trivial_information

티스토리, 예쁘게 R 코드 넣는 (삽입) 방법 with prismjs

귀찮아서...


하이라이트 코드는 넣지 않으리라 생각했지만...

아무리 봐도 도무지 예쁘지 않아서...


결국은 포스팅에 예쁜 코딩을 넣기로 결정하였습니다.

안하려고 했는데 블로그를 유지하기로 결정하면서 결국 LaTex 및 코딩관련 지식을 공부하게 되네요. 


일단 티스토리에 코드를 넣을 때 많이 쓰는 녀석들은

1. SyntaxHighlight

2. Highlight.js

3. Prism.js

이 3개로 요약할 수 있습니다.


다만, 문제는 공식적으로 R 언어를 지원하는 녀석은 Prism.js  이녀석밖에 없는 것으로 알고 있습니다.

그래서 뭐 선택지가 없죠. 다른 포스팅에서 highlight.js 와 prism.js 를 섞어서 더 예쁘게 표현하는 포스팅도 발견은 했지만...

귀찮기도 하고... 굳이 그렇게까지 하고 싶진 않아서 다 지우고... prism.js 만 적용하기로 제 마음대로 결정하였습니다.


그래서 오늘 포스팅의 내용은 Prism.js 를 이용한 R 코드를 티스토리에 적용하기 입니다 !


1. prism.js 홈페이지에 방문하여 css 및 js 파일 다운받기


우선, https://prismjs.com/ 접속을 합니다.


우측 상단의 DOWNLOAD 버튼을 클릭합니다.



2. 그러면 다운받을 것을 정리할 수 있는 페이지로 넘어갑니다.




이러한 화면이 나오게 되고, Themes 에서 원하는 옵션을 고르시면 됩니다.

여기서 아래로 내려가면 다음과 같은 화면이 나옵니다.



저희는 R 이 주 목적이고, 추후 python 언어를 쓸 수도 있으니까 위의 2개만 클릭해서 골라줍니다.

그리고 아래로 내려서 플러그인도 선택해줍니다.


remove initial line feed 는 곧 제거될 예정이며, 와 copy to clipboard 는 잘 작동을 안한다는 말이 있어서 설정하지는 않았습니다.


3. 마지막으로 선택한 옵션을 css 파일롸 js 파일로 다운을 받아야합니다.

아래로 쭉 내리면 이러한 버튼이 있습니다. 둘다 다운을 받아줍니다.


여기까지 오셨다면 대부분의 준비가 끝났습니다.



4. 이제 다운 받은 파일을 티스토리에 올려주면 됩니다. 

티스토리 관리자화면의 스킨 편집에 들어가셔서 위의 사진의 항목을 찾으셔서 파일을 올려주시면 됩니다.


5. 마지막으로 HTML 의 head 와  body 에 코딩 몇줄 넣어주시면 끝 !


<link href="./images/prism.css" rel="stylesheet" />

</head>

<body> 

<script src="./images/prism.js"></script>


제걸 참고로 적어드리면 이렇게 되어 있습니다. 

CSS 는 head 에 JS 는 body 에 들어가 있습니다.

이것만 주의하시면 될 것 같습니다. ^^


설정하시느라 수고하셨습니다!