hELLO tistory 스킨을 수정해 기본모드에서 부분적으로 마크다운 사용하기

티스토리 에디터의 기본모드에서는 인라인 코드 블록을 작성할 수 없습니다. 기본모드에서 인라인 코드 블록을 마크다우 문법으로 사용하기 위해 hELLO 티스토리 스킨을 수정한 과정을 공유해 볼까 합니다.

티스토리 에디터의 문제점

티스토리는 에디터 모드로 기본모드, 마크다운, HTML을 제공합니다.

`기본모드`는 글을 쓰며 글의 구조를 볼 수 있고 글자색, 배경색 변경이 쉽다는 장점이 있지만 헤딩이나 인용구와 같은 요소를 추가할 때 번거롭다는 단점이 있습니다. 무엇보다 키워드를 강조하기 위해 주로 사용하는 인라인 코드 블록을 지원하지 않습니다.

`마크다운`으로 쓰면 되는 거 아니야? 할 수 있지만 마크다운은 글을 쓰며 글의 구조를 파악하기 어렵다는 단점이 있습니다. 또 이미 작성한 글을 수정하게 되면 기본모드로 열리게 됩니다. 글이 쓰여있는 상태에서 기본모드에서 마크다운으로 에디터 모드를 변경하면 손실되는 속성들이 있는데 대표적으로 코드블록에 지정해 주었던 언어가 제거됩니다. 따라서 마크다운 모드에서 코드블록을 찾아 다시 언어를 지정해주어야 합니다.

`HTML`로 작성하는 사람은 흔치 않을 거라 생각됩니다.

저와 같은 귀찮음을 겪는 분들을 위해 기본모드에서 쓴 백틱을 인라인 코드블록으로 변경해서 보여주게 스킨을 수정한 과정을 공유해봅니다. 더 좋은 방법을 알고 계신다면 댓글로 알려주시면 감사하겠습니다.

hELLO 스킨에 기능 추가하기

1. 스킨 클론

저는 정상우님의 hELLO 티스토리 스킨을 사용하고 있습니다. 먼저 스킨을 다운로드합니다.

git clone https://github.com/tistory-projects/tistory-skin-hELLO

2. 환경설정

미리 보기와 쉬운 배포(적용)를 위해 환경설정을 합니다. 환경설정 방법은 이 글에서 확인할 수 있습니다. 저는 블로그 포스트에 백틱을 인라인 코드 블록으로 변경하는 것을 확인해야 하므로 `preivew.mode`값을 `entry`로 설정하고 테스트 글을 비공개로 하나 작성합니다. `entry` 속성으로 하면 가장 최근 글을 가져와 미리 보여줍니다.

3. 본문의 백틱 쌍을 인라인 코드 블록으로 변경

`./views/Main/Post/Permalink/Post/Content.pug`를 읽어보면 제가 쓴 글의 html 데이터를 받아와 각 태그들에 클래스를 입혀 스타일을 적용하고 lazy 로딩을 하는 등 html을 스킨에 맞게 가공하는 부분이 있습니다. 여기에 백틱을 인라인 코드 블록으로 바꿔주는 부분을 삽입하면 됩니다.

highlightCodeBlocks () { ... },

/**
 * by thecloer
 * inline code block
 */
inlineCodeBlocks () {
    this.$article
        .querySelectorAll('.contents_style > *:not(figure):not(pre)')
        .forEach((node) => (node.innerHTML = node.innerHTML.replace(/`(.*?)`/g, '<code>$1</code>')))
},

collectHeading () { ... },

백틱쌍을 `code`태그로 바꿔주는 함수를 콘탠츠 컴포넌트가 초기화될 때 실행되도록 등록해 줍니다.

/**
 * Init 'content' Component
 */
init () {
	this.setAnchorToHeadings()
    this.collectHeading()

    this.setLazyLoadToImages()
    this.setRatioToImages()
    this.setPositionToImages()

    this.highlightCodeBlocks()
    this.inlineCodeBlocks() // 추가
},

여기까지만 해도 되지만 스타일을 추가해 보도록 하겠습니다.

4. 인라인 코드 블록 스타일 추가

같은 파일 아래에 스타일을 정의하는 부분이 있습니다.

p,
ol[data-ke-list-type],
ul[data-ke-list-type],
table[data-ke-align],
blockquote[data-ke-style=style2],
blockquote[data-ke-style=style3] {
	@apply text-h-600 dark:text-h-300;

	b, 
    strong {
    	@apply font-bold;
    }

    a {
    	@apply inline-block text-h-orange dark:text-h-blue;
    }

    code {
    	@apply relative -top-[1px] px-2 py-0.5 whitespace-normal text-sm font-sans text-h-orange bg-h-200 rounded-sm dark:text-h-blue dark:bg-h-700;
    }
}

저는 `code`에 `rounded-sm`을 추가하고 택스트 색을 `text-h-orange dark:text-h-blue`로 변경해 줬습니다. 적용하고 싶은 css를 tailwindcss에서 찾아서 적용하시면 됩니다. 추가로 색을 정의하고 싶으시다면 `tailwind.config.js`에서 추가하실 수 있습니다. 

module.exports = {
  content: ["./app.pug", "./index.pug", "./views/**/*.pug"],
  darkMode: "class",
  theme: {
    ...,
    colors: {
      transparent: "transparent",
      current: "currentColor",
      h: {
        100: "#ffffff",
        ...,
        900: "#000000",
        blue: "#5db0d7",
        orange: "#ff5544",
        cloerRed: "#dc2626", // 추가 색 정의
      },
    },
    ...,
  },
};

위와 같이 `cloerRed`라는 텍스트 색을 추가 정의하고 `text-h-cloerRed`로 사용하실 수 있습니다. 자세한 사용법은  여기에서 확인하실 수 있습니다.

5. 미리 보기, 적용

미리 보기를 통해 스타일을 변경해 보고 적용합니다.

npm run preview
npm run production && npm run deploy