블로그스팟(Blogspot) 본문에 글과 함께 코드를 삽입하는 방법

by

블로그스팟(Blogspot) 본문에 글과 함께 코드를 삽입하려면, HTML 편집 기능과 CSS 스타일링을 활용하면 효과적으로 구현할 수 있습니다. 아래 방법을 따라 하세요:

블로그스팟(Blogspot) 본문에 글과 함께 코드를 삽입하는 방법

방법 1: 기본 코드 블록 삽입

  1. 게시글 작성 화면에서 작성 중인 글의 상단 메뉴에서 HTML 보기로 전환합니다.
  2. 코드를 삽입하려는 위치에 아래 HTML 태그를 추가하세요: 
    html
    <pre>
<code>
// 여기에 코드 작성
function sayHello() {
    console.log("Hello, World!");
}
</code>
</pre>
  3. HTML 보기에서 글쓰기 모드로 전환하면 코드가 스타일링 없이 나타납니다.

방법 2: 코드에 스타일 추가 (CSS 활용)

  1. HTML 모드에서 아래와 같은 CSS를 <style> 태그 안에 추가하세요. (단, CSS는 블로그 테마에 따라 본문에 추가되지 않을 수 있으니 주의):

    html
    <style>
pre {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    overflow-x: auto;
    font-family: monospace;
}
code {
    color: #d14;
    font-size: 14px;
}
</style>

  2. 그런 다음, <pre><code> 블록 안에 코드를 삽입합니다:

    html
    <pre>
<code>
// Python 예제
def greet(name):
    return f"Hello, {name}!"
</code>
</pre>

방법 3: 코드 하이라이팅 플러그인 사용

  1. 블로그스팟은 기본적으로 코드 하이라이팅 기능이 없으므로, Google Prettify 같은 외부 스크립트를 사용할 수 있습니다.

  2. HTML 보기 모드에서 블로그 헤더(<head>)에 아래 스크립트를 추가하세요:

    html
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

  3. 그런 다음, 코드 블록에 class="prettyprint"을 추가합니다:

    html
    <pre class="prettyprint">
<code>
// JavaScript 예제
const greet = (name) => `Hello, ${name}`;
</code>
</pre>

  4. 저장 후, 블로그를 미리 보기 하면 코드가 하이라이트된 상태로 나타납니다.

방법 4: 외부 코드 공유 플랫폼 연결

코드가 많거나 복잡하다면, GitHub Gist나 CodePen 같은 플랫폼에 코드를 업로드하고 iFrame으로 삽입하는 것도 가능합니다:

  1. GitHub Gist에 코드를 업로드합니다.
  2. “Embed” 링크를 복사한 뒤 HTML 편집 모드에서 삽입합니다: 
    html
    <iframe src="https://gist.github.com/사용자이름/gist-id" frameborder="0" width="100%" height="300"></iframe>

이 방법을 활용하면 블로그스팟에서도 깔끔하고 직관적인 코드 표현이 가능합니다.

Leave a Comment