날개를달다 IT 잡학다식 사전

[Blog] 티스토리 글꼴 바꾸기 (네이버 무료 배포 글꼴 적용하기)

날다의 운영환경
본체	DeskTop
O S	Windows11 Pro
Browser	Google Chrome

[Blog] highlight.js 소스 복사 기능 추가(복사 버튼 추가)

Fly_Mir — Fri, 10 Jan 2025 14:42:52 +0900

highlight.js에 적힌 소스코드를 클릭 한번에 복사해보자.

필자가 이전 Syntax Highlight에서 제일 애용했던 기능은 더블클릭시 소스 전체 선택이였다.

필자가 올린 소스를 다시 사용하는데 복사 붙혀넣기가 안되면 그것만큼 불편한것도 없기때문이다.

(몇몇 소스는 너무 길기도 해서 드래그하기도 힘들다.. ㅠㅠ)

아쉽게도 highlight.js에는 그런기능이 없으니 Copy버튼을 하나 만들어서 버튼 클릭시 소스를 클립보드에 복사하도록 해보자.

CSS 추가

우선 아래 CSS부터 추가 해주자.

  /*/////////////////////////*/
  /*코드 Copy 버튼*/
  /*/////////////////////////*/
  div.highlightTopDiv > .toolbar {
    /*위치 고정*/
    position: absolute;
    top: 10px;
    right: 10px;
    /*기본은 안보이게*/
    opacity: 0;
    /*opacity가 변화할때 천천히 변화하게*/
    transition: opacity 0.2s ease-in-out;	
  }
  /*마우스 오버시 보여주기*/
  div.highlightTopDiv:hover > .toolbar {
    opacity: 1;
  }
  /*포커싱 받을시 (마우스 클릭시 포커싱 받음) 보여주기*/
  div.highlightTopDiv:focus-within > .toolbar {
    opacity: 1;
  }
  /*마우스 오버시 버튼 설정(기본 설정)*/
  div.highlightTopDiv > .toolbar a,
  div.highlightTopDiv > .toolbar button,
  div.highlightTopDiv > .toolbar span {
    border: 0;
    color: #bbb;
    font-size: 11px;
    padding: 2px 5px;
    background: #f5f2f0;
    background: rgba(224, 224, 224, 0.2);
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
    border-radius: .5em;
  }
  /*포커싱 받거나 버튼구역 오버시 텍스트 색상 변경*/
  div.highlightTopDiv > .toolbar a:hover,
  div.highlightTopDiv > .toolbar a:focus,
  div.highlightTopDiv > .toolbar button:hover,
  div.highlightTopDiv > .toolbar button:focus,
  div.highlightTopDiv > .toolbar span:hover,
  div.highlightTopDiv > .toolbar span:focus {
    color: inherit;
    text-decoration: none;
  }
  /*/////////////////////////*/
  /*코드 Copy 버튼*/
  /*/////////////////////////*/

Copy버튼은 이전에 만든 제목 라벨 우측상단에 올릴것이다. 라벨에 마우스를 올리면 버튼이 보이도록 설정해두었다.

(현재 적용되어 있으니 어떤 느낌인지 미리 확인해봐도 된다.)

제목 라벨을 아직 만들지 않았으면 아래 링크를 따라가서 만들도록 하자.

[Blog] highlight.js 제목 라벨 기능 추가(사용 언어 표시)

highlight.js에 적힌 소스코드가 어떤 언어인지 제목 라벨에 표시해주자. 현재 필자의 블로그를 보면 소스강조구문(highlight.js)위에

mirwebma.tistory.com

HTML 추가

