블로그 인라인 코드 Notion처럼 만들기

 

2018.06.27 - [[티스토리]/블로그 꾸미기 팁] - highlight.js 사용하기

highlight.js 사용하기

 

개요

이전 글에서 `highlight.js` 세팅하는 법을 알아봤다. 하지만 얘는 코드 블럭만 칠해주고 인라인 코드는 신경을 안 쓴다. 따라서 `<pre>` 태그 없이 `<code></code>`로 감싸져 있는 부분을 따로 칠해줘야 한다. `highlight.js`가 사용하는 class 이름(`hljs`)을 붙여도 되긴 하지만 얘는 폰트 등 스타일 일부를 `<pre>`에 넣기 때문에 깔끔한 하이라이팅을 위해서라면 `<pre>`를 꼭 써야 한다. 그러면 또 `<pre>`가 자동으로 line-break을 시키기 때문에 난장판이 된다.

하여튼, 코드 블럭은 `highlight.js`한테 맡기고 우리는 인라인 코드 스타일을 노션처럼 만들어보자.

---

만들기

챗지피티 최고

그냥 챗지피티한테 시켰더니 뚝딱 만들어준다. 바로 티스토리에 적용해본다.

1트

뭔가 엄청 비슷하지만 2% 아쉽다.

code {
    font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
    background-color: #f0f0f0;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 90%;
    margin: 0px 1px; 
    color: red;
}

`padding`을 `1px`늘리고 마진을 추가, 글씨 색을 빨강으로 만들었다.

2트

뭔가 진짜 노션 같아졌다..!

 

참고로 아래 글 방법을 활용하면 백틱(`)으로 쉽게 인라인 코드를 작성할 수 있다.

티스토리에서 백틱(`)으로 인라인 코드 편하게 입력하기 (반응형 #2 스킨)

티스토리에서 백틱(``)으로 인라인 코드 편하게 입력하기 (반응형 #2 스킨)