2023.05.10 코드스킨 재적용 highlight.js 11.7.0
<!-- 2023.05.10 higlightjs 11.7.0 새로적용 https://highlightjs.org -->
<link rel="stylesheet" type="text/css" href="./images/github-dark.min.css">
<!--<link rel="stylesheet" href="/path/to/styles/default.min.css">-->
<script src="./images/highlight.min.js"></script>
<script src="./images/python.min.js"></script>
<script>hljs.highlightAll();</script>2017.03.23 스킨 재적용+SyntaxHighlighter 재적용
- CCZ-CROSS 흉내쟁이(http://copycatz.tistory.com)
- SyntaxHighlighter 3.0.83 적용
- 참고 블로그: http://sometimes-n.tistory.com/5
2012.02.15 블로그 생성
- UltimateBlogger 0.92.1 스킨 적용
- SyntaxHighlighter 3.0.83 적용
/* ▼ 사용법: Java */
<pre class="brush:java;">
public class HelloJava {
public static void main(String args[]) {
System.out.println("Hello Java!");
}
}
</pre>/*▼ 사용법: CSS*/
<pre class="brush:css; html-script: false">
@charset "utf-8";
/* Common */
.spi_default,.spi_default ul,.spi_default li,.spi_default form,.spi_default fieldset,.spi_default legend,.spi_default input
{margin:0;padding:0;font-family:'돋움',dotum,Helvetica,sans-serif;font-size:12px;line-height:16px;color:#404040}
.spi_default:after{display:block;clear:both;content:''}
.spi_default fieldset{border:0}
.spi_default ul{list-style:none}
.spi_default em{font-style:normal}
.spi_default a{color:#404040;text-decoration:none}
.spi_default a:hover,
.spi_default a:active,
.spi_default a:focus,
.spi_default a:visited{color:#404040} .spi_default legend{display:none}
</pre>- 나눔고딕체 적용
- ▼ Brush List (highlight만 설치)
Brush name Brush aliases File name ---------------------------------------------------------------------- ActionScript3 as3, actionscript3 shBrushAS3.js Bash/shell bash, shell shBrushBash.js ColdFusion cf, coldfusion shBrushColdFusion.js C# c-sharp, csharp shBrushCSharp.js C++ cpp, c shBrushCpp.js CSS css shBrushCss.js Delphi delphi, pas, pascal shBrushDelphi.js Diff diff, patch shBrushDiff.js Erlang erl, erlang shBrushErlang.js Groovy groovy shBrushGroovy.js JavaScript js, jscript, javascript shBrushJScript.js Java java shBrushJava.js JavaFX jfx, javafx shBrushJavaFX.js Perl perl, pl shBrushPerl.js PHP php shBrushPhp.js Plain Text plain, text shBrushPlain.js PowerShell ps, powershell shBrushPowerShell.js Python py, python shBrushPython.js Ruby rails, ror, ruby shBrushRuby.js Scala scala shBrushScala.js SQL sql shBrushSql.js Visual Basic vb, vbnet shBrushVb.js XML xml, xhtml, xslt, html, xhtml shBrushXml.js ▼ SyntaxHighlighter 상세 스타일 옵션 [
]
| 이름 | 초기값 | 설명 |
|---|---|---|
| auto-links | true | URL 자동 링크 |
| class-name | '' | 사용자 정의 css 클래스 사용 |
| collapse | false | 소스 보기 초기 상태 지정 ( 숨김 / 펼치기 ) |
| first-line | 1 | 첫번째 시작하는 라인번호 |
| gutter | true | 라인번호 보기/끄기 |
| highlight | null | 강조하고 싶은 라인 [1,2,3]등으로 배열로 지정 |
| html-script | false | 서버 스크립트 php 나 jsp등에서 html/xml등의 문서를 강조 하고 싶을때 true를 설정하면 반드시 shBrushXml.js를 로드 해줘야 한다. |
| smart-tabs | true | 탭 사용 여부 |
| tab-size | 4 | 탭 사이즈 간격 |
| toolbar | true | 툴바 on/off |
▼ 소스에서 바로 옵션 적용하기
▼ SyntaxHighlighter 크롬 버그 수정
shCore.css 파일의 55라인 .syntaxhighlighter { 부분을 수정해서 올린다.
.syntaxhighlighter { width: 100% !important; margin: 1em 0 1em 0 !important; position: relative !important; font-size: 1em !important; overflow: hidden !important; // auto → hidden 수정 padding-bottom: 1px; // 라인 추가 }▼ 참고사이트
syntaxhighlighter_3.0.83.zip
다운로드
반응형
