이전 글 보기 : 티스토리 스킨 만들기 #2 - 베이스 스킨
지난 티스토리 스킨 만들기 #2에서는 기본틀로 사용 할 스킨을 선택 했다. 이번에는 오리지널 알력2님의 블로그(https://alikong.tistory.com/46)에서 찾은 보물 같은 코드 블록을 블로그에 달아 보도록 하겠다.
오리지널 알력2님 코드 블록의 기능
- 줄 번호 표시 및 시작 번호 지정 기능
- 줄 하이라이트 기능
코드 블록을 생성하고 HTML모드에서 <pre data-marker="3,5-9,12"..> 또는 <pre data-marker="[3,5-9,12]"...> 와 같이 입력하면 특정 라인에 하이라이트를 넣을 수 있다(개인적으로 가장 고맙고 마음에 드는 기능이다) - 자동 줄바꿈 적용시에도 바뀐 줄에 들여 쓰기 유지
- 코드 색상 값을 코드에서 사용하는 경우 색 미리 보여주기
- 괄호 및 태그예 마우스 오버시 짝 표시
- 코드 복사 시 텍스트 변환 및 들여 쓰기 유지
적용
#include <iostream>
#include <string>
class VeryImortantClass
{
std::string name;
};
int main()
{
std::cout << "Hello World" << std::endl;
}테스트를 위해서 간단한 Hello World 코드를 작성했다. 4라인 부터 7라인까지의 하이라이트가 너무 마음에 든다. 앞으로 코드 샘플을 설명해야 할 때 보다 쉽고 직관적으로 설명이 가능 할 것 같다.
코드 블록의 설치 방법은 뭐라 더 추가하거나 뺄것이 없을 정도로 https://alikong.tistory.com/46에 설명이 명료하게 잘 돼있다.
남은 요구 사항
<ol><li> 리스트 사용 시 뎁스가 있을 것- 에디터 페이지에서 링크를 걸고 엔터를 치면 링크 미리 보기가 나오지 않을 것
코드 블럭에 라인을 표시 해줄 것코드 블럭에 하이라이트를 사용 가능 할 것- 자동으로 ToC(Table of Contents)를 만들어 줄 것
- 블로그 내 검색을 하기 위해 스크롤을 이동하지 않았으면 좋겠다..
포스트에 이미지가 없으면 리스트에서 글만 출력 할 것
다음 글 보기 : 티스토리 스킨 만들기 #4 - ToC(Table of Contents) 만들기
