HTML 소스 코드 웹페이지에 나타내기

개인적인 노트사용을 목적으로 간결한 어조로 작성된 글임을 이해부탁드립니다.

아래 간단한 html 코드를 웹페이지에 나타내기 위해선, 약간의 추가 작업이 필요하다. 웹 개발중 그냥 저러한 코드를 적으면, 브라우저에 의해 해석이 되어, 링크가 만들어지기 때문이다.

<a href="http://macinjune.com" title="MacinJune.com">MacinJune.com - 맥 커뮤니티</a>

소스 코드의 >, <, & 바꾸기

아래 4단계만 순차적으로 하면 문제없이 들어간다.

  1. 모든 & character를 &amp;로 바꾸기
  2. 모든 < character를 &lt;로 바꾸기
  3. 모든 > character를 &gt;로 바꾸기
  4. 필요에 따라 <pre> 혹은 <code> 태그로 감싸주기
&lt;a href="http://macinjune.com" title="MacinJune.com"&gt;MacinJune.com - 맥 커뮤니티&lt;/a&gt;

하지만, 길이가 긴 소스 코드를 일일히 하나씩 바꾸는 방법은 매우 비효율적이며, 그럴 필요도 없다. 아래 링크를 찾아 가보면, 아주 쉽게 바꿀 수 있다.

freebits

 

소스 코드의 가독성 올리기

바꾼 텍스트를 그냥 사용하긴 좀 심심한 감이 없지 않아 있다. Text-Highlighting도 안되고, 가독성도 떨어지는 것 같다. https://colorscripter.com/에 가면 여러가지 옵션에 맞게 텍스트를 하이라이팅해준다. 매우 편리한 기능이다.

-CodeScripter를 이용하여 삽입한 소스 코드

1
<a href=“http://macinjune.com” title=“MacinJune.com”>MacinJune.com – 맥 커뮤니티</a>
cs

 

외부에서 제공하는 많은 하이라이팅 옵션들이 있다. rainbows를 한번 사용해보았다. 자세한 설명은 모두 아래 링크에 나와 있으니, 결과만 공개하겠다. (간단하게, rainbows에서 제공하는 js와 css만 import하면 된다)

rainbows

data-language별로 하이라이팅이 다르기 때문에 아래처럼 입력해준다. blackboard.css 테마를 사용했는데, 나름 괜찮은 것 같아, 개발중이 웹페이지에 적용하기로 했다.

<pre> <code data-language="html">&lt;a href="http://macinjune.com" title="MacinJune.com"&gt;MacinJune.com - 맥 커뮤니티&lt;/a&gt;</code></pre>

 

이상.

댓글 남기기