728x90
728x170
특정 문자로 인라인 코드 블럭 설정하기 (인라인 코드 블럭으로 만들기)
들어가며
- 마크 다운을 사용할 때, 다음과 같이 작성할 경우, 인라인 코드 블럭이 적용된 요소를 작성할 수 있다.
(문자)
`(문자)`- 이 방법처럼 티스토리 에디터를 사용할 때, 문자를 특정 문자로 둘러 쌓을 경우 인라인 코드 블럭이 적용되도록 하려면 어떻게 해야할까?
- 물론, 위와 같은 방법으로 [마크다운] 모드로 바꾼 후 인라인 코드 블럭을 적용한 후, 다시 [기본모드]로 작업해도 되겠지만, [마크다운] 모드에 들어갔다가 [기본모드]로 돌아오면 기존에 입혔던 스타일이 깨진다는 문제점이 존재했다.
- 어떤 블로그에서는 자주 사용하지 않는
취소선의 CSS를 인라인 코드 블럭처럼 바꿔서 사용하라는 글이 있었는데, 취소선을 사용할 수 없게 된다는 단점이 존재했다.
- 오랜 기간 동안 고민하다가 구글링을 통해 오늘 그 방법을 찾게 되었다.
방법
- 제이쿼리(jQuery)와 정규 표현식(RegEx)을 이용한 방법이다.
- 사용 방법을 바로 확인해보자.
See the Pen <code> RegEx Test by starrykss (@starrykss) on CodePen.
티스토리 블로그에 코드 적용하기
- 우선, 블로그에서 제이쿼리(jQuery)를 사용하려면 다음의 코드를 추가해주어야 한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>- 다음과 같이 스킨 편집 창의 </body> 태그 바로 위쪽에 다음의 코드를 추가해준다.
<script>
// <body> 태그 내부에서 _로 둘러 쌓인 문자를 인라인 코드 블럭으로 만들기
$('body').html(function(i, html) {
return html.replace(/_(.*?)\_/g, '<code>$1</code>');
});
</script>- 이제 언더바(_)로 둘러쌓인 문자는 인라인 코드 블럭으로 처리되는 것을 확인할 수 있다.
| This is my @code@. Welcome! |
참고 사이트
Wrap all words between specific characters
I have some text in different elements. What I want is wrap all words between the specific character / in a span element. See example below. <ul> <li>/Lorem Ipsum/ has been the industr...
stackoverflow.com
728x90
그리드형(광고전용)
'Information > Tip' 카테고리의 다른 글
| [티스토리 블로그] 코드 블럭에 라인 넘버(줄 번호) 넣는 방법 (0) | 2022.09.28 |
|---|---|
| [티스토리 블로그] 표 내부 이미지 정렬시키는 방법 (0) | 2022.09.05 |
| [MinGW] 한글 깨짐 현상 문제 해결 방법 (0) | 2022.07.06 |
| [MinGW] MinGW(Minimalist GNU for Windows) 설치 및 환경 변수 설정 방법 (0) | 2022.06.15 |
| [티스토리 블로그] 첫 화면 특정 페이지로 설정하기 (0) | 2022.05.30 |
| [티스토리 블로그] 관리자인지 확인하기 (0) | 2022.05.29 |
| [Excel] 실시간 환율 연동 방법 (달러 기준) (0) | 2022.05.25 |
| [Excel] 페이지 나누기 선 없애기 (0) | 2022.05.17 |
starrykss
별의 공부 블로그 🧑🏻💻