<script>
    //화면상의 pre를 모두 불러서 아래 코드를 실행
    $("pre").each(function() {
      var pre = this;             //PRE
      var name = this.className;  //PRE Class이름을 가져온다.(PRE class이름은 곧 사용하는 코드이름)
      
      if(name == "nohighlight")
      {
        //highlight.js에서 nohighlight속성은 아무것도 지원하지 않기 때문에
        //필자도 nohighlight일때는 아무것도 해주지 않는다.
      }
      else if(name == "plaintext")
      {
        //highlight.js에서 plaintext속성은 일반텍스트로 표현할때 쓰기때문에
        //라벨을 TEXT로 넣어줄까 말까 고민하다가 그냥 아무것도 해주지 않기로 결정했다.
        //TEXT라벨을 넣고 싶으면 아래 주석을 풀어주기만 하면 된다.
        //var $highlightTopDiv = $('<div class="highlightTopDiv">').text("TEXT");
          //$(this).before($highlightTopDiv);
      }
      else if(name == "")
      {
        //class가 지정되있지 않을때 highlight.js의 언어 자동감지를 사용한다는 뜻인데
        //자동감지를 할때 확인해보니 highlight.js에서 Class를 자동으로 입력해준다.
        //그래서 class가 ""일때는 highlight.js가 제대로 작동하지 않았을경우인데
        //아직 확인해본적이 없어서 일단 공란으로 놔두기로 했다.
      }
      else
      {
        //위의 경우를 제외하고 class가 지정되었을때 highlightTopDiv이라는 Div를 생성후
        //해당 코드를 표시해준다. (위 Css에서 highlightTopDiv 디자인을 미리 만들어두었다.)
        var $highlightTopDiv = $('<div class="highlightTopDiv">').text(name);
          $(this).before($highlightTopDiv);
        //////////////////////////////////////////////////////////////////////////////
        ////////////////////Copy 버튼 관련 추가 로직////////////////////////////////////
        //////////////////////////////////////////////////////////////////////////////
        //Copy버튼을 올릴 div를 만들어주고 해당 div를 제목라벨 div에 올린뒤
        //Copy버튼을 copyDiv에 넣어준다.
        var $highlightCopyDiv = $('<div class="copyDiv">');
          $highlightTopDiv.append($highlightCopyDiv);          
        var $highlightCopyBtn = $('<button>Copy</button>');
        $highlightCopyDiv.append($highlightCopyBtn);
        
        //Copy버튼 클릭시 클립보드에 pre안에 있는 텍스트를 넣어준다.
        $highlightCopyBtn.on("click", function() {
          navigator.clipboard.writeText(pre.innerText);          
        });                
      }
    });   
</script>

기존 제목라벨 스크립트 소스에 Copy 버튼 관련 소스를 추가해주었다.

위 스크립트를 HTML소스 제일 아래 </body> 바로 위에 추가시켜주면 된다.

주의사항

제목 라벨을 설정하지 않고 Copy기능만 넣고 싶다고 한다면 일단 스크립트 소스에서 highlightTopDiv관련 소스는 다 삭제하고 (if문은 있어야 한다.) 아무 div를 하나 만들어서 pre를 올린뒤 그 div에 Copy버튼 div를 올리면 될것이다.

[Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기)

[Blog] highlight.js 폰트 변경 하기 (D2 Coding 폰트 티스토리 적용)

날다의 운영환경
본체	DeskTop
O S	Windows11 Pro
Browser	Google Chrome

[Blog] highlight.js 제목 라벨 기능 추가(사용 언어 표시)

Fly_Mir — Thu, 9 Jan 2025 21:24:52 +0900

highlight.js에 적힌 소스코드가 어떤 언어인지 제목 라벨에 표시해주자.

현재 필자의 블로그를 보면 소스강조구문(highlight.js)위에 해당 소스코드가 어떤 언어인지 표시가 되어있다.

필자와 같이 해당 기능을 추가해도록 해보자.

CSS 추가

우선 아래 CSS부터 추가 해주자.

.highlightTopDiv  {
    /*텍스트 관련*/
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;    /*대문자로 표시해주기*/
    /*색상 관련 - 각자 자기가 결정한 스킨에서 색을 추출하길 추천함*/
    color: #FFB871;
    background-color: #222222;
    /*그림자 효과 관련*/
    margin-left: -10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    /*박스 관련*/
    margin-top: 10px;
    padding: 10px;
    position: relative;
  }

