블로그 스킨을 손본다고 한참 업로드를 하지 못했습니다. 앞으로 몇 개의 글은 이번 스킨에서 추가한 기능들을 다룹니다. 티스토리에서 소스코드 입력 티스토리의 마크다운 에디터를 사용하면 손쉽게 소스코드 블록을 만들 수 있습니다. 마크다운 에디터에서는 주로 아래와 같은 방식으로 작성합니다. ```js var a; function func(arg) { let c = arg + 3; return c; } ```\ 마크다운에서는 이것을 코드 블럭이라고 하며, 변환 결과는 다음과 같습니다. var a; function func(arg) { let c = arg + 3; return c; } highlight.js highlight.js는 마크다운으로 작성한 코드 블럭의 언어에 맞는 방식으로 내용물을 해석하여 색상을 ..
블로그에 소스코드 하이라이팅 기능 넣기
목표 티스토리가 마크다운을 공식적으로 지원함에 따라 티스토리 블로거들은 마크다운을 사용하기 위해 스킨을 만져 showdown.js를 불러오는 등의 고생을 할 필요가 없어졌습니다. 다만 공식적으로 지원하는 기능에 뭔가 부족함을 느낀다면 직접 만들어야죠. 제 경우에는 목차가 필요하다 느꼈습니다. # h1 제목 ## h2 제목 ### h3 제목 이렇게 소제목을 쓰면 포스트 최상단에, * 1 h1 제목 * 1.1 h2 제목 * 1.1.1 h3 제목 이런 방식으로 나오도록 만들어 보고자 했습니다. 내부 링크를 만들 때는 URL에서부터 어디를 가리키는지 명확하게 알 수 있도록 만들었습니다. 스크립트 작동 방식은 주석을 참고하시기 바랍니다. var HSelector = "h1"; // 소제목 선택자 // var HS..
jQuery: 티스토리 마크다운을 지원하는 목차 생성 스크립트
구글 번역사 도구로 JSON을 번역하기 위해 파이썬(Python)에서 제공하는 몇 가지 패키지를 사용했다는 이야기입니다. 특정 문제를 해결하는 이야기지만 일반적인 상황을 해결하기 위한 팁 모음 정도로 작성합니다. 발단: 이거 이대로는 힘들겠는데? 게임 테라리아의 토륨모드는 알려진 몇 가지 대형모드와 마찬가지로 DLC로 만들어 팔아도 될 정도의 방대한 컨텐츠를 자랑합니다. 그러다보니 현지화 지원 도구를 통해서 스크립트를 추려낸 결과물의 양이 상당했습니다. 혼자서 취미로 하는거라지만 번역하겠다고 예고만 해놓고 아무 소식이 없을 수는 없으니 아주 강력한 도구의 힘이 필요했습니다. JSON JSON은 데이터를 주고받을 때 쓰는 양식 중 하나입니다. 다양한 프로그램이 이 양식을 지원하고, 보기도 편한 방식이라 많..
Python: 구글 번역사 도구로 JSON 번역하기
HTML문서에 페이지의 구조와 컨텐츠를 담는 과정을 간략하게 살펴봤습니다. 이제부터는 스타일과 배치를 고려하면서 HTML 문서를 편집합니다. 종속형 스타일시트(Cascading Style Sheets) 짧게 스타일 시트(CSS)라고 부르는 문서는 HTML로 작성한 구조를 보기좋게 꾸미고 배치하기 위한 것입니다. STYLE태그를 이용해서 HTML문서 안에 포함시킬 수도 있지만 CSS파일을 별개로 두어 스타일을 따로 관리하는 것이 유지관리하기 더 편합니다. 기본 사용법 상자 위와 같은 HTML코드가 있으면, 웹브라우저에서는 다음과 같은 모양으로 보이게 됩니다. 상자 아래와 같이 `box`클래스를 가지는 `div`요소에 스타일을 추가합니다. 별개의 문서로 만들거나 `style`태그를 사용할 수 있습니다. 여기..
티스토리 스킨 만들기 (4) - CSS 개요
티스토리에서 블로그로 기능하기 위한 최소한의 구조부터 만들어 봅니다. 홈페이지의 최근 글 목록과 포스트를 보기 위한 구조입니다. 여기서부터 티스토리를 위한 그룹치환자와 값치환자를 사용합니다. 테스트가 필요하다면 티스토리에 스킨테스트를 위한 블로그를 하나 개설해서 블로그관리 > 스킨 편집 > HTML 편집을 활용하시기 바랍니다. 기본 구조 BODY 태그 안의 내용을 변경합니다. 글 목록 개별 포스트 카테코리 리스트(사이드바) s_t3 태그는 티스토리 공통 스크립트를 추가하는 그룹 치환자입니다. BODY태그가 시작하는 직후와 끝나기 직전에 배치합니다. 만든 구조는 컨텐츠 영역과 사이드바 영역으로 구분되어 있으며, 컨텐츠 영역은 홈페이지에서 글 목록 보여주는 영역과 개별 글의 본문을 보여주는 영역으로 나뉩니다..
티스토리 스킨 만들기 (3) - 기본 홈, 포스트, 사이드바
HTML은 크롬, 인터넷 익스플로어, 엣지, 사파리, 파이어폭스 등 웹페이지를 보여주는 웹 브라우저를 위한 마크업 언어입니다. 보여줄 웹페이지가 어떤 구조를 가지고 있으며, 어떤 내용을 보여줄지 설명하는 역할을 합니다. 여기서는 태그와 HTML5 기본적인 구조를 다루며, 꾸미거나 배치하는 방법은 나중에 스타일시트(CSS)를 다룰때 하도록 하겠습니다. 태그 HTML은 태그를 이용해 문서의 구조를 표현합니다. 특별한 몇 가지 경우를 제외하고는 태그는 항상 와 같은 여는 태그와 와 같이 닫는 태그가 쌍을 이룹니다. 미리 약속되어 있는 태그를 활용할 수도 있고, 필요에 따라 새로운 종류의 태그를 직접 만들 수도 있습니다. 기본 구조 구조는 HTML의 5번째 버전인 HTML5를 기준으로 하겠습니다. HTML5문서..
티스토리 스킨 만들기 (2) - HTML 개요
하나의 템플릿 검색결과, 위치로그, 방명록, 글, 카테고리, 글 목록 등 모든 메뉴는 skin.html이라는 하나의 템플릿으로 모두 정의합니다. 보이는 내용에 따라 다른 페이지를 구현할 수는 있겠지만, 모든 정보를 하나의 파일에 넣어야 하기 때문에 불러올 skin.html의 크기가 커져서 페이지를 로딩하는데 걸리는 시간이 아주 길어지게 될겁니다. 아래에 다룰 치환자를 사용해 표시할 내용의 레이아웃을 정할 수 있습니다. 치환자 skin.html에서 공통요소들을 정한 다음 치환자를 이용해 개별 요소를 표시하도록 만들 수 있습니다. {내용} 형태의 그룹치환자와 형태의 값 치환자가 있습니다. 치환자의 종류와 상세한 설명은 아래의 스킨가이드 페이지를 참고하세요. 티스토리 스킨..
티스토리 스킨 만들기 (1) - 티스토리 스킨의 특징
블로그에 마크다운을 쓸 때 자주 사용하는 방법은 에디터의 HTML모드를 활성화한 상태에서 마크다운 양식으로 본문을 쓴 다음, 스킨에 스크립트를 추가하여 마크다운 문서를 HTML 문서로 변환하는 방법을 사용합니다. 추가: 이제 티스토리는 마크다운도 잘 지원합니다 skin.html 수정 마크다운으로 작성한 본문을 HTML로 변환하기 위해 jQuery와 showdown.js를 사용합니다. 실제로 변환에 사용하는 스크립트는 showdown.js이고 jQuery는 스크립트 작성의 편리를 위해 임의로 추가한 것입니다. 이후에 진행할 개조까지 생각하면 jQuery의 기능을 활용할 일이 반드시 생길듯하니 첫 개조부터 jQuery를 활용해 스킨 내부 스크립트를 작성하려 합니다. cdnjs에서 제공하는 jQuery CDN..
showdown.js를 사용하여 티스토리에 마크다운 적용하기
End of content
No more pages to load