# https://www.tiny.cloud/docs/plugins/codesample/#codesample_languages
0. prism.css, prism.js download
--------------------------------------------------------------
# https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+apacheconf+aspnet+bash+c+csharp+cpp+css-extras+django+git+java+json+markup-templating+nginx+plsql+powershell+properties+python+regex+sql&plugins=line-highlight+line-numbers+autolinker+inline-color+command-line+toolbar+copy-to-clipboard
prism.css
prism.js
1. post 상세페이지에 삽입
--------------------------------------------------------------
<link rel="stylesheet" type="text/css" href="{% static "style/prism.css" %}"/>
<script type="text/javascript" src="{% static "javascript/prism.js" %}"></script>
TinyMCE의 Code Sample 추가/수정시 자동으로 line-numbers 클래스 추가 되도록 ../codesample/plugin.min.js수정
}, P = v, S = function(n, t, r) {
n.undoManager.transact(function() {
var e = v(n);
return r = m.DOM.encode(r),
e.fold(function() {
n.insertContent('<pre id="__new" class="language-' + t + ' line-numbers">' + r + "</pre>"), ← line-numbers 추가
n.selection.select(n.$("#__new").removeAttr("id")[0])
}, function(e) {
n.dom.setAttrib(e, "class", "language-" + t),
n.dom.addClass(e, "line-numbers"), ← line-numbers 추가
e.innerHTML = r,
F(n).highlightElement(e),
n.selection.select(e)
})
})
2. codesample 작성시 내용이 화면폭보다 길때 block영역을 밀고 나갈때 아래처럼 수정
prism.css
--------------------------------------------------------------
pre[class*="language-"] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
/* white-space: pre; */
white-space:pre-wrap;
word-spacing: normal;
/* word-break: normal; */
word-break: break-word;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
3. language 추가
--------------------------------------------------------------
Code Sample에서 SQL, Bash, Powershell 추가
아래 파일에서 특정 language를 키워드로 관련소스 찾은 다음 아래처럼 넣어 주면 된다.
,{text:"SQL",value:"sql"},{text:"Bash",value:"bash"},{text:"Powershell",value:"powershell"}
tinymce\plugins\codesample\plugin.min.js
tinymce\plugins\codesample\plugin.js ← 이 파일은 위 구문 넣어도 영향없더라.
4. tinyMCE에 기본 font-size 목록추가
init.js
--------------------------------------------------------------
tinymce.init({
selector: "textarea",
//language: "ko_KR",
min_height: 700,
fontsize_formats: "8px 10px 12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px", ← 추가 (6.6.0버전에서는 font_size_formats)
...