블로그스팟에서 소스코드 예쁘게 올리는 방법

8월 21, 2024

블로그스팟에서 파이썬 코드를 예쁘게 보이도록 쓰는 방법

블로그스팟에서 파이썬 코드를 예쁘게 보이도록 하기 위해서는 코드 하이라이팅을 적용할 수 있는 방법을 사용하면 좋습니다. 다음은 그 방법에 대한 설명입니다.
티스토리에서는 자체 기능으로 제공을 하는데 블로그스팟에서는 번거로운 점이 있네요.

1. Syntax Highlighter 사용하기

블로그스팟은 기본적으로 코드 하이라이팅을 지원하지 않지만, JavaScript 라이브러리를 활용하여 코드에 하이라이팅을 추가할 수 있습니다. 대표적인 라이브러리로는 Prism.js와 highlight.js가 있습니다.

Prism.js 사용 방법

Prism.js 파일 추가: 블로그의 템플릿 HTML 파일에 Prism.js의 CSS와 JS 파일을 추가해야 합니다.

블로그스팟 관리 화면에서 테마 > HTML 편집으로 이동하세요.

<head> 태그 안에 다음 코드를 추가하세요:

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-python.min.js"></script>

코드 블록 추가: 글을 작성할 때 코드 블록을 추가하고, 다음과 같이 <pre>와 <code> 태그를 사용하세요.
```
<pre><code class="language-python">
def hello_world():
    print("Hello, World!")
</code></pre>
        
```
게시글 작성 및 확인: 이렇게 작성한 코드를 게시하고 확인하면, 코드가 하이라이팅 되어 보일 것입니다.

highlight.js 사용 방법

highlight.js 파일 추가: Prism.js와 비슷하게, highlight.js의 CSS와 JS 파일을 템플릿 HTML에 추가해야 합니다.

<head> 태그 안에 다음 코드를 추가하세요:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

코드 블록 추가: Prism.js와 마찬가지로, <pre>와 <code> 태그를 사용하여 코드를 작성하세요.
```
<pre><code class="language-python">
def hello_world():
    print("Hello, World!")
</code></pre>
        
```
게시글 작성 및 확인: 게시글을 작성한 후 확인하면 코드에 하이라이팅이 적용되어 있을 것입니다.

2. Google Code Prettify 사용하기

Google에서 제공하는 Code Prettify도 블로그스팟에서 쉽게 사용할 수 있습니다.

Prettify 파일 추가: 템플릿 HTML에 Prettify의 CSS와 JS 파일을 추가합니다.

<head> 태그 안에 다음 코드를 추가하세요:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>

코드 블록 추가: 코드를 작성할 때 <pre class="prettyprint"> 태그를 사용하세요.
```
<pre class="prettyprint">
def hello_world():
    print("Hello, World!")
</pre>
        
```
게시글 작성 및 확인: 글을 게시한 후, 코드가 하이라이트된 것을 확인할 수 있습니다.

이 방법들을 활용하면 블로그스팟에서도 파이썬 코드를 예쁘게 보이도록 할 수 있습니다. 각각의 방법을 시도해보고, 본인의 블로그 스타일에 맞는 것을 선택하는 것이 좋습니다.

Info Mars