본문에 prism js code block 표현 방법에 대해 문의드립니다. 채택완료
우성짱
5년 전
조회 3,880
현재 이 게시판에 적용된 것처럼 저도 적용하고 싶습니다.
소스를 보니
</p>
<p><link rel="stylesheet" href="//sir.kr/js/prism/prism.css?v3">
<script src="//sir.kr/js/prism/prism.js?v3"></script></p>
<p>
이렇게만 되어 있더라구요.
실제 코드 블럭 안에는
</p>
<p><!-- t a g "p" r e m o v e d --><div>
<pre><code class='language-php'>
nano /etc/caddy/Caddyfile
</code></pre></div></p>
<p>
위와 같이 표현이 되더라구요.
css와 js파일 불러오기는 그냥 게시판 view.skin.php 파일에 넣으면 될 것 같은데요.
js파일을 실행하는 함수?를 불러와야 되지 않나 그런 생각을 해봅니다.
그냥 불러오기만 하면 될까요?
참고로 highlight.js는
</p>
<p><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></p>
<p>
이렇게 하면 불러와지는 것 같습니다!
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
5년 전
* 그누보드 5.4.2.7 기준
head.sub.php에 prism.js, prism.css 추가하고,
간단하게 게시판 스킨 view.skin.php 파일에서 본문 출력 부분에 문자열 치환만 추가.
잘 나오네요.
</p>
<p> <div id="bo_v_con"><?php echo get_view_thumbnail($view['content']); ?></div></p>
<p>// ↓ /skin/board/basic/view.skin.php - 104라인</p>
<p> <div id="bo_v_con"><?php echo preg_replace(['#\[code\][\r\n]+
#', '#
\[/code\]#'], ['<pre><code class="language-php">', '</code></pre>'], get_view_thumbnail($view['content'])); ?></div></p>
<p> </p>
<p>// PHP v5.4 미만이면 아래처럼</p>
<p> <div id="bo_v_con"><?php echo preg_replace(array('#\[code\][\r\n]+
#', '#
\[/code\]#'), array('<pre><code class="language-php">', '</code></pre>'), get_view_thumbnail($view['content'])); ?></div></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
�
우성짱
5년 전
�
우성짱
5년 전
나리야에서도 치환해주는 부분을 알려주신대로 바꿔주니 잘 작동하네요!
감사합니다!
PHP만 되고, CSS나 다른 언어들을 넣는 것은 조금 힘들거라 봐야겠네요.
혹시 [code=css]내용[/code] 이런 식으로 언어를 지정할 수도 있을까요?
감사합니다!
PHP만 되고, CSS나 다른 언어들을 넣는 것은 조금 힘들거라 봐야겠네요.
혹시 [code=css]내용[/code] 이런 식으로 언어를 지정할 수도 있을까요?
�
우성짱
5년 전
헉 아미나와 나리야에 이미 언어를 지정해서 치환하는 코드를 넣어뒀네요..
후하... 대단하네요...
후하... 대단하네요...
댓글을 작성하려면 로그인이 필요합니다.
5년 전
</p>
<p>.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</p>
<p>
CSS도 css로 인식할까요?
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
�
우성짱
5년 전
인식 안하고 그냥 php만 표시가 되는군요!
B
BiHon
5년 전
코드 강조에 ［ｃｏｄｅ］, ［／ｃｏｄｅ］가 약속된 키워드잖아요?
지정한 키워드를 치환하는 것이니 ［ｃｏｄｅ－ｃｓｓ］처럼 추가하고
그것을 치환하는 것도 한 방법입니다.
[code]
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']));
// 아래처럼 사용
［ｃｏｄｅ－ｐｈｐ］코드［／ｃｏｄｅ］
［ｃｏｄｅ－ｃｓｓ］코드［／ｃｏｄｅ］
［ｃｏｄｅ－ｈｔｍｌ］코드［／ｃｏｄｅ］
[/code]
지정한 키워드를 치환하는 것이니 ［ｃｏｄｅ－ｃｓｓ］처럼 추가하고
그것을 치환하는 것도 한 방법입니다.
[code]
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']));
// 아래처럼 사용
［ｃｏｄｅ－ｐｈｐ］코드［／ｃｏｄｅ］
［ｃｏｄｅ－ｃｓｓ］코드［／ｃｏｄｅ］
［ｃｏｄｅ－ｈｔｍｌ］코드［／ｃｏｄｅ］
[/code]
�
우성짱
5년 전
감사합니다.
찾아보니 한별아빠님께서 이미 만들어두셨네요 ㄷㄷㄷ
@BiHon
[code]
//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;
}
[/code]
여기에 prismjs 규칙에 맞게 조금만 만져주면 되네요.
감사합니다.
찾아보니 한별아빠님께서 이미 만들어두셨네요 ㄷㄷㄷ
@BiHon
[code]
//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;
}
[/code]
여기에 prismjs 규칙에 맞게 조금만 만져주면 되네요.
감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
아미나 나리야와 연계하려고 하니 힘드네요. ㅎㅎ
감사합니다.
prism은 따로 자바스크립트 파일을 실행해줄 필요가 없네요!