#특수문자
https://dev.w3.org/html5/html-author/charref
< > : < >
{ } : { }
공백 :
# highlight.js
https://highlightjs.org/usage/
https://highlightjs.org/static/demo/
//기본 호출
hljs.initHighlightingOnLoad();
//ajax등 비동기로 코드페이지 호출시 아래 적용
$("pre > code").each(function(i, block) {
hljs.highlightBlock(block);
});# SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/
https://github.com/syntaxhighlighter/syntaxhighlighter/releases 버전별 다운로드
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 코드 지원 여부
티스토리 오류 : https://nomo.asia/388
// SyntaxHighlighter 3.0.83
<link rel="stylesheet" href="./highlighter/shCore.css" />
<script type="text/javascript" src="./highlighter/XRegExp.js"></script>
<script type="text/javascript" src="./highlighter/shCore.js"></script>
<script type="text/javascript" src="./highlighter/shBrushJScript.js"></script>
<script type="text/javascript" src="./highlighter/shBrushXml.js"></script>
<script type="text/javascript" src="./highlighter/shBrushCss.js"></script>
<link type="text/css" rel="stylesheet" href="./highlighter/shCore.css"/>
<link type="text/css" rel="Stylesheet" href="./highlighter/shThemeDefault.css" />
<script type="text/javascript">SyntaxHighlighter.all();</script>http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
<pre class="brush:html"> <!-- HTML 소스표시 -->
<pre class="brush:css"> <!-- CSS 소스표시 -->
<pre class="brush:js"> <!-- JavaScript 소스표시 -->
<pre class="brush:html highlight:[2,4]"> <!-- 특정 행 강조 -->
<pre class="brush:js html-script:true"> <!-- 다른 언어와 HTML -->
<pre class="brush:html first-line:25"> <!-- 시작 행 번호 변경 -->
<pre class="brush:html toolbar:false"> <!-- 도구모음 숨기기 -->
<pre class="brush:html auto-links:false"> <!-- 오토 링크 해제 -->
<pre class="brush:html" title="Blomari Note"> <!-- 제목 표시 -->
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();SyntaxHighlighter v4..
$ git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
$ cd syntaxhighlighter
$ npm install
--brushes=all
--brushes=css
--brushes=css,javascript
--brushes=./my-brush.js
--brushes=/full/path/to/my-brush.js
--brushes=/full/path/to/my-brush.js,css,javascript
--theme=default
--theme=./my-theme.scss
--theme=/full/path/to/my-theme.scss------------------------------------------------------------------------------------------------
# jsfiddle
https://jsfiddle.net
# codepen
https://codepen.io/
https://codepen.io/brandonhimpfen/full/qOeQEp //결과만 보기
# jsbin
http://jsbin.com/
------------------------------------------------------------------------------------------------
# highlightjs
https://highlightjs.org/
https://highlightjs.readthedocs.io/en/latest/index.html
- <>를 이스케이프 처리( < > )
- pre와 code 태그만 작성, 위지윅 모드에서 소스코드 붙여넣기 방법
------------------------------------------------------------------------------------------------
#Codemirror (http://61.107.76.13/Li/ 사용)
https://codemirror.net/
------------------------------------------------------------------------------------------------
# Crayon Syntax Highlighter
https://ko.wordpress.org/plugins/crayon-syntax-highlighter/
https://www.cmsfactory.net/node/11199
------------------------------------------------------------------------------------------------
# prismjs
<pre class="line-numbers"><code class="language-markup">
//HTML
</code>
</pre>
<pre class="line-numbers">
<code class="language-css hljs">
//<span class="hljs-selector-tag">CSS</span>
</code>
</pre>
<pre class="line-numbers">
<code class="language-javascript hljs">
<span class="hljs-comment">//JS</span>
</code>
</pre>http://prismjs.com/
- <>를 이스케이프 처리( < > )
- pre와 code 태그만 작성
------------------------------------------------------------------------------------------------
# 기타
