HTML 소스 코드를 웹페이지(웹 문서)에 나타내는 방법에 관한 글입니다. 완성된 HTML 코드를 웹 문서에 나타내기 위해선, 코드를 표현할 수 있는 태그를 활용해야 합니다. 단순히 웹 문서에 아래 코드를 작성한다면, 분명 브라우저에 의해 코드가 해석 되어 링크가 만들어지기 때문입니다.
<a href="http://macinjune.com" title="MacinJune.com">MacinJune.com - 맥 커뮤니티</a>
소스 코드의 >, <, & 바꾸기
아래 4단계만 진행하시면 HTML 코드가 웹 문서에 문제 없이 들어갑니다.
- 모든 & character를 &로 바꾸기
- 모든 < character를 <로 바꾸기
- 모든 > character를 >로 바꾸기
- (필요에 따라) <pre> 혹은 <code> 태그로 감싸주기
<a href="http://macinjune.com" title="MacinJune.com">MacinJune.com - 맥 커뮤니티</a>
하지만 길이가 긴 소스 코드를 일일히 하나씩 바꾸는 방법은 매우 비효율적이며, 그럴 필요도 없습니다. 아래 링크의 사이트(freebits)를 활용하시면 쉽게 변경하실 수 있습니다.
소스 코드의 가독성 올리기
텍스트 하이라이팅(Highlighting)이 되지 않은 소스 코드는 가독성이 분명 떨어집니다. 시중에 텍스트 하이라이팅을 해주는 ‘Code Scripter‘와 같은 웹사이트가 많으니, 이용해보시면 될 듯합니다.
* 직접 CSS를 구현해보셔도 되고, 잘 짜놓은 소스 코드를 입맛에 맞게 구하셔도 됩니다.
- ‘CodeScripter’를 이용하여 삽입한 소스 코드 ▼
1 | <a href=“http://macinjune.com” title=“MacinJune.com”>MacinJune.com – 맥 커뮤니티</a> | cs |
‘rainbows’라는 패키지를 사용해보았습니다. 언어별(data-language) 다른 하이라이팅을 제공하기 때문에 HTML은 “html”라고 명시해주어야 합니다.
‘blackboard.css’ 테마를 사용했는데, 나름 괜찮은 것 같아 개발 중인 웹사이트에 적용하기로 했습니다. ▼
<pre> <code data-language="html"><a href="http://macinjune.com" title="MacinJune.com">MacinJune.com - 맥 커뮤니티</a></code></pre>
이상입니다.