블로그에서 사용하는 서식 코드

<style>
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 20px;
        padding: 20px;
    }
    .section {
        margin: 20px 0;
        padding: 10px;
    }
    .theorem {
        background-color: #f4f4f4;
        padding: 15px;
        border-radius: 5px;
        border-left: 4px solid #333;
    }
    .proof {
        background-color: #fff8e1;
        padding: 15px;
        border-radius: 5px;
        border-left: 4px solid #fbc02d;
        /* margin-left 제거 */
    }
    .explanation {
        background-color: #e8f5e9;
        padding: 15px;
        border-radius: 5px;
        border-left: 4px solid #2e7d32;
    }
    .algorithm {
        background-color: #e3f2fd;
        padding: 15px;
        border-radius: 5px;
        border-left: 4px solid #1976d2;
    }
    .qed {
        text-align: right;
        font-weight: bold;
    }
</style>

</div>
<h2 data-ke-size="size26">예시 블럭 모음</h2>
<div class="section theorem">
<h3 data-ke-size="size23">정리</h3>
<p data-ke-size="size16">모든 유한 소수는 유리수이다.</p>
</div>
<p data-ke-size="size16">&nbsp;</p>
<div class="section proof">
<h3 data-ke-size="size23">증명</h3>
<p data-ke-size="size16">소수를 분수 형태로 표현할 수 있기 때문에 유리수이다.</p>
<p class="qed" data-ke-size="size16">■</p>
</div>
<p data-ke-size="size16">&nbsp;</p>
<div class="section explanation">
<h3 data-ke-size="size23">설명</h3>
<p data-ke-size="size16">유리수란 두 정수의 비로 표현되는 수이며, 유한 소수는 그러한 수 중 하나이다.</p>
</div>
<p data-ke-size="size16">&nbsp;</p>
<div class="section algorithm">
<h3 data-ke-size="size23">알고리즘</h3>
<p data-ke-size="size16">이진 탐색은 정렬된 배열에서 원하는 값을 찾는 효율적인 방법이다.</p>
<pre class="livecodeserver"><code>def binary_search(arr, target):
    left, right = 0, len(arr) - 1
    while left &lt;= right:
        mid = (left + right) // 2
        if arr[mid] == target:
            return mid
        elif arr[mid] &lt; target:
            left = mid + 1
        else:
            right = mid - 1
    return -1</code></pre>
</div>