2017년 1월 6일 금요일

자신의 blogger/blogspot에서 Highlight code를 아주 간단하게 하는 법

간혹 코드를 올리고 싶은데 그냥 글을 쓰면 예쁘지가 않다. 문법이 잘 눈에 들어오지도 않고 본문과 구별이 되지도 않기 때문에 조금 더 신경 써서 코드를 '잘' 보이게 해줄 필요가 있다. 예를 들어:

#include <iostream>

using namespace std;

int main()
{
    cout << "Hello world!" << endl;
    return 0;
}

와 같은 C++ 코드를 그냥 blogger/blogspot 글쓰기에 작성하면 본문과 전혀 구분이 되지 않는다. 하지만 조금만 신경을 쓰면 아래와 같이 바탕색과 함께 해당 프로그래밍 언어에 맞게 문법을 읽어 적당히 강조를 해주도록 할 수 있다.

#include <iostream>

using namespace std;

int main()
{
    cout << "Hello world!" << endl;
    return 0;
}

다음 링크: https://tohtml.com/cpp/ 를 따라가면 아래와 같은 창이 나오는데,



그림에 표시된 것과 같이 1번 소스코드 창에 자신이 원하는 소스코드를 붙여넣고 style (배경색)과 type(프로그래밍 언어)를 고른 다음 highlight 버튼을 누르면 2번 창에 html 코드와 함께 미리보기가 보인다.
이 html 코드를 복사해서 글 쓰는 곳에 붙여 넣으면 미리보기와 같이 아주 편하게 코드를 강조해줄 수 있다.



댓글 2개:

  1. 유용한 팁이네요! highlight.js 인가 이것도 써봤는데 이것도 좋아요~!

    답글삭제