본문에 prism js code block 표현 방법에 대해 문의드립니다.
관련링크
본문
현재 이 게시판에 적용된 것처럼 저도 적용하고 싶습니다.
소스를 보니
<link rel="stylesheet" href="//sir.kr/js/prism/prism.css?v3">
<script src="//sir.kr/js/prism/prism.js?v3"></script>
이렇게만 되어 있더라구요.
실제 코드 블럭 안에는
<!-- t a g "p" r e m o v e d --><div>
<pre><code class='language-php'>
nano /etc/caddy/Caddyfile
</code></pre></div>
위와 같이 표현이 되더라구요.
css와 js파일 불러오기는 그냥 게시판 view.skin.php 파일에 넣으면 될 것 같은데요.
js파일을 실행하는 함수?를 불러와야 되지 않나 그런 생각을 해봅니다.
그냥 불러오기만 하면 될까요?
참고로 highlight.js는
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
이렇게 하면 불러와지는 것 같습니다!
답변 2
* 그누보드 5.4.2.7 기준
head.sub.php에 prism.js, prism.css 추가하고,
간단하게 게시판 스킨 view.skin.php 파일에서 본문 출력 부분에 문자열 치환만 추가.
잘 나오네요.
<div id="bo_v_con"><?php echo get_view_thumbnail($view['content']); ?></div>
// ↓ /skin/board/basic/view.skin.php - 104라인
<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>
// PHP v5.4 미만이면 아래처럼
<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>
저도 해보니 문자열만 치환하면 나오는 것을 확인했습니다.
아미나 나리야와 연계하려고 하니 힘드네요. ㅎㅎ
감사합니다.
prism은 따로 자바스크립트 파일을 실행해줄 필요가 없네요!
나리야에서도 치환해주는 부분을 알려주신대로 바꿔주니 잘 작동하네요!
감사합니다!
PHP만 되고, CSS나 다른 언어들을 넣는 것은 조금 힘들거라 봐야겠네요.
혹시 [code=css]내용[/code] 이런 식으로 언어를 지정할 수도 있을까요?
헉 아미나와 나리야에 이미 언어를 지정해서 치환하는 코드를 넣어뒀네요..
후하... 대단하네요...
.note-editor.note-frame.codeview .note-editing-area .note-editable,
.note-editor.note-airframe.codeview .note-editing-area .note-editable {
display: none;
}
.note-editor.note-frame.codeview .note-editing-area .note-codable,
.note-editor.note-airframe.codeview .note-editing-area .note-codable
CSS도 css로 인식할까요?
인식 안하고 그냥 php만 표시가 되는군요!
코드 강조에 ［ｃｏｄｅ］, ［／ｃｏｄｅ］가 약속된 키워드잖아요?
지정한 키워드를 치환하는 것이니 ［ｃｏｄｅ－ｃｓｓ］처럼 추가하고
그것을 치환하는 것도 한 방법입니다.
echo preg_replace(['#\[code\][\r\n]+<br/>#', '#\[code-css\][\r\n]+<br/>#', '#<br/>\[/code\]#'], ['<pre><code class="language-php">', '<pre><code class="language-css">', '</code></pre>'], get_view_thumbnail($view['content']));
// 또는 ［ｃｏｄｅ－문자］ > language-문자 로 치환
echo preg_replace(['#\[code-(.+?)\][\r\n]+<br/>#', '#<br/>\[/code\]#'], ['<pre><code class="language-$1">', '</code></pre>'], get_view_thumbnail($view['content']));
// 아래처럼 사용
［ｃｏｄｅ－ｐｈｐ］코드［／ｃｏｄｅ］
［ｃｏｄｅ－ｃｓｓ］코드［／ｃｏｄｅ］
［ｃｏｄｅ－ｈｔｍｌ］코드［／ｃｏｄｅ］
감사합니다.
찾아보니 한별아빠님께서 이미 만들어두셨네요 ㄷㄷㄷ
@BiHon
//Syntaxhighlighter
function apms_syntaxhighlighter($m) {
$str = $m[3];
if(!$str) return;
$str = stripslashes($str);
$str = preg_replace("/(<br>|<br \/>|<br\/>|<p>)/i", "\n", $str);
$str = preg_replace("/(<div>|<\/div>|<\/p>)/i", "", $str);
$str = str_replace(" ", " ", $str);
$str = str_replace("/</", "<", $str);
if(!$str) return;
$brush = strtolower(trim($m[2]));
$brush_arr = array('css', 'js', 'jscript', 'javascript', 'php', 'xml', 'xhtml', 'xslt', 'html');
$brush = ($brush && in_array($brush, $brush_arr)) ? $brush : 'html';
apms_script('code');
return '<pre class="brush: '.$brush.';">'.$str.'</pre>'.PHP_EOL;
}
여기에 prismjs 규칙에 맞게 조금만 만져주면 되네요.
감사합니다.