-
2022.12.01
[티스토리 블로그] 특정 문자로 인라인 코드 블럭 설정하기 (인라인 코드 블럭으로 만들기)
7
특정 문자로 인라인 코드 블럭 설정하기 (인라인 코드 블럭으로 만들기) 들어가며 마크 다운을 사용할 때, 다음과 같이 작성할 경우, 인라인 코드 블럭이 적용된 요소를 작성할 수 있다. (문자) `(문자)` 이 방법처럼 티스토리 에디터를 사용할 때, 문자를 특정 문자로 둘러 쌓을 경우 인라인 코드 블럭이 적용되도록 하려면 어떻게 해야할까? 물론, 위와 같은 방법으로 [마크다운] 모드로 바꾼 후 인라인 코드 블럭을 적용한 후, 다시 [기본모드]로 작업해도 되겠지만, [마크다운] 모드에 들어갔다가 [기본모드]로 돌아오면 기존에 입혔던 스타일이 깨진다는 문제점이 존재했다. 어떤 블로그에서는 자주 사용하지 않는 취소선의 CSS를 인라인 코드 블럭처럼 바꿔서 사용하라는 글이 있었는데, 취소선을 사용할 수 없게 된다..
-
2022.09.28
[티스토리 블로그] 코드 블럭에 라인 넘버(줄 번호) 넣는 방법
코드 블럭에 라인 넘버(줄 번호) 넣는 방법 들어가며 몇 가지 코드를 추가해줌으로써, 티스토리 블로그의 코드 블럭에 라인 넘버(줄 번호)를 넣을 수 있다. 방법 ① HTML 수정해주기 : highlight.js 불러오기 태그 앞에 아래의 코드를 넣어준다. ② CSS 수정해주기 : 라인 넘버 스타일 적용시켜주기 라인 넘버의 스타일을 적용해주는 코드이다. 다음과 같이 CSS 코드를 넣어준다. .hljs-ln-numbers { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: ..
-
2022.05.30
[티스토리 블로그] 첫 화면 특정 페이지로 설정하기
첫 화면 특정 페이지로 설정하기 들어가며 자바스크립트(JavaScript)를 사용하여 티스토리 블로그의 홈 화면에 접속했을 때, 특정 페이지가 나타나도록 설정 할 수 있다. 방법 티스토리 [스킨 편집] 페이지의 [HTML] 탭에서, 태그 사이에 다음의 코드를 넣어준다.
-
2022.05.29
[티스토리 블로그] 관리자인지 확인하기
관리자인지 확인하기 들어가며 자바스크립트(JavaScript)를 이용하여 블로그에 접속한 사용자가 관리자인지, 아닌지 쉽게 확인하고 관련 작업을 수행시킬 수 있다. 방법 방법 1 : 접속한 사용자가 관리자일 경우 $(documnet).ready(function() { if ($(".tt.add_link[data-alert]").length > 0) { // 작업 수행 } }); 방법 2 : 접속한 사용자가 관리자가 아닐 경우 $(documnet).ready(function() { if ($(".tt.add_link[data-alert]").length == 0) { // 작업 수행 } }); 사용 예 접속한 사용자가 관리자가 아닐 경우, 해당 요소를 없앤다. Top Secret $(documnet).re..
-
2022.05.10
[티스토리 블로그] 티스토리 스킨 가이드
티스토리 스킨 가이드 설명 티스토리 스킨을 수정 또는 제작할 때 참고할만한 사이트이다. 티스토리 블로그에서 사용되는 치환자에 대한 설명이 자세히 소개되어 있다. 바로가기 https://tistory.github.io/document-tistory-skin/ 소개 · GitBook 티스토리 스킨 가이드 티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토 tistory.github.io
-
2021.12.28
[티스토리 블로그] 표 배경 색상 넣기
표 배경 색상 넣기 (티스토리 블로그) 개요 최근에 티스토리 에디터가 신에디터로 변경하고 나서, 표에 원하는 색상을 넣기가 힘들어졌다. 티스토리에서 기본적으로 제공하는 표 템플릿은 다음과 같이 지나치게 한정적이다. 방법 (귀찮지만) HTML 코드를 조금만 수정해줌으로서 표에 원하는 배경색을 넣을 수 있다. 표1 (Before) 표1 : 소스 코드 기존의 소스 코드의 태그 안에 bgcolor="색상명" 속성을 추가해주자. ※ r : Row(행), d : Data(데이터) 표2 (After) 표2 : 소스 코드
-
2021.11.16
[티스토리 블로그] 코드블럭 원하는 언어로 확장하기
코드블럭 원하는 언어로 확장하기 (티스토리 블로그) 티스토리는 기본적으로 다음의 언어들을 코드블럭에 적용시킬 수 있도록 지원한다. 하지만, 티스토리에서 지원하지 않는 다른 언어를 코드블럭에 적용시키고 싶다면? 티스토리 블로그의 코드블럭은 hightlight.js 를 이용하기 때문에 간단하게 HTML 코드만 수정해주면 적용시킬 수 있다. https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md GitHub - highlightjs/highlight.js: JavaScript syntax highlighter with language auto-detection and zero dependencies. JavaScript synt..
-
2021.04.14
[티스토리 블로그] 깃허브 마크다운(GitHub Markdown) 스타일 적용하는 방법
[티스토리 블로그] 깃허브 마크다운(GitHub Mardown) 스타일 적용하는 방법 서론 평소에 깃허브 페이지 에 공부한 내용을 정리하는 습관을 갖고 있었다. 최근에 티스토리 블로그가 대폭 개편되면서 마크다운(Markdown)으로 글을 쓸 수 있게 되었는데, 깃허브 페이지의 스타일과 너무 맞지 않아 이질적인 느낌이 들었다. 또 글을 쓴 대로 잘 표현되지 않았다. 그래서 구글링을 통해 티스토리 블로그에 깃허브 마크다운(GitHub Markdown) 스타일을 적용시키는 방법을 알게되었다. 앞으로 마크다운 형식으로 블로그에 글을 올리려고 한다. 스타일 적용 방법 ① github-markdown.css 소스 코드 복사 : Link ② 티스토리 블로그 설정 -> [스킨 편집] -> [html 편집] [CSS] ..
