[Blog] Custom: VSCode-like Code Block Style

Abstract

Chirpy 테마에서 가장 맘에 들지 않았던 부분은 바로 코드 블럭(```)이다. 코드 highlighting도 맘에 안들고, 디자인도 맘에 들지 않아 css 조정을 통해 cpp style의 custom을 시도한 바 있으나, VSCode 만큼의 code highlighting을 기대하긴 힘들었다 (VScode는 syntax 뿐만 아니라 semantic도 감지하여 처리하기 때문에).

그러나 최근 Code-Runner에 사용한 monaco editor에서, shiki를 이용해 VSCode와 거의 유사한 수준의 highlighting을 구현할 수 있음을 알게 되어 이를 코드 블럭에도 적용하였다.

VSCode-like Code Block

일반 코드 블럭을 작성하듯 ```으로 감싸면, 다음과 같이 렌더링된다. copy 버튼 클릭 시 동작도 유효하다.

#include <cstdio>
int main() {
    printf("Hello, World!\n");
    return 0;
}

a = 10
print("Hello, World!")

static void main(String[] args) {
    System.out.println("Hello, World!");
}

다만 한번 rouge로 렌더링된 코드 블록을 재 렌더링하는 것이기에 바로 적용되지 않고 약간의 delay가 있을 수 있다.

Implementation

JavaScript

GitHub assets/js/vscode-codeblocks.js 참조

_include/head.html에 다음을 추가한다.

  <script src="{{ '/assets/js/dist/theme.min.js' | relative_url }}"></script>
  
  <!-- Code Runner -->
  <script src="{{ '/assets/js/code_runner.js' | relative_url }}"></script>
  
  <!-- Code Blocks 추가 --> 
  <script src="{{ '/assets/js/vscode-codeblocks.js' | relative_url }}" defer></script>

  {% include js-selector.html lang=lang %}

CSS

GitHub _sass/_vscode-codeblocks.scss 참조

_sass/main.scss에 다음을 추가한다.

@forward 'base';
@forward 'components';
@forward 'layout';
@forward 'pages';
@forward "code-runner";
@forward "vscode-codeblocks"; // 추가

References

1. Monaco Editor를 활용해서 React 기반 프로젝트에 코드 에디터 적용하기!
2. Monaco Editor
3. Shiki