그리고 보통(나만 그런지 확실치 않지만) 티스토리에는 아래와 같이 코드 블럭 관련 CSS가 있다.

/* 코드 블럭 */
#article-view pre code.hljs {
  font-size: 13px;
  padding: 10px;
  font-family: SF Mono, Menlo, Consolas, Monaco, monospace;  
  line-height: 1.71;
  overflow: auto;
  white-space: pre-wrap; 
  word-break: break-word;
}

필자가 폰트사이즈는 확실히 건들었다는걸 기억하고 있는데....

나머지는 뭘 추가했는지 지웠는지 기억을 못하는중이다.. ㅠㅠ

.article-view pre {    
    font-size: 16px;    
    white-space: pre-wrap;
    margin: 0;
  }

마지막으로 pre 관련 css에서 margin 0을 추가시켜주었다.

마찬가지로.. 나머진 뭘 수정했는지 확실히 기억을 못하고 있다...

HTML 추가

<script>
    //화면상의 pre를 모두 불러서 아래 코드를 실행
    $("pre").each(function() {
      var pre = this;             //PRE
      var name = this.className;  //PRE Class이름을 가져온다.(PRE class이름은 곧 사용하는 코드이름)
      
      if(name == "nohighlight")
      {
        //highlight.js에서 nohighlight속성은 아무것도 지원하지 않기 때문에
        //필자도 nohighlight일때는 아무것도 해주지 않는다.
      }
      else if(name == "plaintext")
      {
        //highlight.js에서 plaintext속성은 일반텍스트로 표현할때 쓰기때문에
        //라벨을 TEXT로 넣어줄까 말까 고민하다가 그냥 아무것도 해주지 않기로 결정했다.
        //TEXT라벨을 넣고 싶으면 아래 주석을 풀어주기만 하면 된다.
        //var $highlightTopDiv = $('<div class="highlightTopDiv">').text("TEXT");
          //$(this).before($highlightTopDiv);
      }
      else if(name == "")
      {
        //class가 지정되있지 않을때 highlight.js의 언어 자동감지를 사용한다는 뜻인데
        //자동감지를 할때 확인해보니 highlight.js에서 Class를 자동으로 입력해준다.
        //그래서 class가 ""일때는 highlight.js가 제대로 작동하지 않았을경우인데
        //아직 확인해본적이 없어서 일단 공란으로 놔두기로 했다.
      }
      else
      {
        //위의 경우를 제외하고 class가 지정되었을때 highlightTopDiv이라는 Div를 생성후
        //해당 코드를 표시해준다. (위 Css에서 highlightTopDiv 디자인을 미리 만들어두었다.)
        var $highlightTopDiv = $('<div class="highlightTopDiv">').text(name);
          $(this).before($highlightTopDiv);
      }
    });   
</script>

위 스크립트를 HTML소스 제일 아래 </body> 바로 위에 추가시켜주면 된다.

주의사항

소스강조가 아닌 그냥 기본 PRE를 사용할때 class에 "nohighlight"를 꼭 적어야 따로 충돌없이 PRE가 정상적으로 표현됩니다.

(혹시 제대로 적용이 안되거나 문제가 생길때 댓글로 물어보시면 최대한 빠르게 답변해드리겠습니다.)

(2025/01/09 기준 최소 6개월은 백수예정이라 바로 답변 가능함..)

[Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기)

[Blog] highlight.js 폰트 변경 하기 (D2 Coding 폰트 티스토리 적용)

날다의 운영환경
본체	DeskTop
O S	Windows11 Pro
Browser	Google Chrome

[CSS] HTML에서 자주 쓰이는 특수문자 표로 정리( < , > , 공백, 큰따옴표)

Fly_Mir — Thu, 9 Jan 2025 14:56:45 +0900

HTML작성시 특수문자 처리 하는 방법에 대해 알아보자.

필자는 VS Code라는 프로그램을 사용하여 HTML로 블로그 글을 다 적은후 티스토리 HTML에 붙혀넣기 하여 블로그를 작성한다.

