IT 미쳐버리다

훈, 파이프라인/티스토리 블로그

Tistory 코드블럭 프리즘(Prism) 적용하기_colorscripter 쓰렵니다.

IT훈이 2017. 11. 29.
반응형

프리즘(Prism)이란?

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. 
It’s used in thousands of websites, including some of those you visit daily.


프리즘(Prism)은 html의 태그안에 표시하는 코드들을 syntax highlight를 표시해준다. 
코드들을 이쁘게 볼 수 있도록 하는 역할 .css .js 파일을 제공한다는 것이다.
  • 장점
- 가볍다.
- 여러가지 테마를 선택할 수 있다.
- 적용할 언어를 선택할 수 있다.
- 여러가지 플러그인을 제공한다. 
  • 단점
- 써보면서 작성해보겠다.



 프리즘(Prism)다운로드 및 설치

1. 설치는 원하는 테마를 고르고,


2. Languages에서는 원하는 언어를 기본으로 Markup,CSS,C-like,JavaScript 를 설정해준다.(원하는 언어가 있으면 체크 하여서 사용하면 된다.)


3. 원하는 플러그인을 선택하고 다운로드를 한다.

    ● Plugins(플러그인)

- Line Highlight : 특정라인에 Highlight를 줄 수 있다.

- Line Numbers : 소스코드의 왼쪽에 라인번호를 표시한다. 단, <pre class="line-numbers">를 통해서만 적용가능

- Show Language : 소스코드의 언어를 우측 상단에 표시한다.

- copy to Clipboard button : Copy라고 써있는 버튼을 소스코드의 우측에 표시해준다. 이 버튼을 누르면 코드가 쉽게 Copy 된다.

- 등등.... (쓰는 것이 생긴다면 추가로 적용하겠다. 궁금하면 클릭 해서 확인해보는 것도 괜찮다 ㅎ)


4. 자신의 Tistory에서 블로그 관리탭에 들어가 HTML/CSS 편집에서 파일 업로드를 진행해준다.



5. prism.js 와 prism.css 파일을 선택해서 업로드한다.



6. 추가 된 것을 확인하고 우측 상단에 저장 버튼을 클릭한다.



7. HTML파일의 파일 호출 코드에 추가를 해준다. 그리고 저장 하는 것 잊지말고. 


8. 여기까지가 설정 하는 부분은 끝이다.


<!-- 추가해줘야 하는 코드 -->
<script src="./images/prism.js"></script>
<link href="./images/prism.css" rel="stylesheet">


코드 작성

1. 한번 코드를 작성을 해보자!!





2. 흰색 박스가 나오는 것이 굉장히 보기가 싫어져서 CSS 부분을 수정해야 겠다는 생각이든다.



3. code의 CSS 정의하는 부분에서 border부분이 있는데 삭제를 해보기로 한다.



4. 이제는 잘 나온다. 실전으로 한번 코드를 넣어보자.


C언어

#include 
int main(){
    print("Hello World");
    return 0;
}

HTML


<html></html>
<head>
    <title></title>
</head>


아... 사용하기 싫다

이게 계속 사용을 할 때, < 를 &lt;로 해주고 >를 &gt;로 일일이 해줘야 하는 것에서 거리감이 들었다.

물론 이렇게 쓰는 방법이 아닐 수도 있는데... 그 대안을 찾기 전에는 그닥 사용하기가 싫어진다 ㅎㅎ 


와... 그냥(colorscripter)이게 최고다!!! 진짜로!!!!!

장점

- 편리하다.


- 복잡하게 코딩하듯이 입력할 필요가 없다.


- 빠르다. 


- 단순하다.


사용 하는 방법도 너무나도 단순하다.

1. colorscripter 사이트에 접근한다.


2. 코드를 붙여넣는다.


3. 클립보드에 복사 버튼을 누른다.


4. 글쓰기에 들어와서 HTML 체크 후 붙여넣는다..... 끝



참조 : https://colorscripter.com/

1
2
3
4
5
6
#include <iostream>
using namespace std;
 
void main(){
  cout << "참 쉽죠?";
}
cs



반응형

'훈, 파이프라인 > 티스토리 블로그' 카테고리의 다른 글

티스토리 블로그 5월결산 애드센스 수익 30% 증가  (1) 2022.06.06
2022년 4월 애드센스 수익 공개  (6) 2022.05.09
구글 애드센스 모바일 전면광고 부작용발생  (0) 2022.05.08

댓글

티스토리툴바