How To – 구문 강조기 만들기

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...
}