티스토리 인라인 코드블럭 설정

 

취소선(단축키: Ctrl+Alt+J)으로 인라인 코드블럭 적용하는 방법

 

티스토리나 Github 블로그 등을 보다보면

이렇게 강조할 수 있도록

그냥 텍스트가 아닌 박스가 쳐진 블럭을 쉽게 볼 수 있다

 

이를 인라인 코드블럭 (inline code block)이라고 하는데

사용 방법을 알아보자!

 

---

 

간단하게 한두번 사용하기에는 첫번째 방법이 괜찮을 수도 있으나

앞으로 계속해서 사용하려면 두번째 방법을 적용하는 것을 추천!

 

HTML

티스토리 글쓰기로 들어가면 기본적으로 기본모드가 되어있는데, 이를 HTML로 선택해보자

인라인 코드블럭을 적용하려는 텍스트의 앞뒤를 <code>와 </code> 감싸주자

<code>인라인 코드블럭</code>

 

취소선 이용

강조하고자 하는 부분을 좀 더 명확하게 표현하고자 할 때가 많아서

좀 더 빠르고 편하게 인라인 코드블럭을 사용하고자

티스토리 에디터의 단축키를 활용해보자!

 

굵게나 밑줄이나 기울이기는 사용하는 경우가 있지만

취소선은 잘 사용하지 않기 때문에 이를 활용해보자

 

블로그관리 → 꾸미기 → 스킨 편집 → html 편집 → CSS로 들어가서

빈 곳에 아래의 코드를 추가해주면 끝이다!

.content s, .content strike {
  text-decoration: none;
  line-height: normal;
  background: rgba(135, 131, 120, .15);
  color: #CCB037;
  border-radius: 3px;
  font-size: 95%;
  padding: 0.2em 0.4em;
  overflow-wrap: anywhere;
}

다만, 여기서 content라는 선택자는 각자의 상황에 맞게 변경해줘야 한다

 

그걸 어떻게 찾냐?

자신의 블로그 글의 본문 빈칸에서 마우스 오른쪽 버튼 클릭 → 검사

 

화면 오른쪽에 코드들이 뜰텐데

마우스 커서를 움직여보면 해당 코드가 맡고 있는 영역을 보여준다

아래와 같이 글의 본문 영역을 맡고 있는 코드 라인을 찾아보자

 

나의 경우에는 본문을 가리키는 article 태그의 class가 content이므로

아래와 같은 코드를 사용한 것이다

.content s, .content strike {
  text-decoration: none;
  line-height: normal;
  background: rgba(135, 131, 120, .15);
  color: #CCB037;
  border-radius: 3px;
  font-size: 95%;
  padding: 0.2em 0.4em;
  overflow-wrap: anywhere;
}

즉, 본문이 작성되는 div 블록의 클래스 또는 article 태그의 클래스로 변경해주면 되는 것

해당 부분에서 등장하는 취소선(s, strike)을 설정한 형식으로 출력하겠다는 코드이다

참고: https://dasima.xyz/css-sharp-and-dot/

이렇게 코드를 추가한 후 적용

 

그리고 글을 작성할 때 취소선(단축키 Ctrl+Alt+J)을 사용하면

단축키로 쉽게 인라인 코드블럭 적용이 가능하다

 

---

 

참고

https://juahnpop.tistory.com/282

티스토리 에디터 창에서 하일라이트 강조 문구, 인라인 코드 쉽게 넣기

https://seons-dev.tistory.com/entry/%EC%9D%B8%EB%9D%BC%EC%9D%B8-%EC%BD%94%EB%93%9C%EB%B8%94%EB%9F%AD-%EC%A0%81%EC%9A%A9-%EB%B0%A9%EB%B2%95

(티스토리) 포스팅에 인라인 코드블럭(inline code block) 적용 방법 및 팁!