본문 바로가기

티스토리 가이드/관리 : 글쓰기

코드블럭으로 소스코드 작성하기

코드 블럭 삽입하기

개발자 블로거를 위하여 코드 삽입 기능을 제공합니다. 코드 블럭은 소스코드를 입력하고 보기 좋게 공유하는 것을 돕는 기능입니다. 툴바 메뉴에서 더보기 > 코드블럭을 선택하여 사용할 수 있습니다.

 

 

코드블럭을 선택하면 코드 입력창이 뜹니다. 입력하려는 언어를 선택하고 코드를 입력해 보세요.

 

코드 입력 후 확인 버튼을 클릭하면 본문에 소스 코드가 삽입됩니다.

 

글을 발행했는데 코드 하이라이트가 적용되지 않았나요?

에디터의 코드블럭 기능은 아래와 같은 HTML 결과물을 만듭니다. 에디터에서 사용하는 코드 문법 강조 기능은 결과물에 적용되어 있지 않습니다. 이는 다른 모양이나 방식으로 필요한 형태로 자유롭게 사용하시도록 지원하기 위한 의도입니다. 이미 스킨에서 highlight를 적용하여 사용하는 분들의 사용성을 유지하기 위하여 고려한 측면도 있습니다.

 

<pre><code class='LANG'> ... </code></pre>

 

스킨을 통해 지원받을 수 없는 경우 티스토리에서 제공하는 코드 문법 강조 플러그인을 사용하실 수 있습니다. 인기있는 테마를 선택할 수 있어 원하는 모양으로 코드블럭을 꾸밀 수 있습니다.

 

GitHub에 공개된 highlight.js를 포함하여 이미 공개된 코드 하이라이터를 적용하시거나 필요한 형태로 만들어 사용하실 수도 있습니다.

 

highlightjs/highlight.js

Javascript syntax highlighter. Contribute to highlightjs/highlight.js development by creating an account on GitHub.

