SyntaxHighlighter | SyntaxHighlighter 기본 | 소스 코드 작성 (pre 요소와 script 요소)
SyntaxHighlighter를 사용하여 쉽게 표시되는 소스 코드를 Web 페이지와 블로그 게시물에서 어떻게 작성하는지에 대해 설명한다. pre 요소와 script 요소를 사용한다.
pre 요소 사용
먼저 pre 요소를 사용 방법에 대해서 설명하겠다. 작성 형식은 다음과 같다.
<pre class="brush:언어명">
...
소스 코드 작성
...
</pre>
pre 요소의 클래스 이름에 “brush:언어명"을 작성한다. 언어명에는 앞 페이지에 언어 테이블에서 “Brush aliases"를 작성하면 된다. “Brush aliases"에 여러개가 있는 경우에는 그 중 하나를 작성한다. 예를 들어, JavaScript의 경우는 다음과 같이 작성한다.
<pre class="brush:js">
...
소스 코드 작성
...
</pre>
다른 언어도 몇 가지 예를 들면 아래와 같다.
Ruby : <pre class="brush:ruby"></pre>
PHP : <pre class="brush:php"></pre>
Java : <pre class="brush:java"></pre>
HTML : <pre class="brush:html"></pre>
그 밖에도 가능한 옵션도 있는데, 다른 페이지에서 설명하겠다.
주의 사항
pre 요소를 사용하는 경우 pre 요소에서 설명되는 “<“는 전부 “<“로 변환하여 작성해야 한다. “>“는 “>“으로, “&“는 “&“으로 변환할 필요는 없다.
실습
그럼 실제로 실습을 해보도록 하겠다. 다음과 같이 HTML 페이지에서 Java 소스 코드를 작성한다. 테마는 “Default"를 사용한다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
</head>
<body>
<h1>SyntaxHighlighter</h1>
<pre class="brush:java">
/**
* The HelloWorldApp class implements an application that
* simply prints "Hello World!" to standard output.
*/
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</pre>
</body>
</html>
코드를 실행해 보면 Java 소스 코드가 SyntaxHighlighter 의해 표시되는 것을 확인할 수 있다.
script 요소 사용
다음은 script 요소를 사용 방법에 대해서 설명하겠다. 작성 형식은 다음과 같다.
<script type="syntaxhighlighter" class="brush:언어명">
<![CDATA[
...
소스 코드 작성
...
]]>
</script>
script요소의 type 속성에 “syntaxhighlighter"라고 지정한다. 그리고 pre 요소와 동일하게 script 요소의 클래스에 “brush:언어명"을 작성한다. 언어명에는 앞 페이지에 언어 테이블에서 “Brush aliases"를 작성하면 된다. 예를 들어, JavaScript의 경우는 다음과 같이 작성한다.
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
...
소스 코드 작성
...
]]>
</script>
pre 요소와 동일하게 지정 가능한 옵션이 있는데, 다른 페이지에서 설명하겠다.
주의 사항
script 요소를 사용하는 경우에는 pre 요소처럼 “<“를 “<“로 변환 할 필요가 없다. 다만, “]]>“를 작성하는 경우 “]]>‘‘으로, “</script>“를 작성하는 경우 “</script>“로 변환하여 작성해야 한다.
그리고 블로그 서비스를 이용하는 경우에는 script 요소는 작성하여도 무시되거나 오류가 발생할 수 있다. 그런 경우에는 pre 요소를 사용한다.
실습
그럼 실제로 실습을 해보도록 하겠다. 다음과 같이 HTML 페이지에서 Java 소스 코드를 작성한다. 테마는 “Default"를 사용한다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
</head>
<body>
<h1>SyntaxHighlighter</h1>
<script type="syntaxhighlighter" class="brush:java">
<![CDATA[
/**
* The HelloWorldApp class implements an application that
* simply prints "Hello World!" to standard output.
*/
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
]]>
</script>
</body>
</html>
코드를 실행해 보면 Java 소스 코드가 SyntaxHighlighter 의해 표시되는 것을 확인할 수 있다.