SyntaxHighlighter 소스코드 접기 펼치기 기능 설정하기

2023.09.01

SyntaxHighlighter에 작성한 소스코드는 기본적으로 펼쳐진 상태로 보입니다.

 

소스 코드 접기

collapse 옵션을 사용하여 접혀진 상태로 표시를 할 수 있습니다.

그리고 접혀져 있는 소스 코드를 클릭하면 소스가 펼쳐집니다.

 

pre 태그 설정 방법

해당 pre 태그만 접혀진 상태로 표시됩니다.

<pre class="brush:php ; collapse:true">

…

</pre>

 

스크립트 설정 방법

블로그 내에 모든 소스 부분이 접혀진 상태로 표시됩니다.

SyntaxHighlighter.all();앞에 작성.

<script type="text/javascript">

SyntaxHighlighter.defaults['collapse'] = true;

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>

 

소스가 접혀져 표시된 부분에는 expand source라고 표시됩니다.

expand source를 클릭하면 소스가 펼쳐집니다.

접혀져 있을 때 표시되는 expand source를 변경할 수 있습니다.

 

pre 태그 설정 방법

해당 pre 태그에만 적용하기.

<pre class="brush:php ; collapse:true" title="소스코드 표시">

…

</pre>

 

스크립트 설정 방법

블로그 전체 적용.

<script type="text/javascript">

SyntaxHighlighter.config.strings.expandSource = "소스코드 표시";

SyntaxHighlighter.defaults['collapse'] = true;

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>

 

소스가 접혀져 있는 경우에 소스코드 표시라고 표시되며 클릭하면 소스가 펼쳐집니다.

댓글