方法-構文ハイライトを作成する
シンタックスハイライトを作成して使用する方法を学びます。
シンタックスハイライト
色を追加すると、コードスニペットが読みやすくなります。
<!DOCTYPE html>
<html>
<body>
<h1>Testing an HTML Syntax Highlighter</h2>
<p>Hello world!</p>
<a href="https://www.w3schools.com">Back to School</a>
</body>
</html>
<html>
<body>
<h1>Testing an HTML Syntax Highlighter</h2>
<p>Hello world!</p>
<a href="https://www.w3schools.com">Back to School</a>
</body>
</html>
<!DOCTYPE html >
<html >
<body >
<h1 > HTML構文ハイライトのテスト</ h2 >
<p > Hello world!</ p >
<a href ="https://www.w3schools.com">学校に戻る</a> < / body > < / html >
<html >
<body >
<h1 > HTML構文ハイライトのテスト</ h2 >
<p > Hello world!</ p >
<a href ="https://www.w3schools.com">学校に戻る</a> < / body > < / html >
シンタックスハイライトを作成する方法
ステップ1)HTMLを追加します。
例
HTMLコードを含む<div>:
<div id="myDiv">
<!DOCTYPE html><br>
<html><br>
<body><br>
<br>
<h1>Testing an HTML Syntax Highlighter</h2><br>
<p>Hello
world!</p><br>
<a href="https://www.w3schools.com">Back to
School</a><br>
<br>
</body><br>
</html>
</div>
ステップ2)JavaScriptを追加します。
例
「w3CodeColor」という関数を作成し、DIV要素をパラメーターとして使用して呼び出します。
w3CodeColor(document.getElementById("myDiv"));
function w3CodeColor(elmnt) {
// click "Try it Yourself" to see the JavaScript...
}