HTML, CSS, Java Script, Php 등의 소스코드 등을 블로그 등에 게시할 때 여러 편집기들처럼 코드에 컬러를 부여해 가독성을 높여주는 아주 유용한 도구입니다.
소스 등을 보여줄 때 기존에는 SyntaxHighlighter 라는 도구를 설치하여 사용하였지만 Color Scripter를 이용하면 설치 등의 불편함이 없이 HTML 수정이 가능한 게시물이라면 어디에서나 사용 가능해 보입니다.
인터넷 브라우저에서 바로 사용 가능한 웹 버전과 PC에 프로그램을 다운로드하여 사용하는 PC 버전 두 가지고 사용 제한 없는 무료이며 기부를 받고 있습니다.
소스코드 꾸미기
![소스코드 강조하기 - Color Scripter - 1 소스코드 강조하기 - Color Scripter - 1](https://speedinkland.com/wp-content/uploads/2023/11/Color-Scripter_004.webp)
PC 버전 Color Scripter
컬러 스크립터로 코드를 작성한 뒤 우측 하단의 복사 버튼을 클릭 후 작성 중인 문서에 붙여 넣기만 하면 깔끔하게 적용되고 3가지 스타일과 간단한 설정 기능을 제공하고 있습니다. 언어 종류는 웹 버전에서는 자동 변경되지만 Pc 버전에서는 직접 지정해줘야 합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!– Syntax Highlighter start –> <link type=“text/css” rel=“stylesheet” href=“./images/shCoreRDark.css”> <script type=“text/javascript” src=“./images/shCore.js”></script> <script type=“text/javascript” src=“./images/shAutoloader.js”></script> <script type=“text/javascript” src=“./images/shLegacy.js”></script> <script type=“text/javascript” src=“./images/shBrushPlain.js”></script> <script type=“text/javascript” src=“./images/shBrushCss.js”></script> <script type=“text/javascript” src=“./images/shBrushPhp.js”></script> <script type=“text/javascript” src=“./images/shBrushJScript.js”></script> <script type=“text/javascript” src=“./images/shBrushXml.js”></script> <script type=“text/javascript”> SyntaxHighlighter.all(); </script> <!– Syntax Highlighter start –> | cs |
서브라임 블랙 스타일로 작성한 예시 입니다. 가로폭은 고정할 수도 있으나 기본적으로 글 길이에 따라 자동 변경 됩니다.
![소스코드 강조하기 - Color Scripter - 2 소스코드 강조하기 - Color Scripter - 2](https://speedinkland.com/wp-content/uploads/2023/11/Color-Scripter_010.webp)
![소스코드 강조하기 - Color Scripter - 3 소스코드 강조하기 - Color Scripter - 3](https://speedinkland.com/wp-content/uploads/2023/11/Color-Scripter_009.webp)
네이버 블로그의 기존 에디터에서는 깔끔하게 적용되지만 스마터 에디트 3.0 인가에서는 오른쪽처럼 적용되고 링크도 생겨 버립니다.
![소스코드 강조하기 - Color Scripter - 4 소스코드 강조하기 - Color Scripter - 4](https://speedinkland.com/wp-content/uploads/2023/11/Color-Scripter_011.webp)
공유 기능을 사용하여 이메일과 설명을 입력하면 주소를 발급해주며 접속하면 위와 같이 보여 줍니다.
소스코드 사이트 Color Scripter Website