Google Blogger에서 코드블록 삽입하기: 완전 가이드

HTML을 이용한 방법

1. Blogger 대시보드에서 새 포스트를 작성하거나 기존 포스트를 편집합니다.

2. 포스트 편집기 상단에서 "HTML 보기"를 클릭합니다.

3. 적절한 위치에 다음과 같은 코드를 삽입합니다.

<pre>
<code>
여기에 코드를 삽입하세요.
</code>
</pre>

CSS를 추가하여 스타일링하기

1. Blogger 대시보드에서 "테마"를 선택한 후 "HTML 편집"을 클릭합니다.

2. </head> 태그 바로 앞에 다음과 같은 CSS 코드를 추가합니다.

pre {
background-color: #f4f4f4;
border: 1px solid #ddd;
border-left: 3px solid #f36d33;
color: #666;
page-break-inside: avoid;
font-family: monospace;
font-size: 15px;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1em 1.5em;
display: block;
word-wrap: break-word;
}

외부 라이브러리 사용하기

더 전문적인 코드 하이라이팅을 위해, SyntaxHighlighter나 Prism 같은 외부 자바스크립트 라이브러리를 사용할 수도 있습니다.

예를 들어, Prism을 사용하는 방법:

• Prism의 공식 웹사이트에서 필요한 CSS와 JS 파일을 다운로드합니다.
• Blogger 대시보드에서 "테마" > "HTML 편집"으로 이동하여, 다운로드 받은 CSS 파일과 JS 파일을 포함시킵니다.
• pre 태그와 code 태그를 사용할 때, Prism에 맞는 클래스를 추가합니다.

<pre><code class="language-css">p { color: red }</code></pre>

결론

코드블록은 기술 블로그에서 중요한 역할을 합니다. Google Blogger에서 HTML, CSS, 외부 라이브러리를 활용하여 코드블록을 효과적으로 강조하고 스타일링하여, 글을 더 전문적이고 읽기 쉽게 만들 수 있습니다.