덩어리진 코드 마크업

이 사이트의 덩어리진 코드는 blockquoted, preformatted, code로 마크업되어 있습니다. 즉,

<bockquote><pre><code>
// Codes.
</code></pre></blockquote>

로 마크업되며, 이렇게 마크업되어야만 제대로 보여집니다.

테마

이 사이트는 Platform 테마를 사용하며, 프로그램 코드, 한글 폰트, 및 세부 튜닝을 위해 다음의 추가적인 CSS를 사용합니다.

/*!
 Patched stylings for program code and Korean script and more by Eonil at 2010.12.04.
 */

p
{
	margin-left:1em;
	margin-top:1.4em;
	margin-bottom:1.4em;
	line-height:1.6em;
}

ol,
ul,
.hentry ol,
.hentry ul
{
	margin-left:3em;
}

a,
code
{
	word-break:break-word;	/* IE hack */
	word-break:break-all;
	text-wrap:unrestricted;
}

p a,
li a
{
	font-family:NanumGothic,sans-serif;

/*
	padding:2px;
	border-radius:4px;
	background-color:#225E9B;
	color:white;
 */
}

/*
 Regular quoted paragraphs.
 */
blockquote p
{
	margin-top:0em;
	margin-bottom:0em;
}

/*
 Code blocks
 */
blockquote
{
	margin-top:0em;
	margin-bottom:0em;
	padding-top:1em;
	padding-bottom:1em;
	padding-left:2em;
	padding-right:2em;

	border-color:#eeeeee;
	border-style:solid;
	border-width:1px;
	background-color:#f7f7f7;
}

code, code *
{
	color:green;
	font-style:normal;
	font-weight:400;
	font-family:
		NanumGothicCoding,
		Menlo,
		monospace,
		sans-serif;
}

code strong, code strong *
{
	color:green;
	font-style:normal;
	font-weight:800;
	font-family:
		NanumGothicCodingBold,
		MenloBold,
		monospace,
		sans-serif;
}

또한, css/theme.css 파일의 글꼴 세팅에 적절한 나눔체를 세팅했습니다.

HTML 에디터

HTML에디터는 http://www.shoutmeloud.com/how-to-add-custom-buttons-to-wordpress-editor.html에서 참조한 방식으로 code block버튼을 추가했습니다. 이 버튼은 선택된 텍스트 앞뒤에 각각 <bockquote><pre><code>와 </code></pre></blockquote>를 추가합니다. 이를 위해 /wp-includes/js/quicktags.dev.js에 추가된 코드는 다음과 같습니다.

edButtons[edButtons.length] =
new edButton('ed_code_block'
,'code block'
,'<blockquote><pre><code>'
,'</code></pre></blockquote>'
,''
);