SWELLで「ソースコードを記述」シンタックスハイライトの導入の仕方。

2023年11月16日

ソースコードのシンタックスハイライトの機能は、使う人があまりいないということでプラグインとして実装されています。

Highlighting Code Blockというプラグインを検索し有効化しましょう。

このプラグインの詳しい使い方は以下の記事を参考にしていただけますと幸いです。

STEP

シンタックスハイライト用のプラグインを追加し、有効化。

Highlighting Code Blockを検索して追加しましょう。

追加した後は忘れずに有効化をしましょう。

STEP

ブロックエディタから選択して挿入する。

エディター内で「ブロックの挿入」ができるようになっています。

/hcbというショートカットでも呼び出せます。よく使う方は覚えておきましょう。

STEP

言語を選択して書くだけ

言語を選択できる項目があるので、自分の書きたい言語に合わせて変更するだけ。

エディタ上では変化なく見えますが、プレビューを確認すると実際にシンタックスハイライトができていることがわかります。

ファイル名を設定する。

HCBのコードブロックは設定からさらに詳しく、ファイル名やハイライトする行番号などを設定できます。

QuitaやZennなどの技術ブログなどで使えるような表示ができるのは非常に便利ですね。

ただ、言語やファイル名を毎回設定から入力するのは少し面倒ではありますね。

この辺もうまくやってくれるショートカットがあればいいんですが・・・

もし、Highlighting Code Blockでその辺をうまくやってくれる方法をご存知の方がいらっしゃればぜひ教えていただけますと幸いです。

実際にシンタックスハイライトを使って書いてみた。

javascript

// 条件分岐
var age = 18;
if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

ruby

# app/controllers/welcome_controller.rb
class WelcomeController < ApplicationController
  def index
    @name = "John"
  end
end

php

   <?php
        // PHPコード
        $name = "John";
        echo "<h1>Hello, $name!</h1>";
    ?>

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, World Example</title>
</head>
<body>

    <h1>Hello, World!</h1>

</body>
</html>

C#

// Program.cs
using System;

class Program
{
    static void Main()
    {
        // C#コード
        string name = "John";
        Console.WriteLine($"Hello, {name}!");
    }
}

よかったらシェアしてね！