평소에는 별 문제가 없지만 특수문자를 적을때 HTML소스코드의 한부분으로 인식할때가 종종 있다.

그래서 특수문자는 따로 치환해서 표시를 해줘야 하는데 우선 자주쓰는 몇몇 특수문자부터 알아보자.

코드	특수 문자	코드	특수 문자	코드	특수 문자	코드	특수 문자
<	<	>	>	(	(	)	)
	[공백]	"	"	/	/	&	&

※ 보통 제일 문제가 생기는 부분이 <, >이다 나머지는 문제가 생길때도 있고 안생길때도 있다.

※  (공백)은 어디서든 글을쓰다보면 HTML코드에 마구잡이로 생길때가 많다. 한번쯤은 봤을것이다.

※ 저 코드의 정확한 이름은 ASCII CODE(아스키 코드)이다.

옛날에 쓰던 128가지 통신용 코드표를 현재는 256개까지 확장되어 쓰이고 있다.

※ 아래표는 필자가 자주 쓸만한 특수문자만 표로 만들었고 전체를 다 보고 싶으면 아래 사이트에서 확인가능하다.

ASCII table - Table of ASCII codes, characters and symbols

A complete list of all ASCII codes, characters, symbols and signs included in the 7-bit ASCII table and the extended ASCII table according to the Windows-1252 character set, which is a superset of ISO 8859-1 in terms of printable characters.

www.ascii-code.com

특수문자 ASCII CODE표 (내가 쓸만한것)

번호	특수문자	HTML (Number)	HTML (Name)	설명
0~32	통신용 코드이다. HTML에서 사용될일이 거의 없을것이다. ※ 10번은 엔터값으로 사용한다. ※ 32번은 스페이스값인데 160번 스페이스를 사용하지 32번을 사용하진 않는다.
33	!	!	&excl;	느낌표
34	"	"	"	큰따옴표
38	&	&	&	Ampersand
39	'	'	'	작은 따옴표
40	(	(	&lparen;	왼쪽 괄호
41	)	)	&rparen;	오른쪽 괄호
47	/	/	/	슬러쉬
48~57	0 ~ 9 까지
59	;	;	&semi;	세미콜론
60	<	<	&#lt;	보다 작은(Less than)
62	>	>	&#gt;	보다 큰(Greater than)
64	@	@	&#commat;	골뱅이(At sign)
65~90	대문자 A부터 Z까지
95	_	_	&#lowbar;	언더바
97~122	소문자 a부터 z까지
123	{	{	&#lcub;	왼쪽 중괄호(Opening brace)
124	\|	\|	&#verbar;	세로선(Vertical bar)
125	}	}	&#rcub;	오른쪽 중괄호(Closing brace)
145~148	왼쪽,오른쪽 큰따옴표 작은따옴표가 따로 있었다..(그냥 하나로 쓰자아..)
160			&#nbsp;	공백 (스페이스)

※ 필자는 대충 평소 사용하는게 이정도이고 홈페이지에 가보면 다른 특수문자들도 많다. (©나 †, ½ 등등)

※ 숫자보단 약어로 외워두면 편한데 약어도 은근히 헷갈린다.

날다의 운영환경
본체	DeskTop
O S	Windows11 Pro
Browser	Google Chrome

[Blog] highlight.js 사용하기(기능확인 및 HTML로 사용하기)

Fly_Mir — Thu, 9 Jan 2025 01:16:25 +0900

highlight.js의 사용방법을 알아보자.

아직 highlight.js 설치가 되지 않은사람은 아래 링크를 먼저 보고 오자.

[Blog] highlight.js 설치하기(티스토리에 설치하기)

highlight.js를 직접 설치해보자.이전 블로그글 [Blog] 소스 코드 하이라이트 기능 사용하기 (Syntax Highlight 티스토리 버전)에서 티스토리 플러그인 코드 문법 강조 (Syntax Highlight)기능 설정과 사용방법

mirwebma.tistory.com

티스토리 플러그인 사용방법과 동일하게 사용하기

