종종 블로그글을 보다보면 소스코드가 포스팅 될 때 hightlist 박스 처리되어 잘 정돈된 것을 볼 수 있습니다.
어떻게 하면 저렇게 소스코드가 가독성이 높게 표시할 수 있을까 찾아보니 syntaxhighlighter_3.0 라는 플러그인이었습니다.
쉽게 따라해보려 하니 버전별로 적용 방법에 차이가 상이했기 때문에 저는 3.0.83 버전을 기준으로 적어보겠습니다.
3.0.83은 본 포스팅 링크에서 다운이 가능합니다.
먼저 파일을 받아 압축을 풀어줍니다.
1. 티스토리 로그인 후 관리자 페이지에 들어가서 HTML / CSS 편집기를 클릭합니다.
2. 파일 업로드 탭에서 하단의 추가를 누르고 압축을 푼 폴더내에서 script 와 style 폴더의 모든 파일을 선택해 주어 업로드 합니다. (업로드 시 모든 파일은 경로가 image/ 하위로 들어가게 됩니다.)
3. 이제 적용을 해보겠습니다.
1) 관리 화면에서 좌측에 [꾸미기]->[HTML/CSS 편집]를 클릭합니다
2) 우측 상단에 HTML 항목을 클릭 합니다.
3) 아래 소스코드에서 아래와 같이 수정해 줍니다.
</head>바로 위에 아래 소스를 추가합니다.
</head>의 위치는 Ctrl + F 로 찾을 수 있습니다.
* 다음 코드를 </head> 에 추가합니다.
그리고 좀 아래부분에 <body> 라는 부분에 아래 코드를 추가해 줍니다.
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
저장 버튼을 클릭하여 적용합니다.
이제 기초 작업이 마무리 되었습니다.
포스팅 본문 작성 시 우측 상단의 html 을 누르시고
코드 시작 시 아래와 같이 코드 타입과 영역 사이즈를 설정할 수 있습니다.
<textarea name="code" class="brush:java;" style="margin: 0px; width: 428px; height: 23px;">
위와 같이 추가하시고 마지막에는
</textarea> 를 입력해 주면 코드 스타일이 적용이 됩니다.
예
brush:xml 부분은 적용할 style 언어를 적어주는 곳입니다.
언어 관련 참조 주소
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
'블로그 꾸미기' 카테고리의 다른 글
| 구글 애드센스 광고 상단에 2개 가운데 정렬로 등록하기 (0) | 2017.11.29 |
|---|---|
| IMEI 정보로 스마트폰 분실폰 확인하기 (0) | 2017.11.15 |
| [블로그 꾸미기]티스토리 css 상단 메뉴 만들기 (0) | 2016.11.14 |
| 외부 이미지 링크가 티스토리에서 보이지 않을 때! (0) | 2016.11.13 |
| [블로그 꾸미기]글 예쁘게 쓰기 (2) | 2016.11.12 |
댓글