인라인 코드블럭 적용기

코드블록도 적용했으니 inline codeblock도 한번 적용해 볼까?라는 생각을 했다. velog로 넘어갈까... 코드블록은 쉬웠다. CSS로 하면 된다. 뭔가 코드를 설명하는 블로그를 보면 항상 인라인 코드블록을 사용해서 전달하는 것 같아서 나도 했다.

 

코드블록을 적용해봐서 그런지 자연스럽게 html편집을 열어서 CSS창을 들어갔다. 내가 적용한 인라인 코드블록코드는 아래와 같다.

/* 코드블럭 */

code {
    padding: 0.15rem;
    background-color: #ececec;
    border-radius: 5px;
    color: #555152;
    font-family: Menlo, Courier, monospace;
    font-size: 1rem;
}

점점 더 색도 바꾸고 배경도 바꾸어 가면서 내 스타일대로 만들 예정이다.

 

인라인 코드블록 적용하는 방법

쉽지만 귀찮다. 티스토리 글을 작성할 때 기본모드, 마크다운, HTML모드로 작성이 가능한데, 아래와 같이 HTML모드로 들어가서 원하는 문구의 앞에 <code>그리고 뒤에 </code>를 넣어주면 된다. HTML에선 <, >를 &lt, &gt로 표현하는구나..!

티스토리 글을 작성할 때 <b>기본모드, 마크다운, HTML</b>모드로 작성이 가능한데, 아래와 같이 HTML모드로 들어가서 원하는 문구의 앞에 <code>&lt;code&gt;</code>그리고 뒤에 <code>&lt;/code&gt;</code></span>를 넣어주면 된다.

하지만 하나하나 일일이 바꿔줘야 한다는 문제가 있다. 그래서 글을 작성하면서 밑줄을 그어놓으면 HTML에서 앞뒤로 <u>, </u>가 생기는데 이것을 메모장에 옮겨서 <code>, </code> 로 텍스트 대치를 하여 사용하고 있다.