'SyntaxHighlighter'에 해당되는 글 2건

  1. 2009.06.16 SyntaxHighlighter 2 / 3.0.83
  2. 2009.02.01 SyntaxHighlighter 사용하기

SyntaxHighlighter 2 / 3.0.83

2020-02-01 kakao에서 쿠키 CORS 문제때문에 제대로 표시 안됨. Prettify를 사용하기로 함.

- SyntaxHighlighter 2
- 버전
- 지원하는 Brush
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
로 변경되었음. 3.0으로 되면서 ...

- hosted version 을 사용하면 파일을 올릴 필요가 없다. 
2019-10-20 3.x
2에서는 줄번호까지 복사되어서 span 방식이 아닌 textarea 방식
그러나 자동 줄바꿈이 안되고, 옆으로 스크롤이 생김. (이걸 해결한 거.. https://sir.kr/g4_tiptech/33028
2.x
- pre가 기본 태그인데 Tistory 편집기에서 잘안보이므로 그냥 예전처럼 textarea로 쓰자.
html은 textarea를 사용하고 나머지는 pre를 사용하자. 

- 재미있는 설정
collapse, first-line, highlight, html-script
<textarea name="code" class="brush:html;first-line:3;highlight:[4, 6]">
- 잘안되네...
SyntaxHighlighter.defaults['html-script'] = true;
SyntaxHighlighter.config.tagName = "textarea" //3.x에서는 잘됨.




저작자표시 비영리 변경금지

SyntaxHighlighter 사용하기

스킨을 변경하면 기존에 설정해 두었던 SyntaxHighlighter 가 모두 없어지므로 정리해둔다.
  1. Download SyntaxHighlighter
  2. HTML/CSS 편집에서 다음 내용을 추가한다. 
    <link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.css"></link>
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = './flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>
  3. Scripts/ 와 Styles/ 에 있는 파일을 업로드하고 저장한다.
  4. 글 작성시 HTML 모드에서 <textarea name="code" class="java | html | AND SO ON"></textarea> 를 사용한다.
저작자표시 비영리 변경금지

티스토리툴바