'Computer/HTML,PHP,Javascript'에 해당되는 글 2건

  1. 2019.05.22 [TISTORY] Syntax Highlight (코드 문법 강조) 플러그인
  2. 2015.12.06 TISTORY Syntax Highlighter 설치
2019.05.22 21:43


TISTORY 에 추가된 새로운 플러그인 Code HighLight 코드 문법 보기

을 통해서 쉽게 코드 테마 설정하기

 

예전 플러그인 제공 전에는 아래와 같은 게시글과 같이 별도 HTML 추가를 통해 코드 블럭을 삽입 가능하였다. 하지만 이제부터는 손쉽게 코드 블럭을 버튼 클릭만으로 추가 할수 있다. 자세한 방법은 게시글을 통해 확인해보자.

TISTORY Syntax Highlighter 설치

 

TISTORY Syntax Highlighter 설치

TISTORY Syntax Highlighter 설치 Syntax Highlighter은 소스코드 예쁘게 보이도록 꾸며주는 오픈소스 스킨입니다. 일단 티스토리는 Syntax Highlighter를 제공하지 않아서 스킨을 수정하여 적용하면 사용 가능합..

injunech.tistory.com

 

플러그인에 들어가서 코드 문법 강조 플러그인을 추가한다.

 

플러그인 검색에 Highlight 라고 검색하면 쉽게 찾을수 있다.

 

코드블럭을 선택하면 이제 Tistory 게시글에 코드 작성시 코드문법으로 보기좋게 추가 할수 있다

 

코드입력 팝업창이 뜨면 코드를 입력할수 있고 언어 선택도 가능

 

위와같은 방법으로 입력시 아래와 같은 코드테마로 볼수 있다.

#include <stdio.h>

main() 
{
    printf("hello, world\n");
}

 

 



Posted by injunech
2015.12.06 19:23


TISTORY Syntax Highlighter 설치


Syntax Highlighter은 소스코드 예쁘게 보이도록 꾸며주는 오픈소스 스킨입니다.

일단 티스토리는 Syntax Highlighter를 제공하지 않아서 스킨을 수정하여 적용하면 사용 가능합니다.

소스 홈페이지 : http://alexgorbatchev.com/SyntaxHighlighter/ (오픈소스로 제공되어 누구나 사용 가능)



1. 설치방법

설정 - 스킨 - HTML/CSS 편집 들어간 후, </body>와 </html> 사이에 다음 내용을 추가해 준다.


<link rel='stylesheet' type='text/css' href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' />
<link rel='stylesheet' type='text/css' href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' />
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>


2. 사용방법

우선 편집기에서 소스를 쭉 작성한다. < 를 &lt; 로 작성해야 하는데, 이건 티스토리 편집기에서 자동으로 치환해 준다.
그리고 HTML 모드에서 위아래를 <pre> - </pre> 태그로 묶어주는데, 코드 종류에 따라 태그 클래스를 미묘하게 바꿔줘야 한다.


CPP 코드 : <pre class="brush: cpp"> - </pre>
HTML : <pre class="brush: html"> - </pre>
PHP : <pre class="brush: php"> - </pre>



정확하게는 위에서 추가해 준 브러시 타입만 사용할 수 있다. 저 위 소스 잘 보면 shBrush___.js 를 삽입하는걸 볼 수 있는데 이 부분.
다른쪽(Ruby라거나...) 쓰는 블로그라면 알아서 홈페이지 뒤져서 바꿔주면 되겠다.
(설마 코드 다루는 블로그 주인장이 저 정도 응용력도 없진 않겠지...)


파이어폭스 사용시, 코드 뒤에 <br /> 붙는건 지워줘야 한다. 아니면 아래처럼 소스에 한 줄 추가해주면 알아서 삭제하고 파싱해 준다.

<script type="text/javascript">
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.all();
</script>


3. Include 부분은 아래와 같이 입력 해준다.

#include &lt;stdio.h&gt;



끝!



Posted by injunech