github.com

 

  • 털 업 2019.03.28 11:51 신고

    감사합니다! 진짜 필요한 기능이었어요

  • 2019.03.28 20:38

    비밀댓글입니다

  • doubler 2019.03.31 17:34 신고

    코드블럭으로 안에 코드를 입력했는데 스타일이 적용이 되지 않고 단순 텍스트로 나타납니다.. ㅠCSS 적인 측면은 따로 제공되지 않는 건가요?

  • upcount 2019.04.01 12:24 신고

    코드 하이라이팅 기능도 따로 추가해주시면 정말 감사하겠습니다 ㅜㅜ 너무 편해요

  • 준스파파IT개발 2019.04.02 15:23 신고

    코드블럭은 아래와 같은 HTML만 만들어 드립니다. 에디터에서 사용하는 코드블럭의 css와 js를 발행 화면에서는 적용하지 않았습니다.
    ==> 글작성화면에서 보이는 수준의 스타일을 기본적으로 적용해서 보여주세요~~ html 편집기 열어서 일일이 수정하기 힘듭니다.

  • lovey25 2019.04.04 16:01 신고

    <pre><code> ~ </code></pre>가 아닌 다른 형태의 태그도 사용할 수 있도록 옵션을 추가해주세요 Syntaxhighlighter 를 사용하고 있는데 <pre> ~ </pre>의 태그만 사용하는 하이라이터인데 에디터에서 코드블럭 클릭한번만 하면 기 작성해둔 태그 및 설정마저 새로운 에디터의 코드블럭으로 바꿔버리는데 아주 환장하겠습니다. 코드블럭 앞뒤에 자동 추가되는 html코드를 사용자가 바꿀수 있도록 해주시면 좋겠어요.

  • saltdoll 2019.04.12 02:23 신고

    발행된 글에 스타일 쉽게 적용하기
    => 관리자>스킨편집(html편집)에서 CDN방식 태그를 추가해주면 됩니다.

    highlight.js 쉽게 적용하는 방법: https://blog.edit.kr/1685

  • MeditT 2019.04.22 11:12 신고

    감사합니다 기능 너무 좋아요

    그런데 inline code 블럭은 따로 없나요?
    마크다운에서 `getCodeBlock()` 이렇게 사용하는 블럭이요.

  • MeditT 2019.04.22 11:14 신고

    그리고 코드블럭에 Shift + Tab 기능 넣어주시면 안 되나요 ㅠㅠ 인덴트 적용시킬 때 너무 불편합니다.
    탭 하나 지우려면 백스페이스를 4번 눌러야 해요

  • Awesometic 2019.04.22 17:22 신고

    감사합니다. 덕분에 더 쉽게 글을 쓸 수 있게 됐어요.

    근데 prism.js 에서 inline code block이 적용 안 되네요 ㅠㅠ <code class="language-html"></code> 형식으로 돼야 하는데 언어를 지정할 수가 없어요.. 언어 지정 가능하게 해주세요. 깃허브에선 {:.html} 형식으로 지정합니다.

    일단은 간단한 jQuery 스크립트를 넣어서 치환하면서 사용해야 겠어요.

    제 생각엔 에디터에서 제공하는 코드 하이라이팅을 발행했을 때도 적용해준다던가, 아니면 ``에 대해 pre나 code 태그 클래스를 커스터마이징 할 수 있게 해주셨음 좋겠습니다. :)

  • Tongchun 2019.04.25 15:25 신고

    저도 Syntaxhighlighter 사용하고 있는데 자동으로 붙는 <code> 태그만 붙지 않았으면 좋겠어요.
    너무 불편합니다.

  • hashnut 2019.04.26 18:43 신고

    궁금한게 있습니다. 모바일 화면에서는 pre block에 회색 처리가 잘 되는데, PC 환경에서는 syntax highlight기능만 작동하고 pre block이 회색으로 변하지 않습니다. CSS를 건드려봐도 적용이 안되는데 해결책이 있을까요? 크롬과 파이어폭스 최신버전에서 열었는데 PC버전에서는 배경이 투명하게 나오네요..
    https://iamfoodie.tistory.com/17
    이런식으로, 코드 블럭 부분에 회색 처리가 되지 않습니다(PC에서는)
    dark theme을 적용했을 때 코드 일부가 안보이는걸로 봐서는 뭔가 invert된건가 싶기도 한데요..

  • IfUWanna 2019.04.30 16:00 신고

    syntaxhighlighter_3.0.83 사용중인데요 위에 분과 동일하게 pre 태그로만 하이트라이트 처리 타겟을 정하는데 code 태그가 자동으로 붙어서 마지막에 하나하나 다 빼줘야 합니다 -_-
    커스텀 하이라이터 사용하게 플랫폼 만드실거면 태그도 강제하지말고 라이브러리에 맞게 설정할수 있도록 해주길 부탁드립니다.

  • Tongchun 2019.05.20 18:18 신고

    현재 코드블럭을 지정해 작성하면 설명해 주신 아래 코드처럼 보이지 않고...
    <pre><code class='LANG'> ... </code></pre>

    <pre id="code_1558343745973" class="go" data-ke-type="codeblock"><code> ... </code></pre>
    형태로 보이고 있습니다. 어떻게 맞는건지 확인이 필요할 것 같습니다.


  • hi098123 2019.05.30 02:14 신고

    아마 이거 설명이 부족해서 적용하는방법을 모르시는분들이 많은거 같은데요

    https://hi098123.tistory.com/14

    적용법 설명해드렸습니다.

  • 2019.07.04 23:48

    비밀댓글입니다

  • syaku 2019.07.05 01:15 신고

    구현한다고 고생하셨네요... 저 또한 되지도 않는 거에 시간만 보냈네요... 그냥 예전거 쓰는 걸로~

  • Kine00 2019.10.11 07:11 신고

    혹시 탭 간격도 조절 할 수 있을까요?.. ㄷㄷ.. 탭 간격이 너무 큰데..