개요
현재 티스토리 스킨에 사용 중인 prism.js
의 줄번호를 표시하는 플러그인을 추가하고자 합니다.
본문
스킨 편집
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/plugins/line-numbers/prism-line-numbers.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
</body>
- <body id="tt-body-page">
+ <body id="tt-body-page" class="line-numbers">
사용법
앞서 body
태그에 line-numbers
클래스를 추가하였기 때문에, 기본적으로 code
는 줄번호가 좌측에 추가됩니다. 특별히 줄번호를 추가하고 싶지 않을 경우, pre
태그에 no-line-numbers
클래스를 추가합니다.
<!-- with line numbers -->
<pre><code>...</code></pre>
<!-- disabled for a specific element - without line numbers -->
<pre class="no-line-numbers"><code>...</code></pre>
출처
'티스토리 > 스킨제작' 카테고리의 다른 글
티스토리 - 클립보드로 복사 버튼 추가하기 (0) | 2020.02.21 |
---|---|
티스토리 스킨 제작기 - 카테고리 메뉴 변경 (0) | 2018.08.29 |
티스토리 prismjs 구문강조(syntax highliter) 적용하기 (0) | 2018.06.30 |
티스토리 스킨 제작기 - 기타 (0) | 2018.06.30 |
티스토리 스킨 제작기 - 본문 (0) | 2018.06.29 |