티스토리에 코드 삽입하기 (Color Scripter)
2021. 7. 28. 22:41ㆍWeb/ETC
728x90
개발 관련 포스팅을 보다 보면 코드가 보기 좋게 삽입된 경우를 흔히 볼 수 있습니다.
여러 방법 중 오늘은 Color Scripter 를 이용해 코드를 삽입하는 방법을 알아보겠습니다.
먼저 사이트 링크입니다.
Color Scripter
Simple & Flexible Syntax HighLighter
colorscripter.com
링크로 접속하면 로그인이나 별다른 과정 없이 바로 코드를 붙여넣을 수 있게 되어 있습니다.
기본 스타일은 하얀 배경에 태그가 파란색으로 되어 있지만 스타일패키지에서 다른 스타일로 변경이 가능합니다.
저는 다크모드를 선호해서 서브라임 블랙 스타일로 보여드리도록 하겠습니다.
원하는 스타일을 선택한 후에 우측 하단에 HTML로 복사를 누르게 되면 복사할 수 있는 창이 새로 뜹니다.
해당 코드를 복사한 후에 블로그 글을 작성하는 페이지에서 기본모드 -> HTML 로 변경합니다.
변경하게 되면 이런 형태의 포스팅 내용이 HTML 코드 형식으로 바뀌게 되는데
원하는 위치에 Color Scripter에서 복사한 코드를 붙여넣으면 됩니다.
붙여넣은 후 다시 HTML -> 기본모드로 변경해보면
Color Scripter에서 작성한 코드가 들어간 걸 확인할 수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>티스토리에 프로그래밍 코드 삽입하기</title>
</head>
<script>
for(var i = 1; i <= 3; i++) {
alert("Color Scripter");
}
</script>
<body>
<div id="" class="" name=""></div>
</body>
</html>
|
cs |