[티스토리(Tistory)] SyntaxHighlighter Setting!!

퓨림노
Web/Tistory
2021. 1. 26.

블로그를 몇일(달) 째 방치하다가..

css과 관련된 홈페이지 설정을 만지작 거리다가. 티스토리에 css를 이용한 양식들이 있지 않을까 생각이 되어, 검색을 하였습니다.

정말 티스토리에 있는 추천 스킨보다 더 많이 있었지요.

아무생각없이 티스토리에 스킨을 적용하였더니,

기존에 적용되어 있는 구글광고 및 소스코드출력을 위한 자료들이 초기화가 되어 ㅠ_ㅠ

참조하였던 블로그들을 다시 살펴보고 추가하는데...

도저히, 다시보고 할 수 없어 필요한 것을 블로에 그냥 정리하고자 생각했지요.

요약판이므로 꼭! 젤 아래 참조한 블로그들을 보시길 바랍니다.

by 퓨림노

먼저 미리보는 움짤!

01. SyntaxHighlighter 3.0.83 Version Download

http://alexgorbatchev.com/SyntaxHighlighter/download/

syntaxhighlighter_3.0.83.zip

<THML/CSS 을 편집하자>

01. 관리창 > HTML/CSS 편집 > skin.html 수정

1.1 "</head>" 검색 하여 바로 위에 아래 코드 저장

1.2 "</body>" 검색 하여 바로 위에 저장

02. 관리창 > HTML/CSS 편집 > style.css 수정

- 아래는 문법과 관련은 없지만, 티스토리 스킨(Skin) 변경으로 인해, 이미지의 Size가 제대로 출력되지 않을 때,

블로그의 폭(width)를 조정하는 것이다. 각 Style마다 width를 조정하는 것이 틀리니, 꼭 제작자 홈페이지를 확인해보아야 할 것 같다.

@media (min-width: 1200px) {
.container {
width: 1500px;
}
}

03. SyntaxHighlighter 문법 정리

- http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

- 기본적으로 "Pre" 를 많이 사용하고 있다. 하지만 스킨을 변경하면서 코드를 보니 코드에 line번호가 보여 지저분하게 되었다.

이를 위해서 몇가지 조사를 하다보니 아래와 같이 몇가지 속성을 지정해 줄 수 있었다. 각자 필요한 몇가지만 캐치하고 넘어가도록 하자.

위의 내용을 티스토리(Tistory)에서 사용하기위해서는 html tag 형태로 삽입을 하여야 한다.

블루레이( http://blueray21.tistory.com/30 ) 님의 블로그 게시물의 아래쪽에내려가면 정리가 잘되어 있다.

나에게 필요한 몇가지만 따로 정리하도록 해보자.

Default

<pre class="brush: java">
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}
</pre>

Example

class HellowJava { public static void main(String[] args) { System.out.println("Hello, Java ! "); } }

gutter : Allows you to turn gutter with line numbers on and off. Click here for a demo.

<pre class="brush: java; gutter: false;">
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}
</pre>

Example

class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}

highlight : Allows you to highlight one or more lines to focus user’s attention. When specifying as a parameter, you have to pass an array looking value, like [1, 2, 3] or just an number for a single line. If you are changing SyntaxHighlighter.defaults['highlight'], you can pass a number or an array of numbers. Click here for a demo.

<pre class="brush: java; first-line: 11; highlight: [13, 15];">
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}
</pre>

Example

class HellowJava { public static void main(String[] args) { System.out.println("Hello, Java ! "); } }

개인 참고글

- 티스토리 스킨을 날려버릴 경우를 대비해서, css/html 을 셋팅 해둔 것을 저장해두도록 하자!

- http://vbflash.net/919

reference

[1] 티스토리 본문 폭 늘리기

- http://exocet.tistory.com/121

[2] 티스토리 블로그, 이미지가 본문 가로폭을 넘어갈 때 해결 방법

- http://www.cmsfactory.net/node/10198

[3] 티스토리 본문폭 변경으로 인한 이미지 잘림현상 해결하기

- http://experience.so/241