ホームページ制作
ユニゼロワン
機能DEMOサイト
ユニゼロワン機能DEMOサイト

Syntax Highlighter

カテゴリ：WEB機能
DEMOに」ある機能は、ご希望に応じて様々にカスタマイズできます。
TOPページに戻る

このページの機能についてのお問合せは、Tipsユニゼロワンサイトに進み、照会番号でお願いします。

Tipsユニゼロワン
照会番号：DEMO2-
46529
  • 表示されるボタンの多くはサンプルDEMOにつき機能しません。
  • ほとんどの機能は、カスタマイズが可能で、複数の機能を組み合わせることもできます。
  • 完全にオーダーメイドでの機能作成も承っております。（グループサイト STUDIO ユニゼロワンをご参照ください）
  • ほとんどの機能がフルレスポンシブ機能（スマートフォンやタブレットでの最適化表示）に対応しており、大幅に調整又は別レイアウトでの制作にも対応しています。
  • フルレスポンシブ機能を確認するには、「デバイスプレビューを見る」ボタンからお進みください。
  • 異なるプログラミング手法による同じ機能も他の機能DEMOグループサイトでご紹介しております。
コードを“見やすく美しく”表示するためのコードハイライト専用機能です。 複数言語に対応し、色分け・行番号・コピー機能などを備えた開発者向けの表示コンポーネント。

■ 特徴

  • 多言語シンタックスハイライト — HTML / CSS / JS / PHP など主要言語に対応
  • 行番号・コードコピー機能 — 読みやすさと使いやすさを向上
  • テーマ切り替え — ライト/ダークなど複数スタイルを選択可能
  • 折りたたみ・スクロール対応 — 長いコードも扱いやすい

■ よく使われる場面

  • 技術ブログやチュートリアル記事のコード掲載
  • プラグイン・テーマの使い方説明
  • LPやドキュメントでのサンプルコード提示
  • 開発者向けサイトのコードスニペット表示

📱 デバイスプレビューを見る

HTML Markup Syntax

<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
    initial-scale=1.0">
<link rel="stylesheet" href="style.css">
    <title>Button Example </title>
</head>
<body>
  <button class="btn"> Click Me</button>
</body>
</html>

HTML Markup Syntax Highlighter

  • Syntax highlighting for HTML code snippets

  • Customizable color schemes

  • Code copy functionality

CSS Code Syntax Highlighter

CSS Code Syntax Highlighter

  • Syntax highlighting for CSS code snippets

  • Line numbering

  • Download code button

/* style.css */
.btn {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
btn:hover {
background-color: #298069;
}

JavaScript Code Snippet Highlighter

// script.js
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
vor message = document.getElementById("message").value;
if (nome"" || email"Il message="") {
alert("All fields are required!");
return false;
}
return true;
}

JavaScript Code Snippet Highlighter

  • Syntax highlighting for JavaScript code snippets

  • Line numbering

  • Download code button

PHP Code Syntax Highlighter

PHP Code Syntax Highlighter

  • Syntax highlighting for PHP code snippets

  • Line numbering

  • Download code button

?php
// submit.php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = htmlspecialchars($_POST["name"]);
  $email = htmlspecialchars($_POST["email"]);
  $message = htmlspecialchars($_POST["message"]);

  // Example: Sending an email (you can customize this part)
  $to = "you@example.com";
  $subject = "New Contact Form Submission";
  $body