Code Highlight ウィジェットの説明
「Code Highlight」ウィジェットは、ウェブサイト上でソースコードを見やすく表示するためのウィジェットです。プログラミングに関するブログやチュートリアルサイトでは非常に役立つウィジェットでしょう。逆に言えば、そうではないテーマのブログやビジネスでは使う機会はほぼないウィジェットです。
Code Highlightウィジェットを使うと、さまざまなプログラミング言語のコードを色分けして表示できます。コードの構造が視覚的に把握しやすくなり、読者にわかりやすくコードを見せることができます。サポートされている言語には、HTML、CSS、JavaScript、Python、PHPなどがありよく知られている言語に対応しています。
ウィジェットの設定にある「Language」で言語を選択すると、ウィジェットが自動的にコードを適切な色分けで表示します。これにより、コードのシンタックスハイライトが適用され可読性が大幅に向上します。
Code Highlightウィジェットを配置したサンプル。
console.log( 'Code is Poetry' );
テーマを「Okaidia」に設定、6行目をハイライトしたサンプル。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML Sample</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="sample.js"></script>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.single-jet-popup{--wpr-bg-f29cfa55-77fb-466f-8157-ee73e55191ef: url('https://nocoders.jp/wp-content/plugins/jet-popup/assets/image/transparent.jpg');}.jet-image-accordion__item-loader span{--wpr-bg-9d70b3b6-6507-4d5e-9096-a7a2c0b28048: url('https://nocoders.jp/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.hcb-clipboard{--wpr-bg-72fb8712-fa0b-4cda-965f-5a1d53833f3e: url('https://nocoders.jp/wp-content/plugins/highlighting-code-block/assets/img/clipboard-to-copy.svg');}.hcb-clipboard.-done{--wpr-bg-fec817af-8191-4c88-8211-4b0b5224c23b: url('https://nocoders.jp/wp-content/plugins/highlighting-code-block/assets/img/clipboard-copied.svg');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".single-jet-popup","style":".single-jet-popup{--wpr-bg-f29cfa55-77fb-466f-8157-ee73e55191ef: url('https:\/\/nocoders.jp\/wp-content\/plugins\/jet-popup\/assets\/image\/transparent.jpg');}","hash":"f29cfa55-77fb-466f-8157-ee73e55191ef","url":"https:\/\/nocoders.jp\/wp-content\/plugins\/jet-popup\/assets\/image\/transparent.jpg"},{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-9d70b3b6-6507-4d5e-9096-a7a2c0b28048: url('https:\/\/nocoders.jp\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"9d70b3b6-6507-4d5e-9096-a7a2c0b28048","url":"https:\/\/nocoders.jp\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".hcb-clipboard","style":".hcb-clipboard{--wpr-bg-72fb8712-fa0b-4cda-965f-5a1d53833f3e: url('https:\/\/nocoders.jp\/wp-content\/plugins\/highlighting-code-block\/assets\/img\/clipboard-to-copy.svg');}","hash":"72fb8712-fa0b-4cda-965f-5a1d53833f3e","url":"https:\/\/nocoders.jp\/wp-content\/plugins\/highlighting-code-block\/assets\/img\/clipboard-to-copy.svg"},{"selector":".hcb-clipboard.-done","style":".hcb-clipboard.-done{--wpr-bg-fec817af-8191-4c88-8211-4b0b5224c23b: url('https:\/\/nocoders.jp\/wp-content\/plugins\/highlighting-code-block\/assets\/img\/clipboard-copied.svg');}","hash":"fec817af-8191-4c88-8211-4b0b5224c23b","url":"https:\/\/nocoders.jp\/wp-content\/plugins\/highlighting-code-block\/assets\/img\/clipboard-copied.svg"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div class="header">Header</div>
<div class="main">
<h1>見出し</h1>
<p>コンテンツ</p>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="img/sample1.jpg"><noscript><img decoding="async" src="img/sample1.jpg"></noscript>
</div>
<div class="footer">
<span>Footer</span>
</div>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/nocoders.jp\/wp-admin\/admin-ajax.php","nonce":"6ef7c9d643","url":"https:\/\/nocoders.jp\/widgets\/code-highlight","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://nocoders.jp/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>