웹 개발과 게임 개발 관련 포스팅을 하기 위해서 준비하던 도중,

소스 코드를 블로그에 어떻게 올리면 좋을지 궁금해져서 알아보게 되었고 내 블로그에도 소개하려한다.

 

 

여러 방법들을 찾아보았는데 그 중 가장 간편한 방법인 'Color Scripter' 웹을 통한 방법을 소개한다.

 

https://colorscripter.com/

 

Color Scripter

Simple & Flexible Syntax HighLighter

colorscripter.com

 

위 사이트에서 매우 간편하게 진행할 수 있다.

 

 

 

우선 사이트를 방문하면 위와 같은 모습이다.

 

 

소스를 붙여넣으면 자동으로 언어를 인식하여 알려준다.

만약 잘못인식하였을 경우 수동으로 변경하면 된다.

대략 20가지의 언어를 지원하는데, 메이저한 언어는 다 있다고 보면 된다.

 

이렇게 스타일을 블랙으로 할 수도 있다.

우측 하단에 html 보기를 클릭후 전체를 복사한다.

 

 

티스토리 뉴 에디터 기준으로 우측 상단의 기본모드를 html모드로 변환한다.

 

 

아까 복사하였던 코드를 붙여넣고, 다시 돌아오면

 

이렇게 코드가 깔끔하게 들어와있다!

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
 
<html>
<head>
    <title>록셉은 오공을 잘할까?</title>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="../lockcept2_white-alpha.ico">
</head>
<body>
    <div>
        <a href="https://www.op.gg/summoner/userName=%EB%A1%9D%EC%85%89"><img src ="opgg.png"></a> <br>
        <img src="https://ddragon.leagueoflegends.com/cdn/9.18.1/img/champion/MonkeyKing.png" /> <p> this is wukong </p>
        <img src="https://ddragon.leagueoflegends.com/cdn/4.18.1/img/champion/MonkeyKing.png" /> <p> this was wukong </p>
        <div style="position: relative; max-width: 100%; padding-bottom: 56.25%; height: 0;">
            <iframe width="320" height="180" src="https://www.youtube.com/embed/k1zAhC5aeQs" frameborder="0" allowfullscreen="" style="position: absolute;  top: 0; left: 0; width: 100%; height: 100%;"></iframe>            
        </div>
    </div>
</body>
</html>
cs

+ Recent posts