블로그 가이드 -4- 코드블럭

Geneuin
Geneuin
1 min read

Categories

코드블럭

코드블럭을 작성하는 방법은 크게 3가지가 있습니다.

코드블럭 1) basic

` ``` ` 로 코드 앞뒤를 묶어줍니다.

    ```css
    #container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
    }
    ```

위와 같이 해당 코드 처음과 마지막에 ` `를 붙여줍니다. 시작하는 ` ` 에 코드의 언어를 붙여주면 해당 코드에 하이라이트가 적용됩니다.

예 )

#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}

코드블럭 2) linenos

해당 블로그 테마는 다음과 같은 방법도 지원합니다. 라인 넘버가 포함된 코드블럭입니다.

    
<figure class="highlight"><pre><code class="language-html" data-lang="html"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre>    <span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"pagination"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">&gt;</span>
      {% if page.previous %}
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"{{ site.url }}{{ page.previous.url }}"</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">title=</span><span class="s">"{{ page.previous.title }}"</span><span class="nt">&gt;</span>Previous article<span class="nt">&lt;/a&gt;</span>
      {% endif %}
      {% if page.next %}
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"{{ site.url }}{{ page.next.url }}"</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">title=</span><span class="s">"{{ page.next.title }}"</span><span class="nt">&gt;</span>Next article<span class="nt">&lt;/a&gt;</span>
      {% endif %}
    <span class="nt">&lt;/nav&gt;</span><span class="c">&lt;!-- /.pagination --&gt;</span>
    
</pre></td></tr></tbody></table></code></pre></figure>

예 )

1
2
3
4
5
6
7
8
9

    <nav class="pagination" role="navigation">
      {% if page.previous %}
        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
      {% endif %}
      {% if page.next %}
        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
      {% endif %}
    </nav><!-- /.pagination -->

코드블럭 3) GitHub Gist Embed

깃허브 gist 임베드도 지원합니다.

<script src="https://gist.github.com/mmistakes/77c68fbb07731a456805a7b473f47841.js"></script>

예 )

참고

references