티스토리 코드블럭에서 표현되지 않는 스크립터 입력 방법
티스토리에서 스크립터, 엑셀 수식, 각종 코드를 입력할 수 있게 지원하고 있습니다. 하지만 그 범위가 넓지 않아 일부 코드는 제대로 지원되지 않고 있는데요, 아마 이 내용이 생소한 분도 계실 겁니다.
엑셀 수식 및 코딩 소스 등은 일반 텍스트로 넣으면 문제가 생깁니다. 여기서 일반 텍스트는 구글 블로그와 똑같은 html 기반인데도 구글 블로그에서는 전혀 문제가 되지 않는 상황이 티스토리에서는 나타나며 결국 애드센스 측으로부터 경고를 받기도 했습니다.
그래서 간단한 수식은 그대로 작성합니다. 여기서 간단한 문장 길이라고 하면 컴퓨터에서 작성할 수 있는 길이가 아닌 휴대폰에서 볼 수 있는 문장 한 줄을 이야기합니다. 일반적인 글자는 전혀 문제가 없었고 엑셀 함수, html, Javascript, CSS 등의 코드를 넣을 때 코드블럭을 포스팅에 넣을 때는 나름의 표현 방법이 있고 그 표현하기 위해 티스토리에서 제공하는 코드블럭을 사용해야 합니다.
티스토리에서 코드블럭과 HTML블럭을 제공하고 있어 그 기능을 사용하는 방법입니다. 티스토리 글쓰기 에디터에 설정, 점 3개를 누르면 여러 가지 기능이 있는데, 여기서 HTML블럭은 아주 간단한 html 코드 정도만 지원하고 있어 사용하지 않고 있습니다. html이든 엑셀이든 모든 코드는 코드블럭을 이용합니다. html도 여기서 지원이 되니까요.
코드블럭으로 표현한 html입니다. 필요한 곳에 색상 처리되어 나오는 이 모습이 정상적입니다. 사실은 통상적으로 사용하는 코드는 이렇게 처리하면 됩니다. 하지만 최근에 주목받고 있는 TypeScript는 표현이 제대로 되지 않습니다.
같은 방법으로 TypeScript를 코드블럭으로 표현한 것인데요, 몽땅 같은 색상으로 표시됩니다. 원래 그런지 어떤지는 모르지만 어딘가 약간 모자라는 듯한 느낌입니다. 다른 방법으로 표현해 보겠습니다.
이제 코드가 원하는 대로 나왔습니다. 더 자세한 표현이 필요할 지도 모르겠지만, 이 정도면 충분하겠죠. 이렇게 표현하기 위해서는 약간의 수고가 있어야 합니다. 스크립터를 표현하기 위해 티스토리에서 이야기하는 코드블럭 기능을 설치해야 합니다.
https://code.google.com/archive/p/syntaxhighlighter/downloads
먼저 최신 버전으로 첨부 파일을 받습니다. 파일을 받으면 3개의 폴더가 있는데 몽땅 티스토리에 업로드합니다. 첨부된 파일을 티스토리에 업로드하는 과정을 잠깐 설명하겠습니다. 업로드 하는 방법을 아시는 분은 건너뛰고 스크립터 업로드를 참고하면 되겠습니다.
관리자 화면에서 스킨 편집
html 편집
파일 업로드 탭에서 아래 추가를 눌러 3개의 폴더에 있는 파일을 몽땅 올립니다.
관련 파일은 업로드가 되었고 이번에는 스크립터를 사용할 수 있는 코드를 넣겠습니다.
<!-- 소스코드를 입력을 위한 스크립터 -->
<link rel="stylesheet" type="text/css" href="./images/SyntaxHighlighter.css"/>
<!-- 소스코드를 입력을 위한 스크립터 끝-->
이 코드를 타이틀 바로 위에 넣습니다.
이제는 세부 파일을 불러오는 코드를 넣습니다.
<!-- 소스사용을 위한 스크립터 -->
<script class="javascript" src="./images/shCore.js"></script>
<script class="javascript" src="./images/shBrushCSharp.js"></script>
<script class="javascript" src="./images/shBrushCpp.js"></script>
<script class="javascript" src="./images/shBrushCss.js"></script>
<script class="javascript" src="./images/shBrushDelphi.js"></script>
<script class="javascript" src="./images/shBrushJScript.js"></script>
<script class="javascript" src="./images/shBrushJava.js"></script>
<script class="javascript" src="./images/shBrushPhp.js"></script>
<script class="javascript" src="./images/shBrushPython.js"></script>
<script class="javascript" src="./images/shBrushRuby.js"></script>
<script class="javascript" src="./images/shBrushSql.js"></script>
<script class="javascript" src="./images/shBrushVb.js"></script>
<script class="javascript" src="./images/shBrushXml.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<!-- 소스사용을 위한 스크립터 끝 -->
이 역시 위치를 확인하고 적용을 누르고 빠져나옵니다.
사용 방법은 에디터 html모드에서 입력합니다.
<textarea name='code' class='java'>
코드 내용
</textarea>
class='' ''사이에 해당하는 언어를 넣으면 되는데 html이라도 java로 사용해도 제대로 표현되는데 결과가 표현이 안 된다면 해당 언어를 넣어야 합니다. TypeScript는 java로 넣으니 표현되네요. 아래는 코드 블럭으로 표현하지 않아 애드센스 측에서 받은 오류 내용입니다.