SyntaxHighlighter 특정 줄에만 색상 변경 하이라이트 설정하기

2023.09.01

특정 줄에만 하이라이트를 설정하여 색상을 변경해 강조하고 싶은 경우 highlight 옵션을 사용하여 설정할 수 있습니다.

 

색상 변경

한 줄만 설정할 수도 있도 여러 줄을 설정할 수도 있습니다.

또한 pre 태그에 직접 설정하여 해당 소스만 설정할 수도 있으며, 스크립트에 설정하여 블로그 전체에도 설정할 수 있습니다.

 

pre 태그 설정 방법

한 줄만 하이라이트를 넣고 싶은 경우.

<pre class="brush:php ; highlight:3">

…

</pre>

 

3번째 줄에만 하이라이트가 설정됩니다.

여러 줄에 하이라이트를 넣고 싶은 경우.

<pre class="brush:php ; highlight:[1,3,7]">

…

</pre>

 

1,3,7번째 줄에 하이라이트가 설정됩니다.

 

스크립트 설정 방법

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

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

<script type="text/javascript">

SyntaxHighlighter.defaults['highlight'] = 3;

SyntaxHighlighter.all();

</script>

 

SyntaxHighlighter 적용한 모드 부분의 3번째 줄에만 하이라이트가 적용됩니다.

<script type="text/javascript">

SyntaxHighlighter.defaults['highlight'] = [1,3,7];

SyntaxHighlighter.all();

</script>

 

SyntaxHighlighter 적용한 모드 부분의 1,3,7번째 줄에 하이라이트가 적용됩니다.

 

샘플

<!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>

댓글