코드미러 커스텀 테마 적용하기 ( with tailwind)

• 이 글은 개인 블로그에서 가져온 글 입니다.

라이브러리 커스텀 해보기

React markdown 라이브러리는 비교적 사용하기 어렵지 않았다. 굳이 어려웠던 부분을 꼽자면 마크다운의 문법 확장과 코드 문법 하이라이팅을 적용하는 것에 살짝 애를 먹은정도.

하지만 codemirror 라이브러리는 공식문서부터 아.. 이게 뭐랄까. 말로 표현하기 힘든 버거움을 느꼈다.

모듈 형식으로 작성되고 사용되는 라이브러리에서 공통적으로 느끼는 점이지만, 해당 라이브러리를 사용하는 데에 익숙해 지기 전에는 각 모듈 (또는 code mirror 에서는 extensions) 이 도데체 어떻게 작용하는지 이해하는데에 시간을 써야한다.

시간을 아끼려면 남의 코드를 봐야한다. ㅎㅎ..

문제는 남의코드를 보더라도 내가 원하는 코드가 남의 코드에서 등장하지 않는 경우에 발생한다.
일단 완성된 마크다운 랜더링과 코드 문법 하이라이팅을 보자.

---

이하 마크다운 렌더링 예시

목차	제목
예시	테이블

• 1 (리스트)
• 2

따옴표

function example () {
  return null
}
// syntax 하이라이팅

코드미러의 에디터 부분과, 해당 에디터로 작성된 값을 랜더링하는, 예를들어 preview 두 파트가 필요하다.

editor 파트

내가 실제로 코드를 작성하는 부분인 에디터 파트는 github 의 oneDark 를 베이스로한 codemirror/theme-one-dark 를 사용하였다.theme-one-dark 라이브러리는 코드미러에 적용 가능한 익스텐션을 리턴하는 라이브러리 이다.

// 예시
import { oneDarkTheme } from '@codemirror/theme-one-dark';
import { EditorState } from '@codemirror/state';

EditorState.create({
  doc: doc,
  extensions : [
    oneDarkTheme
  ],
})
// so on

여기서 문제는 내가 포스트를 작성하고 있는 부분의 배경을 velog 처럼 검게 하고 싶은데, 배경이 위 코드 예시처럼 네이비 색상을 띈다는 것이엇다.

이러한 상황에서는 두가지가 궁금해진다.

• 커스텀 벨류를 적용 할 수 있는 구조인가?
• 만약 그렇다면 커스텀 벨류를 적용할 키값은 무엇인가?

codemirror 의 create 함수에 적용되는 extenstions 들은 모두 Extension 타입이다.
그러므로 해당 타입에 대하여 더 파고 들어 시간을 낭비하지 않기로 결정하였다.

곧바로 theme-one-dark 깃허브로 갔다. 해당 라이브러리 가 어떤 구조로 어떤값을 리턴하는지 여기서 알아 볼 생각이었다. 내가 불러오는 oneDarkTheme 은 아래와 같은 아주 간단한 구조로 되어 있는 것을 알았다.

export const oneDarkTheme = EditorView.theme({
  "&": {
    color: "color code",
    backgroundColor: "color code"
  },
  ///so on
})

export const oneDark: Extension = [oneDarkTheme, syntaxHighlighting(oneDarkHighlightStyle)]

코드를 보자 마자 객체를 받아서 커스텀된 컬러를 가지는 익스텐션을 반환하게 만들수 있겠구나 싶었다.
이제 해당 코드를 다음과 같이 변경 하였다.

type ThemeProps = Nullable<{
  backGroundColor?: string;
  cm_activeLine?: string;
}>;

export const oneDarkTheme = ({
  backGroundColor = 'black',
  cm_activeLine = 'white',
}: ThemeProps = {}) => {
  const oneDarkTheme = EditorView.theme(
    {
      '&': {
        backgroundColor: backGroundColor,
      },
      '.cm-activeLine': { backgroundColor: cm_activeLine },
    }
  )
  
  return [oneDarkTheme, syntaxHighlighting(oneDarkHighlightStyle)] as const;
}

이제 oneDarkTheme 은 그 차제로 익스텐션이 아니라, 익스텐션을 리턴하는 함수가 되었다. 사용하는 방법은 아래와 같이 바뀌었다.

//before
EditorState.create({
  doc: doc,
  extensions : [
    oneDarkTheme
  ],
})

//after
EditorSate.create({
  doc:doc,
  extensions: [
    oneDarkTheme({backGroundColor : "red"});
  ]
})

당장은 필요한 키값인 백그라운드와 백그라운드와 어울리는 엑티브 라인에 대한 값만 받기로 하였지만 원하는 값을 언제든 업데이트 할 수 있을것이다.

Preview 파트

테일윈드를 사용하는 블로그는 테일윈드의 플러그인으로 마크다운 문법의 컬러를 커스텀 할 수 있다.

// 'tailwind-highlightjs'
npm install tailwind-highlightjs

// tailwind.config.js
module.export = {
 plugins: [require('tailwind-highlightjs')]
}

해당 플러그인을 설치 하고 나면 테일윈드 클래스 명으로 'prose' 를 사용 할수 있게 된다.

<div className="prose prose-h1:border-b prose-li:text-white">{ markdown }</div>

---

마치며

개인적인 감상으로는 코드미러의 테마 조절의 원래부터 커스텀 가능하게 나왔으면 좋았겠다 싶었다. 그래서 pr 을 올려볼까, 내가 npm 에 배포를 할까 고민중에 있었다.

포스팅을 작성하면서 테마 적용 관련된 부분을 찾아 보니 이게 생각보다 그리 어려운 작업은 또 아닌지라 아직 고민중이지만 조만간 결정이 날 듯 싶다.