프라치노 공책 스킨에 인라인 코드 적용하기

지금 내가 쓰고 있는 티스토리 블로그 스킨은 프라치노 공책이다.

프라치노 공책에 인라인 코드가 존재하는지는 모르겠지만,

내가 찾아봤는데 자료가 없어서 직접 해야겠다는 생각을 하게 되었다.

 

적용 방법

1. 블로그 설정의 스킨 편집에 들어간 다음 html 편집을 누른다.
2. </body> 태그 바로 위에 다음의 코드를 붙여넣기 한다.

<!-- 인라인 코드 처리 스크립트 -->
<script>
  function convertInlineCodeBlocks(content) {
    const inlineCodePattern = /~(.*?)~/g;
    return content.replace(inlineCodePattern, (match, code) => {
      return `<code class="custom-inline-code">${code}</code>`;
    });
  }

  // 본문을 포함하는 div를 선택
  const contentDiv = document.querySelector('.text-stripe.useless-margin-inner');
  console.log(contentDiv);
  if (contentDiv) {
    // div의 내부 HTML을 가져와서 ~로 감싸진 부분을 <code>로 변경
    const originalContent = contentDiv.innerHTML;
    const convertedContent = convertInlineCodeBlocks(originalContent);

    // 변환된 내용을 다시 div 내부에 삽입
    contentDiv.innerHTML = convertedContent;
  }
</script>

   3. 우측 상단의 CSS 버튼을 누른뒤 다음의 코드를 붙여 넣는다. 원하는 대로 스타일을 변경해도 상관 X.

.custom-inline-code {
  background-color: #eeeeee;
  border: 1px solid #e1e1e1; /* 연한 테두리 */
  border-radius: 5px; /* 둥근 모서리 */
  padding: 0.2em 0.4em; /* 텍스트 주변 여백 */
  font-size: 90%; /* 폰트 크기를 약간 줄임 */
  color: #333333; /* 텍스트 색상 */
  white-space: nowrap; /* 한 줄에 고정 */
}

4. 그러면 물결표로 감싼 부분은 ~이렇게~ 나온다. 

 

끗