티스토리 플러그인 사용방법과 동일하게 글쓰기에서 더보기 -> 코드블럭 클릭후 코드를 입력하면 된다.

자세한 방법은 [Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기) 에서 확인할수 있다.

※ 문제점이 있다. 원래 티스토리에 설정되어 있는 언어리스트만 표시하기 때문에 새롭게 추가한 언어는 결국 HTML에서 수정해줘야 한다.

※ 코드블럭을 넣고난뒤 HTML에 들어가면 <pre>에 data-ke-language와 data-ke-type 속성이 있다.

둘다 공식홈페이지에서 지원하는 속성이 아니고 티스토리에서 지원하는 속성인데 정확히 어떤 작용을 하는지는 확인할수가 없다.

※ 리스트에 없는 언어를 설정하고 싶으면 class속성을 바꿔줘야 한다. (data-ke-language속성은 공식 홈페이지 지원 속성이 아니다.)

HTML 구문에 직접 추가해서 사용하기

<pre><code> 코드작성 </code></pre>

기본적으로 <pre><code>와 </code></pre> 사이에 코드를 넣으면 언어를 자동으로 감지한다.

하지만 언제나 예외가 있으니 감지를 못할경우를 위해 기본적으로 class라는 속성을 추가해준다.

(위 예제는 class 속성을 넣지 않았는데 HTML을 자동감지해서 class에 HTML이 들어가있는 상태이다.)

<pre class="지원언어 코드"><code> 코드작성 </code></pre>

만약 C# 코드를 작성했다면 <pre class="csharp"><code> C# 코드 </code></pre>처럼 넣으면 된다.

지원언어 코드는 https://highlightjs.readthedocs.io/en/latest/supported-languages.html에서 확인 가능하다.

plaintext

<pre class="plaintext"><code> 코드작성 </code></pre>

class에 plaintext를 넣으면 일반 텍스트로 처리된다. highlight.js의 배경만 가지고 오고 싶을때 사용할수 있다.

(라고 홈페이지에 써져있는데... 지금 plaintext라는 부분에 노란색이 있으면 안되는데... 왜 있지?)

(이 기능은 좀더 알아보고 다시 수정하도록 하겠습니다...)

→ ~~일단 HTML을 자동감지하지는 않습니다. 일반 텍스트에도 ""안에 있는것은 강조 표시 하는걸로 보입니다.~~

 → 현제 plaintext를 넣어도 소스 자동감지는 계속 돌아가고 있습니다.
 원래 소스 감지후 해당 소스의 언어를 class에 자동으로 넣어주는데 그건 작동안하고 있습니다.
 티스토리만 이런건지 정확히는 모르겠습니다. (티스토리 플러그인과 충돌일 가능성도 있습니다.)
 아무튼 보통 텍스트만 올리면 HTML로 인식해서 ""안에 있는 글은 강조표시 됩니다.
 (특정소스 코드를 올리면 해당 코드로 인식해서 숫자도 강조표시 될수 있습니다.)

nohighlight

<pre class="nohighlight"><code> 코드작성 </code></pre>

class에 nohighlight를 넣으면 모든 스타일과 기능이 사라진다.

일반 pre를 사용해야될 일이 있을때 사용하면 된다.

나도 처음에 믿지 못했지만 여기까지가 기능의 전부이다.

예전에 사용되던 Syntax Highlight에서는 줄번호 매기기, 몇번째줄 하이라이트 표시하기 등등 많은 기능이 있었지만

highlight.js는 최대한 가볍게 기타 기능없이 오로지 코드 하이라이트에만 충실하게 구현되어있다.

끝으로..

따로 추가기능이 없어서 조금 실망하기도 했지만 생각해보니 다른기능을 잘 쓰지도 않았던거 같다.

하지만 몇몇 기능들은 추가했으면 좋겠다는 마음이 있는데 필자도 조금 수정해보도록 하겠다.

