HubSpot ブログにコードブロックをいれたい!! 💻

HubSpot ブログにコードブロックをいれたい!! 💻

2025-03-06 · Reina

💻備忘録的にまとめているので、割と雑多です

HubSpot コードブロックがない問題

HubSpot ブログ純正の機能だと、コードブロック というものがないんです（私が知る限りでは）><

一応 コード書式 というのは選べるんですけど、なんかこれイマイチなのですよね。。

やっぱり複数行になると👇こういう形 (下のはZennでの表示）でおきたくなりますよね💭

【結論】カスタムモジュール作るしかない

結論から言います。カスタムモジュール作るのがいいです。（もしくは GitHub Gist のような外部サービスを使う）

この辺りのコミュニティもdigったのですが、あーーーんまりいい方法がなく、というか結局 prism.js 使う羽目になるので、そしたらカスタムモジュールにした方がいいよね というオチでした。

モジュールのファイルあるじゃん

なんか都合良いチュートリアルでも落ちてないかな…とおもってたら、普通にHubSpotが出していました（感謝）

モジュールを作る手前までは、👇のチュートリアルに沿って進めればいけるはずです。

📖 How to Build a Code Block Web Component

で、モジュールの作成なんですが こちらの Github にご丁寧に一式揃っているので、それを流用すればいけるはずです。

HubSpot CLI 使うしかない

モジュールの作成はもちろん UI からもできるんですが、今回は HubSpot CLI を使ってモジュールをアップロードする方がとてもとても幸せになれます。

📎2025/03/06 現在だと、src/modules/code-block.module のファイルが動作しました

なぜかというと今回のモジュールでは テキストフィールドに対して改行を許可している（許可しないとコードが一行にまとめられてしまうため）のですが、これ、、デザインマネージャーではできなくて HubSpot CLI で fileds.json の " allow_new_line": false``, を true にしてあげないといけないんですね💭

※なんか思った形にならなくて、このサイト見つけて気が付きました汗

HubSpot CLI の使い方については、いろいろとあるので参考になるページおいておきます。

• Hubspot CLIについて
• Install and use the HubSpot Visual Studio Code extension　👈 VSCode で操作するのが圧倒的楽なのでおすすめ

一応形になりました

右往左往してしまいましたが、ひとまずは形👇になりました。いろいろと気になるところはあるので、気が向いたらいじるかも、いじらないかも。。。

技術ブログをHubSpotで運用したいよ～みたいな方はトライしてみてください 🚀

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルHTMLページ</title>
</head>
<body>
    <h1>ようこそ！</h1>
    <p>これはサンプルのHTMLページです。</p>
</body>
</html>