[Blog]Code Highlighter 적용하기 (티스토리)

티스토리 뷰

Blog

[Blog]Code Highlighter 적용하기 (티스토리)

DWFOX 2015. 12. 21. 13:19

티블로그에 Code Highlighter를 적용하는 방법

그나마 코드하이라이트를 적용시켜주는 에디터들도 가끔 소스코드의 확장자명으로 저장하지 않으면 하이라이트가 적용 되지 않는 경우가 많다.

게다가 블로그에 단일 색상으로 붙여넣은 코드들은 읽기도 전에 잘 정리되고 가독성 좋게 꾸며진 코드를 찾게 된다.

Stack Overflow는 아래와 같이 코드가 들어간 페이지에는 하이라이트를 적용시켜 가독성을 높일 수 있게 페이지를 구성해 놓았다.

<StackOverFlow CodeHighlight>

그래서 이 블로그를 시작하기 전에 개발에 관련된 부분에 소스가 첨부될 때 스크린샷을 찍어 올리는 경우도 있겠지만

복붙에 용이하게 코드 하이라이트를 적용시켜보자.

티스토리에 Code HighLight를 적용하기

https://highlightjs.org/ 이 코드 하이라이트 js를 사용할 것이다.

코드 하이라이트에 접속하면 간단한 예제가 나타나고 우측에 (Live Demo)를 클릭하면 적용할 수 있는 스타일(테마)과 언어종류를 확인해볼 수 있다.

Get Version을 통해 블로그 HTML 에 포함시킬 코드를 확인 할 수 있다.

위 코드를 블로그내 HTML의 <head> 여기 </haed> 에 포함시키도록 합니다.

스타일을 바꾸기 위해서는 default 부분을 아래 스타일 디렉토리를 참조하여 이름만 바꾸어 적용시키면 됩니다.

https://github.com/isagalaev/highlight.js/tree/master/src/styles

코드 적용시키기

<pre><code class="언어명"> 하이라이트 시킬 코드 넣기 </code></pre>

HTML 편집기로 들어가 위와 같이 pre사이에 언어를 설정해주고 코드를 넣고 적용시키면 하이라이트가 적용됩니다.

※ 적용전 코드

package com.dwp.myapplication;

import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.Snackbar;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;

import android.view.Menu;

import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

fab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

.setAction("Action", null).show();

}

});

}

※ 적용후 코드 ( monokai-sublime Style )


package com.dwp.myapplication;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }
}

※ 티스토리 내에 관련 파일을 업로드 시켜 적용시켜도 된다.

그럴일을 잘 없겠지만 위 사이트가 변경되면 Html Head에 적용시킨 코드 주소를 맞추어 바꾸어 줘야 한다.

하지만 티스토리에 업로드 시켜 사용하면 바꾸지 않아도 된다.

공유하기 링크

페이스북
카카오스토리
트위터

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

DWFOX

TAG more

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

글 보관함

티스토리 뷰

[Blog]Code Highlighter 적용하기 (티스토리)

티스토리툴바