SIR과 같은 코드 하이라이트(Prism) 적용하기 > Web Development

본문 바로가기

사이트 내 전체검색

Web Development

SIR과 같은 코드 하이라이트(Prism) 적용하기

페이지 정보

작성자 러브렛 작성일 22-05-06 12:06 조회 376 댓글 0 by Lovelet

본문

1) 먼저 Prism syntax highlighter 다운로드

Download ▲ Prism (prismjs.com) 

다운로드 위치는 그누보드/js/prism 를 기준으로 설명

압축 해제 후 FTP 등으로 업로드


2) 그누보드 특정 스킨에 적용하기

스킨의 view.skin.php파일에서 stylesheet 적용된 부분 아래에 코드 입력

[code]

<link rel="stylesheet" href="'.G5_JS_URL.'/prism/prism.css">

<script src="'.G5_JS_URL.'/prism/prism.js"></script>

[/code]


아래의 소스를 찾아서

[code]

        <div id="bo_v_con"><?php echo get_view_thumbnail($view['content']); ?></div>

[/code]

아래처럼 수정하거나

[code]

        <div id="bo_v_con"><?php echo preg_replace(['#\[code\][\r\n]+<br/>#', '#<br/>\[/code\]#'], ['<pre><code class="language-php">', '</code></pre>'], get_view_thumbnail($view['content'])); ?></div>

[/code]

PHP v5.4 미만이면 아래처럼 수정

[code]

        <div id="bo_v_con"><?php echo preg_replace(array('#\[code\][\r\n]+<br/>#', '#<br/>\[/code\]#'), array('<pre><code class="language-php">', '</code></pre>'), get_view_thumbnail($view['content'])); ?></div>

[/code]


실제 에디터에서 사용하는 경우에는 아래와 같이 <p>태그를 포함해서 치환해야함.. (이부분은 실제 출력되는 소스를 보고 수정하셔야합니다.)

[code]

        <div id="bo_v_con"><?php echo preg_replace(['#<p>\[code\]</p>#', '#<p>\[/code\]</p>#'], ['<pre><code class="language-php">', '</code></pre>'], get_view_thumbnail($view['content'])); ?></div>

[/code]


사용하는 방법은 코드의 앞 뒤 부분에 [ code ]와 [ /code ]를 직접 타이핑해주시면 됩니다. (물론 공백없이)


본 글은 첨부링크의 게시글들을 정리하였습니다.

0 Comments

등록된 댓글이 없습니다.

Copyright ⓒ 2003-2024 LOVELET.COM. All rights reserved.
PC 버전으로 보기