w3.css
구문 강조기 만들기
구문 강조 도구를 만들고 사용하는 방법을 알아보자.
구문 강조기
색상을 추가하면 코드 조각을 더 쉽게 읽을 수 있다.
1단계) HTML 추가
HTML 코드를 포함하는 <div>
<div id="myDiv"> &lt;!DOCTYPE html&gt;<br> &lt;html&gt;<br> &lt;body&gt;<br> <br> &lt;h1&gt;Testing an HTML Syntax Highlighter&lt;/h2&gt;<br> &lt;p&gt;Hello world!&lt;/p&gt;<br> &lt;a href="https://www.w3schools.com"&gt;Back to School&lt;/a&gt;<br> <br> &lt;/body&gt;<br> &lt;/html&gt; </div>
2단계) JavaScript 추가
“w3CodeColor”라는 함수를 만들고 DIV 요소를 매개변수로 사용하여 호출한다.
w3CodeColor(document.getElementById("myDiv")); function w3CodeColor(elmnt) { // click "Try it Yourself" to see the JavaScript... }
기본 예시
예제 보기참고
W3C School - Create a Syntax Highlighter