본문에 prism js code block 표현 방법에 대해 문의드립니다.

본문에 prism js code block 표현 방법에 대해 문의드립니다.

QA

본문에 prism js code block 표현 방법에 대해 문의드립니다.

답변 2

본문

현재 이 게시판에 적용된 것처럼 저도 적용하고 싶습니다.

 

소스를 보니 

 


<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로 인식할까요?

코드 강조에 [code], [/code]가 약속된 키워드잖아요?
지정한 키워드를 치환하는 것이니 [code-css]처럼 추가하고
그것을 치환하는 것도 한 방법입니다.


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']));


// 또는 [code-문자] > language-문자 로 치환
echo preg_replace(['#\[code-(.+?)\][\r\n]+<br/>#', '#<br/>\[/code\]#'], ['<pre><code class="language-$1">', '</code></pre>'], get_view_thumbnail($view['content']));

// 아래처럼 사용
[code-php]코드[/code]
[code-css]코드[/code]
[code-html]코드[/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("&nbsp;", " ", $str);
$str = str_replace("/</", "&lt;", $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 규칙에 맞게 조금만 만져주면 되네요.

감사합니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 12
© SIRSOFT
현재 페이지 제일 처음으로