※ 필자는 코드 줄맞추기를 좋아하는 편인데 이게 <code>뒤에 엔터값을 넣으면 표현되는 부분에서 한줄이 바로 추가되기때문에 <code>와 같은줄에 코드 첫줄을 넣어야 하는데... 줄이 삐뚤어지는게 보기 싫어서 고치고 싶다.. ㅠㅠ

※ 줄 맞추는거 고치는건 포기했고 사용언어를 제목라벨에 넣는기능과 복사기능을 추가하고 폰트변경까지 하였다.

highlight.js 사용언어 제목라벨에 자동표시하기

[Blog] highlight.js 제목 라벨 기능 추가(사용 언어 표시)

highlight.js에 적힌 소스코드가 어떤 언어인지 제목 라벨에 표시해주자. 현재 필자의 블로그를 보면 소스강조구문(highlight.js)위에

mirwebma.tistory.com

highlight.js 내부 소스 버튼클릭으로 복사하기

[Blog] highlight.js 소스 복사 기능 추가(복사 버튼 추가)

highlight.js에 적힌 소스코드를 클릭 한번에 복사해보자.필자가 이전 Syntax Highlight에서 제일 애용했던 기능은 더블클릭시 소스 전체 선택이였다.필자가 올린 소스를 다시 사용하는데 복사 붙혀넣

mirwebma.tistory.com

highlight.js D2 Coding 글꼴로 변경하기

[Blog] highlight.js 폰트 변경 하기 (D2 Coding 폰트 티스토리 적용)

mirwebma.tistory.com

[Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기)

[Blog] highlight.js 폰트 변경 하기 (D2 Coding 폰트 티스토리 적용)

날다의 운영환경
본체	DeskTop
O S	Windows11 Pro
Browser	Google Chrome

[Blog] highlight.js 설치하기(티스토리에 설치하기)

Fly_Mir — Wed, 8 Jan 2025 22:11:23 +0900

highlight.js를 직접 설치해보자.

이전 블로그글 [Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기)에서

티스토리 플러그인 코드 문법 강조 (Syntax Highlight)기능 설정과 사용방법에 대해 알아보았다.

다시 한번 직접설치와 비교하여 장단점을 알아보자면

티스토리 Syntax Highlight 플러그인 장단점

장점

1. 일단 설치가 너무 간단하다.

2. 사용방법이 편함

3. 티스토리에서 지원해주는 만큼 소스충돌 걱정 없이 사용가능

단점

1. 테마가 7개밖에 없다. (직접설치는 498개)

2. 지원해주는 언어가 20개 밖에 없다 (직접설치는 192개)

3. 추가기능을 HTML로 사용할수 있는데 이왕 할꺼면 직접설치를 하는게 더 좋다.

필자는 블로그글을 적을때 HTML을 원래 편집하고 있기때문에 직접설치를 하기로 결정했다.

(설치전 티스토리 플러그인을 설정했었다면 충돌위험때문에 꼭 플러그인 사용 해제를 해줘야 한다.)

highlight.js 설치

1. 사이트 접속 (우측 상단 Download 메뉴 클릭)

https://highlightjs.org/

2. 다운로드 메뉴에서 원하는 언어 선택

언어 선택후 다운로드 클릭

3. 우측상단 Demo메뉴 선택

자주쓰는 소스코드 입력후 원하는 테마 찾기

4. 다운받은 파일 압축풀기

압축 풀고 난뒤 highlight.min.js파일과 styles폴더에서 원하는 테마 파일 찾기

5. 티스토리에 파일 업로드 하기

관리자 페이지 -> 스킨 편집 -> 우측에 HTML편집 -> 상단 파일업로드 메뉴 클릭 -> 4에서 찾은 파일 두개 업로드 하기

6. HTML 헤더 사이에 아래 구문 추가

첫번째줄은 자신이 올린 테마파일 이름을 적어야한다.

     <!-- highlight.js -->
    <link rel="stylesheet" href="./images/gml.css">
    <script src="./images/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
    <!-- end higlight.js -->

7. 적용버튼 클릭

이렇게 highlight.js설치가 완료되었다. 플러그인 활성화만 하면 되는거에 비해 조금은 복잡하다.

