목표 ```python print("python") 마크다운 문법으로 코드 블록을 사용한 예시입니다. 티스토리를 기준으로 마크다운 코드 블록은 다음과 같이 변환됩니다. ```html print("python") 구문 강조 도구인 highlight.js를 사용하면 구문 강조를 위한 태그와 도구가 다녀갔다는 흔적인 클래스를 남기게 됩니다. print("python") 오늘은 변환한 코드블럭이 어떤 언어를 사용하는지 보여주는 박스를 추가했습니다. 사용한 트릭 & 팁 티스토리 외부 자바스크립트에서 스킨 URL을 다루는 방법 images에 추가하는 스킨 파일은 skin.html에서는 상대경로 표기로 접근할 수 있지만 외부에서 불러오는 스크립트 파일은 변환 대상이 아니기 때문에 곤란합니다. 그래서 한 가지 트릭을 ..
오늘의 스킨제작: highlight.js, 구문강조 박스 꾸미기
콘솔에서 가지고 놀기 highlight.js highlight.js는 웹 문서에 있는 코드 블록의 프로그래밍 언어에 맞춰 문법 강조를 할 수 있도록 해주는 자바스크립트와 스타일시트입니다. 웹페이지에 불러오면 hljs라는 이름의 오브젝트를 사용하여 기능을 사용할 수 있습니다. 지원하는 기본 언어 별다른 옵션 없이 지원하는 언어는 hljs.listLanguages()를 통해 알 수 있습니다. 크롬 웹브라우저를 사용하는 경우에는 개발자도구( F12 )의 Console 탭을 이용하여 사용할 수 있습니다. highlight.js의 9.16.2 기준으로 다음 내용을 출력합니다. (34) ["apache", "bash", "coffeescript", "cpp", "cs", "css", "diff", "go", "ht..
오늘의 스킨제작: highlight.js 가지고 놀기
highlight.js는 다양한 언어, 다양한 테마를 제공하는 자바스크립트 기반 문법 강조 도구입니다. 오늘은 스킨에 highlight.js을 적용하는 방법과 제게 필요한 몇 가지 응용을 해볼 생각입니다. highlight.js 불러오기 스타일시트나 라이브러리를 제공하는 CDN CDN(콘텐츠 전송 네트워크; Content Delivery Network)는 많은 사람들이 사용하는 콘텐츠를 미리 여러 지역의 네트워크에 저장해놨다가 접속자가 요청하면 콘텐츠를 가장 빠르게 보내줄 수 있는 곳과 자동으로 연결하는 서비스입니다. 스킨의 파일크기 20MB 제한도 있으니 유명한 스타일시트나 자바스크립트 라이브러리 등은 CDN을 이용하는 것을 추천합니다. CDN을 통해 highlight.js 적용하기 우선 데모페이지를 ..
오늘의 스킨제작: highlight.js, 소스코드 하이라이팅
블로그 스킨을 손본다고 한참 업로드를 하지 못했습니다. 앞으로 몇 개의 글은 이번 스킨에서 추가한 기능들을 다룹니다. 티스토리에서 소스코드 입력 티스토리의 마크다운 에디터를 사용하면 손쉽게 소스코드 블록을 만들 수 있습니다. 마크다운 에디터에서는 주로 아래와 같은 방식으로 작성합니다. ```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는 마크다운으로 작성한 코드 블럭의 언어에 맞는 방식으로 내용물을 해석하여 색상을 ..
블로그에 소스코드 하이라이팅 기능 넣기
End of content
No more pages to load