티스토리 뷰




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

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


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

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


<StackOverFlow CodeHighlight>


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

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


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


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


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

<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.0.0/styles/default.min.css">

<script src="//cdn.jsdelivr.net/highlight.js/9.0.0/highlight.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

위 코드를 블로그내 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에 적용시킨 코드 주소를 맞추어 바꾸어 줘야 한다. 

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

'Blog' 카테고리의 다른 글

[Blog]Code Highlighter 적용하기 (티스토리)  (0) 2015.12.21
댓글