'블로그소스코드'에 해당되는 글 2건

  1. 2015.02.25 블로그에 소스코드 올리기 - SyntaxHighlighter
  2. 2015.02.25 블로그에 소스코드 올리기 - Color Scripter

블로그에 소스코드를 올리는 두 번째 방법을 소개합니다.

 

이번에는 SyntaxHighlighter 를 다운받아서 HTML/CSS 를 수정하는 방법을 이용해 보도록 하겠습니다.

 

 

1. 아래의 링크를 통해서 SyntaxHighlighter 페이지를 방문해서 다운로드 받습니다.

(현재 최신 버전은 3.0.83 입니다.)
http://alexgorbatchev.com/SyntaxHighlighter/download/

 

 

Click here to download 를 클릭합니다.

 

 

 

 저장 버튼을 클릭해서 원하는 위치에 파일을 다운로드 받습니다.

 

  

2. 다운로드 받은 zip 파일의 압축을 풉니다.

 

 

 

여러가지 폴더가 보여지는데요.

이중에서 사용할 폴더는 scripts 와 styles 입니다.

scripts 는 지원할 언어에 대한 파일들을, styles 은 적용할 스타일 정보에 대한 파일들을 포함하고 있습니다.

 

* 필수 파일

scripts : shCore.js

styles : shCore.css, shThemeDefault.css 

 

 

 

필수 파일(3가지) 를 포함해서 사용할 언어를 위해서 필요한 js 파일을 위의 화면을 참고하여 scripts 폴더에서 확인합니다.

 

 

3.  관리자 메뉴로 들어갑니다.

좌측 사이드 > 꾸미기 > HTML/CSS 편집을 클릭합니다.

 

 

 

파일업로드 탭에서 추가 버튼을 클릭하여

(압축을 푼 폴더에서) 위에서 선택했던 파일들을 모두 업로드 합니다.

 

 

4.  HTML/CSS 탭에서 skin.html 파일을 수정합니다.

Ctrl + F 를 눌러서 skin.html 영역에서 </head> 를 검색하여

</head>  위의 부분에 다음과 같이 입력합니다.

 

<!-- 소스코드 넣기 -->
<link href="./images/shCore.css" rel="stylesheet" type="text/css">
<link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css">

 

 

 

Ctrl + F 를 눌러서 skin.html 영역에서 </body> 를 검색하여

</body>  위의 부분에 다음과 같이 입력합니다.

(압축을 푼 폴더에서) 위에서 선택했던 파일들을 모두 입력합니다.

 

<!-- 소스코드 넣기 -->
<script src="./images/shCore.js" type="text/javascript"></script>
<script src="./images/shBrushCpp.js" type="text/javascript"></script>
<script src="./images/shBrushJava.js" type="text/javascript"></script>
<script src="./images/shBrushJScript.js" type="text/javascript"></script>
<script src="./images/shBrushPlain.js" type="text/javascript"></script>
<script src="./images/shBrushSql.js" type="text/javascript"></script>
<script src="./images/shBrushXml.js" type="text/javascript"></script>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>

 

 

 

소스코드.txt

(포스트는 복사가 금지되어 있으므로, 소스코드를 다운받아서 사용해주세요)

 

 

5. 글쓰기 에디터에서 좌측에 HTML 항목을 체크한 후에, 본문에서 다음과 같이 사용합니다.

(아래의 java 는 원하는 언어로 변경하시면 됩니다.)

 

<pre class=brush:java>

소스코드

</pre>

 

 

 

 

6. 이제 작성된 글에서 스타일이 적용된 형태의 소스코드를 확인하실 수 있습니다.

 

 

 

복잡한 듯 보이지만  1 ~ 4번은 한번만 수행해 주시면 되는 작업입니다.

지난번에 포스팅한 color scripter 와 함께 유용하게 사용하시길 바랍니다.

블로그에 소스코드 올리기 - Color Scripter

 

 

 

Posted by maze1008
,

블로그에 소스코드를 올릴 때, 

평소 프로그래밍 하던 것처럼 가독성이 좋은 형태로 보여 드리고 싶을 때가 많았습니다.

 

그래서 오늘은 웹에서 간편하게 사용할 수 있는 Color Scripter 를 소개해 드리려고 합니다.

 

아래의 링크를 통해서 Color Scripter 페이지를 방문합니다.

http://prev.kr/apps/ColorScripter

 

 

Color Scripter 는 웹 버전과 PC 버전의 2가지 형태로 제공됩니다.

PC 버전을 클릭해 보면 다운로드해서 사용할 수 있도록 지원되고 있는데요.

 

 

 

PC 버전에서 더 안정적이고 빠른 기능을 이용할 수 있다고 합니다.

저는 웹 버전에 충분히 만족하고 있어서 다운로드 과정은 생략하겠습니다.

 

 

 

다시 메인 화면으로 돌아오면 4가지 형태의 설정 기능이 존재합니다.

언어 버튼을 클릭해서 사용할 언어를 선택합니다. (저는 Java 를 선택했습니다.)

 

 

 

스타일패키지 버튼을 클릭하면 선택한 언어에 적합한 스타일들이(일종의 테마라고 할까요?) 보여집니다.

원하는 테마를 선택합니다. (저는 핑크 레몬에이드를 선택했습니다.) 

 

 

 

두 가지 기본 설정만으로도 충분히 사용가능하지만

세부설정 버튼을 클릭하면 글꼴, 공백/가로/세로 크기 등에 대한 부가적인 설정도 변경할 수 있습니다.

 

 

이제 소스코드를 입력해 보겠습니다.

 

 

역시 처음은 "Hello world!" 가  가장 적합하겠죠?

소스코드가 스타일패키지에서 선택한 형태대로 적용되어 나타나고 있습니다.

 

우측 아래에 위치한 클립보드에 복사 버튼을 클릭합니다.

 

 

 

복사한 소스코드를 블로그 포스트에 추가하기 위해서 붙여넣기를 수행합니다.

 

이제 눈에 쏙쏙 들어오는 소스코드가 완성되었습니다!

Color Scripter 를 다시 방문하면 설정 상태가(글꼴, 색상 등 변경한 내용) 초기화 되니 이점 주의해 주세요.

 

 

소스코드를 올리는 또 다른 방법입니다. 

블로그에 소스코드 올리기 - SyntaxHighlighter

 

 

Posted by maze1008
,