SyntaxHighlighter 줄번호 숨기기 시작번호 변경하기

2023.09.01

소스 코드 하이라이트인 SyntaxHighlighter에서 줄번호를 안 보이게 하는 방법입니다.

방법은 pre 태그에 직접 설정하는 방법과 스크립트에 추가하는 방법이 있습니다.

pre 태그에 직접 설정하면은 해당 소스 부분만 적용이 되고, 스크립트에 추가하면 블로그 전체에 설정이 반영됩니다.

 

줄 번호 숨기기

줄번호를 표시/비표시로 해주는 옵션은 gutter입니다.

gutter 값을 false로 설정하면 줄번호가 안 보이게 됩니다.

 

pre 태그 설정 방법

<pre class="brush:php ; gutter:false">

…

</pre>

 

해당 pre 태그 부분만 적용되어 줄번호를 숨깁니다.

 

스크립트 설정 방법

블로그 전체에 설정을 적용하고 싶은 경우에는 스크립트에 작성해줘야 합니다.

작성 부분은 SyntaxHighlighter.all(); 앞에 작성해줘야 적용이 됩니다.

<script type="text/javascript">

SyntaxHighlighter.defaults['gutter'] = false;

SyntaxHighlighter.all();

</script>

 

샘플

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>샘플</title>
</head>
<body> 
  <?php print 'Hello Word'; ?>
</body>
</html>

 

시작 줄번호 변경하기

줄번호를 표시하고 있는 경우 기본으로 줄번호는 1부터 시작합니다.

시작 번호를 변경하고 싶은 경우에는 first-line을 사용하여 바꿀 수 있습니다.

 

pre 태그 설정 방법

<pre class="brush:php ; first-line:3">

…

</pre>

 

해당 pre 태그 부분만 시작번호가 변경되어 표시됩니다.

 

스크립트 설정 방법

SyntaxHighlighter.all(); 앞에 작성

<script type="text/javascript">

SyntaxHighlighter.defaults['first-line'] = 3;

SyntaxHighlighter.all();

</script>

  

샘플

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>샘플</title>
</head>
<body>
  <?php print 'Hello Word'; ?>
</body>
</html>

줄번호가 3부터 시작됩니다.

댓글