코드 하이라이트

워드프레스 업데이트

오랜만에 글 하나 쓰려고 봤더니, 사진 올릴 공간이 모자라네요.
돈도 안되는 블로그에 또 돈들이기 싫어서, 이미지 압축 플러그인 설치해서 100MB 정도 공간을 확보해봤습니다.

설정을 건드린 김에 미사용중인 플러그인도 정리하고, PHP 버전도 7.3으로 업데이트 해봤는데요. 저런.. 오류가 팍팍 뜨는군요.
대부분 오래된 플러그인 문제일 확율이 커서, 하나씩 비활성화하다 보니 crayon-syntax-highlighter 가 문제였습니다.
마지막 업데이트가 4년전이기 때문에 더 이상 사용하는건 문제가 많을것 같아서 해당 플러그인은 과감히 삭제해 주었습니다.

코드 하이라이트

코드 하이라이트를 위한 다른 플러그인을 찾아서 몇가지 적용해 보았는데요.
최신버전의 워드프레스에서 동작은 잘하지만, 과거에 textcube 시절에 작성한 코드들에는 적용이 안되네요.
모든 글들을 다 수정할 수도 없고, 플러그인을 수정하면 업데이트시 귀찮아지기 때문에 highlightjs 를 적용해 보았습니다.

https://highlightjs.org/

insert-headers-and-footers

헤더에 js/css 등을 넣기 위해 테마나 wordpress 파일을 건드려도 되지만, 이 또한 업데이트시 사라질 확율이 크기 때문에 header와 footer에 코드를 삽입할 수 있는 플러그인을 추가하였습니다.

highlightjs

https://highlightjs.org/download/ 에서 확인해 보면 현재 10.3.2 까지 release되어 있습니다. cdnjs의 css와 js 두줄을 복사해서 헤더에 넣어주면 적용 준비는 완료입니다.
style은 기본값이 아닌, intelliJ에서 주로 사용하던 dracula로 적용하였습니다.
initHighlightingOnLoad()로 초기화시에 <pre><code>...</pre></code> 만을 대상으로 합니다. 하지만, textcube 시절에 작성했던 코드들은 <div><pre>..</pre></div>에 들어 있어서 코드 하이라이트가 적용이 안되더군요.
그냥 jQuery로 대상이 되는 것들을 찾아 초기화 해주었습니다.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/dracula.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js"></script>
<script>
jQuery(document).ready(function () {
	jQuery('div pre').each(function(i, block) { 
		hljs.highlightBlock(block); 
	});
	jQuery('pre code').each(function(i, block) { 
		hljs.highlightBlock(block); 
	});
});
</script>

highlightjs 관련한 내용들은 아래의 블로그를 참고하였습니다.

https://webdir.tistory.com/439

d2coding

기존에 사용하던 IDE에서 D2Coding을 주로 사용하는 관계로, D2Coding 웹폰트를 적용하였습니다.
https://github.com/Joungkyun/font-d2coding 에서 파일을 다운로드 후 압축을 풀어 서버에 업로드하고, 해당 경로의 css를 link하였습니다. <code>, <pre>에 적용하기 위해 style을 추가하였습니다.

<link rel="stylesheet" type="text/css" href="/custom/font/d2coding.css">
<style type="text/css">
code, pre {
    border-radius: 5px;
    font-family: D2Coding, monosapce;
    line-height: 1.5;
    font-size: 14px;
}
</style>

코드하이라이트 테스트

D2Coding 고정폭

// 한글한글
// 12345678
// ABCDEFGH
// abcdefgh
// I
// i
// 1
// l

Java

package kr.kimstar;

public class HelloWorld {
    public static void main(String args[]) {
        System.out.println("Hello World");
    }
}

c#

using System;

class Helloworld
{
    static void Main(string[] args)
    {
        Console.WriteLine("Hello, world");
   }
}

python

print("Hello, world")

bash

#!/bin/bash
echo "Hello World"

html, javascript

<!DOCTYPE HTML>
<html>

<body>
  <script>
    alert( 'Hello, world!' );
  </script>
</body>
</html>

c

#include <stdio.h>

int main()
{
    printf("Hello, world!\n");

    return 0;
}

Notice

  • 이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용할 수 있습니다. 크리에이티브 커먼즈 라이선스
  • 저작권과 관련된 파일요청 및 작업요청을 받지 않습니다.
  • 댓글에 대한 답변은 늦을 수도 있습니다.
  • 댓글 남기기

    이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다