TIL

티스토리 인라인 코드블럭 설정하기

kiki242 2023. 3. 30. 00:18

velog에서는 백틱 사이에 넣으면 되었는데 티스토리는 기본모드에서 인라인 코드블럭 사용하기 번거롭다. 그래서 # 사이에 들어가면 인라인 코드블록 설정 되도록 설정했다.

 

html 편집에서 `<head></head>` 태그 사이에 아래 코드 입력해주기

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

`</body>` 위에 _을 `으로 변경해서 입력해주기

다른 문자를 단축키로 쓰고 싶으면  _를 사용하고 싶은 문자로 변경해주면 된다.

<script>
    $('body').html(function(i, html) {
      return html.replace(/_(.*?)\_/g, '<code>$1</code>');
    });
</script>

 

참고) https://starrykss.tistory.com/2116


추가

리스트나 인용 안에서 적용이 되지 않아서 다른 블로그 찾아봐도 방법 모르겠어서 그냥 CSS 파일 뒤져서 찾았다.. ㅜ

.area_view p code { padding:2px 5px; border-radius:3px; background:#efefef; margin:0 2px; border:1px solid #e0e0e0 }
.area_view ul li code { padding:2px 5px; border-radius:3px; background:#efefef; margin:0 2px; border:1px solid #e0e0e0 }
.area_view ol li code { padding:2px 5px; border-radius:3px; background:#efefef; margin:0 2px; border:1px solid #e0e0e0 }
.area_view blockquote code { padding:2px 5px; border-radius:3px; background:#efefef; margin:0 2px; border:1px solid #e0e0e0 }

`.area_view p code`에만 적용되어 있어서 리스트랑 인용도 추가해주니깐 적용된다