(하지만 이전 Syntax Highlight는 훨씬더 복잡했던걸로 기억한다.)

그럼 사용법을 알아보도록 하자.

highlight.js 사용 방법

점점 글이 복잡해져서 다음 포스팅으로 새롭게 만들었다.

[Blog] highlight.js 사용하기(기능확인 및 HTML로 사용하기)

highlight.js의 사용방법을 알아보자. 아직 highlight.js 설치가 되지 않은사람은 아래 링크를 먼저 보고 오자.티스토리 플러그인 사용방법과 동일하게 사용하기

mirwebma.tistory.com

[Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기)

[Blog] highlight.js 폰트 변경 하기 (D2 Coding 폰트 티스토리 적용)

날다의 운영환경
본체	DeskTop
O S	Windows11 Pro
Browser	Google Chrome

[Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기)

Fly_Mir — Wed, 8 Jan 2025 20:08:06 +0900

Syntax Highlight를 티스토리에 적용해보자.

블로그를 몇년만에 다시 시작하고 있는데 티스토리에 정말 많은 기능이 생겨나있다.

그중 예전에 꽤나 고생해서 넣었던 코드 문법 강조(소스 코드 하이라이트)기능을 그냥 지원해주고 있던거에 깜짝 놀랐다.

조금더 알아 보니 원래 적용하고 있던 Syntax Highlight가 아니라 highlight.js에서 제공하는 비슷하지만 다른 기능이였다.

기존 사용하던 Highlight(이하 SH)는 점점 퇴보해서 유지보수 및 업데이트가 되지 않고 있으며 충돌도 자주 일어난다고 한다.

그래서 모두들 highlight.js로 갈아타는중이라는 글들을 보았다.

(실제로 SH홈페이지에 들어가 보았지만 왠 이상한 Wallpaper홈페이지에 들어가진다.)

(기존 SH주소 : http://alexgorbatchev.com/SyntaxHighlighter)

갈아타게 된다면 꽤나 많은글을 수정해야되겠지만 점점 발전하는 기능을 따라가지 못하면 IT관련자 입장에서 퇴보하는거와 마찬찬가지라고 생각이 들어 highlight.js를 사용하기로 결정했다.

티스토리 코드문법강조 플러그인

우선 티스토리에서 자동으로 지원해주는 플러그인을 사용해보도록 해보자.

1. 플러그인 활성화 (설치?)

티스토리 관리자 페이지 -> 플러그인 메뉴 -> 코드 문법 강조 (Syntax Highlight)

해당 창에서 테마를 선택한 뒤에 적용만 하면 된다.

설치가 이걸로 끝이다! 이제 사용만 하면 된다.

2. 코드문법강조 사용하기

사용방법도 매우 간단하다. 글쓰기 메뉴에서 ...을 클릭한뒤 코드블럭을 선택하면 아래와 같은 입력창이 생겨난다.

이제 내가 원하는 언어를 선택한후에 코드를 적고 확인만 누르면 아래와 같이 코드블럭이 글에 포함이 되어있다.

티스토리 Syntax Highlight 장단점

장점

1. 일단 설치가 너무 간단하다.

2. 사용방법이 편함

3. 티스토리에서 지원해주는 만큼 소스충돌 걱정 없이 사용가능

단점

단점이라고 말하긴 애매하지만 highlight.js에서 직접설치와 비교하면

1. 테마가 7개밖에 없다. (직접설치는 498개)

2. 지원해주는 언어가 20개 밖에 없다 (직접설치는 192개)

3. 추가기능을 HTML로 사용할수 있는데 이왕 할꺼면 직접설치를 하는게 더 좋다.

SH와 비교해서는 장점만 가득하지만 직접설치와 비교해서는 편의성은 좋지만 기능은 떨어진다.

필자는 원래 HTML부분을 편집하고 있기때문에 이왕 설치할꺼 직접설치를 하기로 결심했다.

highlight.js 직접 설치하기

[Blog] highlight.js 설치하기(티스토리에 설치하기)

mirwebma.tistory.com