글 작성 테스트 입니다.

2016. 6. 26. 14:44

반응형

h3 : 제목

h4 : 부제목

h5 : 소제목

티스토리 파비콘 적용(등록)하기

관리페이지 환경설정 - 기본정보 페이지에서 파비콘을 등록할 수 있다.
인용구 (ctrl+Q)

글 목록에서 페이지당 글 개수 설정하기

스킨의 적용

흉내쟁이님이 배포해준 CCZ-CROSS

DEMO
CCZ-CROSS 데모보기
REPO
CCZ-CROSS GitHub
PATCH
CCZ-CROSS 패치노트
  • 저는 구글 블로그에서 넘어왔습니다~ 이 스킨 넘나 좋아요!
  • 클래식한 테마
  • 다양한 기기 및 브라우저를 지원하는 반응형 디자인
  • 옵션 값의 변경으로 일부 기능 ON/OFF 가능
  • 글 작성시 도움이 될만한 서식 스타일 추가
  • body에 class="loading"이 본문의 페이드 효과와 관련 있음

소스코드 사용 예제 1.

<link rel="stylesheet" href="./images/sh.styles.CoreDefault.css">
<script src="./images/sh.scripts.Core.js"></script>
<script src="./images/sh.scripts.BrushCss.js"></script>
<script src="./images/sh.scripts.BrushJScript.js"></script>
<script src="./images/sh.scripts.BrushXml.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>

<div class="code code:xml">
<!-- 소스코드 작성 -->
소스를 더블클릭하면 textarea형식으로 변환되며 텍스트를 복사할 수 있음
</div>
  • <, >는 그냥 써도 되기는 한데.. 어쨋든 태그로 인식하기 때문에 문자참조로(&lt;,&gt;) 치환하여 쓰는 것이 좋음 (에디터에서 자동으로 치환해 줌)
  • 소스코드 영역을 더블클릭하면 텍스트만 복사할 수 있음 (textarea로 변함)
  • 줄 번호가 필요없는 경우 code div에 <div class="code code:xml gutter:false"></div> class명 gutter:false를 작성

소스코드 사용 예제 2.

<link rel="stylesheet" href="prism.css">
<script src="prism.js"></script>

<pre class="language-none line-numbers">
<code>&lt;div&gt;This raw text&lt;/div&gt;
is not highlighted
but it still has
lines numbers</code>
</pre>
  • Line Numbers 사용 시 <pre>에 클래스명 line-numbers를 추가
  • 부등호 <, > 사용시 엔티티코드 사용 (&lt;, &gt;)
  • 자동줄바꿈 사용 시 <pre>에 CSS white-space:pre-wrap을 추가

현재 사용한 prismjs의 사용자 정의

  • Themes : Default
  • Languages :
    - Markup
    - CSS
    - C-like
    - JavaScript
    - ASP.NET(C#)
    - Java
    - Less
    - PHP
    - Sass
    - SQL
반응형

티스토리툴바