---
title: GitHub Gistを使ってHubSpotのブログにコードを表示させる｜Nextmode Blog
description: HubSpotのブログにGithub Gistを使ってシンタックスハイライト表示のコードを載せる手順を紹介します。
image: https://info.nextmode.co.jp/hubfs/HubSpot.png
---

[![nextmode blog](https://info.nextmode.co.jp/hubfs/raw_assets/public/NextMode_Theme/nextmode%20blog.png)](https://info.nextmode.co.jp/blog)

[ホワイトペーパー](https://info.nextmode.co.jp/white-paper/) [資料請求](https://info.nextmode.co.jp/request/) [お問い合わせ](https://nextmode.co.jp/contact/)

- [会社TOP](https://nextmode.co.jp/)
- [生成AIセキュリティ](https://nextmode.co.jp/services/ai/security/)
- [SaaSライセンス＆サポート](https://nextmode.co.jp/services/saas/)
  
    - [Oktaライセンス＆サポート](https://nextmode.co.jp/services/saas/okta/)
    - [Netskopeライセンス＆サポート](https://nextmode.co.jp/services/saas/netskope/)
    - [Notionライセンス＆サポート](https://nextmode.co.jp/services/saas/notion/)
    - [Asanaライセンス＆サポート](https://nextmode.co.jp/services/saas/asana/)
    - [SysCloudライセンス＆サポート](https://nextmode.co.jp/services/saas/syscloud/)
    - [CrowdStrikeライセンス＆サポート](https://nextmode.co.jp/services/saas/crowdstrike/)
- [AWS総合支援](https://nextmode.co.jp/services/aws/)
  
    - [AWS導入コンサル・構築](https://nextmode.co.jp/services/aws_consulting/)
    - [AWS運用・保守代行](https://nextmode.co.jp/services/aws_operation/)
- [導入事例](https://nextmode.co.jp/casestudy/)
- [会社情報](https://nextmode.co.jp/company/)
- [セミナー](https://info.nextmode.co.jp/seminar/)
- [ブログ](https://info.nextmode.co.jp/blog)

[![YouTube](https://nextmode.co.jp/assets/images/common/icon_youtube.svg)](https://www.youtube.com/@nextmode) <https://x.com/Nextmode_Inc>

目次

 2023/02/08 13:15

# GitHub Gistを使ってHubSpotのブログにコードを表示させる

[» 技術](https://info.nextmode.co.jp/blog/tag/技術) [» GitHub Gist](https://info.nextmode.co.jp/blog/tag/github-gist) [» HubSpot](https://info.nextmode.co.jp/blog/tag/hubspot)

[![南栄樹](https://app.hubspot.com/settings/avatar/741dedfe97a942cceb7916549a7401c6) 南栄樹](https://info.nextmode.co.jp/blog/author/minami-eiki)

共有： [facebook-f icon](http://www.facebook.com/share.php?u=https://info.nextmode.co.jp/blog/hubspot-brog-gist) [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://info.nextmode.co.jp/blog/hubspot-brog-gist) [Twitter icon](https://twitter.com/intent/tweet?url=https://info.nextmode.co.jp/blog/hubspot-brog-gist) [pinterest-p icon](http://pinterest.com/pin/create/link/?url=https://info.nextmode.co.jp/blog/hubspot-brog-gist) [envelope icon](mailto:?body=https://info.nextmode.co.jp/blog/hubspot-brog-gist)

## はじめに

[ネクストモード](https://nextmode.co.jp/)の南です。

ネクストモードでは契約管理やカスタマーサクセス活動に[HubSpot](https://www.hubspot.jp/)を活用しています。  
また、こちらのネクストモードブログもHubSpotが基盤となっています。

おかげさまでネクストモードブログでは活発に情報発信をさせていただいていますが、技術系のブログを書く際にコードの表示について工夫をした件がありましたので、こちらで紹介したいと思います。

## やりたかったこと

技術系のブログを書いているとコードの紹介をしたいケースがありますが、HubSpotのブログ機能ではシンタックスハイライトをサポートしていません。  
それでも書けなくはないですが、複雑なコマンドや複数行のコードだとちょっとつらさがあります。

\<!DOCTYPE html\>  
\<html\>  
\<head\>  
\<meta charset="UTF-8"\>  
\<title\>Hello World\</title\>  
\</head\>  
\<body\>  
\<h1\>Hello World\</h1\>  
\<p\>hogehoge\</p\>  
\</body\>  
\</html\>

![ソースコード](https://info.nextmode.co.jp/hs-fs/hubfs/character_program_fat.png?width=256&height=256&name=character_program_fat.png)

## やったこと

そこで、GitHubのサービスである[Gist](https://gist.github.com)を使ってコードを表示させることにしました。

GistはGitHubのサービスで、ソースコードを1ファイル単位からGitで管理し、公開することができます。  
また、外部のWebサイトへ埋め込むことができ、GitHubと同様のシンタックスハイライトを使ってコードを表示させることができます。

実際の表示はこのようになります。

## 手順

ここからは設定手順を紹介していきます。

まずはGistでのコード登録から始めていきます。  
こちらの手順については以下の公式のドキュメントでも紹介されているので、ご参考ください。  
また、前提としてGitHubのアカウントが必要となりますので、アカウントをお持ちでない方は事前に作成をお願いします。

<iframe class="hatenablogcard" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: none;" src="https://hatenablog-parts.com/embed?url=https://docs.github.com/ja/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists" width="600" height="150" frameborder="0" scrolling="no">
</iframe>

まず、GitHubにログインしたら、自分のアイコンの横にある\[+\]をクリックして、\[New gist\]をクリックします。

![Gist手順1](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-gist%202.png?width=250&height=246&name=hubspot-gist%202.png)

Gistのコード入力画面が開きます。  
ファイル名の入力フィールドに拡張子つきでファイル名を入力し、コードの入力フィールドにコードを記述します。

![Gist手順2](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-gist%204_1200.png?width=700&height=353&name=hubspot-gist%204_1200.png)

入力が終わったら、右下の\[▽\]ボタンから\[Create secret gist\]にチェックを入れ、\[Create secret gist\]をクリックします。  
なお、作成するのはsecret gistとなりますが、secretといってもURLを知っていれば誰でもコードを参照することができてしまいますのでご認識ください。  
（ブログで公開することが前提なので問題ない想定ですが）

![Gist手順3](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-gist%203.png?width=600&height=304&name=hubspot-gist%203.png)

Gistが作成されました。  
右上のフィールドに外部組み込み用のスクリプトタグのコードが表示されます。  
コードの横のコピーボタンをクリックして、コピーしておきます。

![Gist手順4](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-gist%205_1200.png?width=701&height=254&name=hubspot-gist%205_1200.png)

続いて、作成したGistをHubSpotのブログに埋め込んでいきます。

まず、HubSpotで対象のブログを開いたら、画面右上にある\[集中モード\]をクリックしてオンにし、\[詳細\]のプルダウンからから\[ブロックを表示\]をクリックすると、ブロックが表示されるようになりこの後の作業がしやすいです。

![hubspot手順1](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-gist%2014.png?width=300&height=255&name=hubspot-gist%2014.png)

続いて、\[挿入\]をクリックして、プルダウンから\[埋め込み\]をクリックします。

![hubspot手順2](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-gist%206.png?width=302&height=300&name=hubspot-gist%206.png)

「埋め込みを挿入」の画面で、先ほどコピーしておいたGistのスクリプトコードを入力フィールドにペーストし、\[挿入\]をクリックします。

![hubspot手順3](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-gist%207-2.png?width=400&height=511&name=hubspot-gist%207-2.png)

すると、こんな感じで何も表示されないブロックが挿入されました。

![hubspot手順4](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-gist%208_1200.png?width=701&height=324&name=hubspot-gist%208_1200.png)

編集画面では表示されませんが、右上の\[プレビュー\]をクリックしてプレビュー画面を見てみると、きちんとコードが表示されていることが確認できます。

- プレビューの画面  
  ![hubspot手順5](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-gist%209_1200.png?width=698&height=274&name=hubspot-gist%209_1200.png)

あとは、コードのブロックの位置や大きさの調整をしていきます。  
コードのブロックを選択すると、上のバーに位置や大きさを調整する項目が表示されます。  
今回はインラインを選択しています。

![hubspot手順6](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-gist%2011_1200.png?width=701&height=413&name=hubspot-gist%2011_1200.png)

大きさ（横幅）については、先ほどの位置調整の右側のフィールドで調整します。  
編集画面上では横幅を大きくすると連動して高さの数字も大きくなってしまいますが、実際の画面では横幅のみ反映されて、高さについてはコードの量に合わせて表示されます。

![hubspot手順7](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-gist%2012.png?width=503&height=69&name=hubspot-gist%2012.png)

- プレビューの画面  
  ![hubspot手順8](https://info.nextmode.co.jp/hs-fs/hubfs/hubspot-gist%2015_1200.png?width=700&height=275&name=hubspot-gist%2015_1200.png)

設定は以上となります。

## まとめ

コードの表示のためにGitHub Gistを使うケースはありますが、HubSpotのブログでもちゃんと連携させることができます。  
細かなところですが、見やすい・読みやすいブログ記事となるように、色々工夫していきたいと思います。

### 関連記事

[![【Notion】コンピューターワークスペースで広がる Notion AI の活用範囲：ログ分析からスライド・動画作成まで](https://info.nextmode.co.jp/hubfs/NotionAI.png) 【Notion】コンピューターワークスペースで広がる Notion AI の活用範囲：ログ分析からスライド・動画作成まで ![](https://info.nextmode.co.jp/hubfs/avator_yukinawa.jpg) yuki 2026/09/15](https://info.nextmode.co.jp/blog/notion-ai-computer-practical-use-cases)

[![【Keeper】はじめの一歩：最初にやるべき5つの設定](https://info.nextmode.co.jp/hubfs/%E3%83%96%E3%83%AD%E3%82%B0%EF%BC%BF%E3%82%AD%E3%83%BC%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB/Keeper_Blog.png) 【Keeper】はじめの一歩：最初にやるべき5つの設定 ![](https://info.nextmode.co.jp/hubfs/kusumi.png) kusumin 2026/09/15](https://info.nextmode.co.jp/blog/keeper-getting-started-guide)

[![【Oktane26】セッション：Okta Workflows 顧客事例と今後のロードマップ](https://info.nextmode.co.jp/hubfs/%E3%83%96%E3%83%AD%E3%82%B0%EF%BC%BF%E3%82%AD%E3%83%BC%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB/oktane26.png) 【Oktane26】セッション：Okta Workflows 顧客事例と今後のロードマップ ![](https://info.nextmode.co.jp/hubfs/kusumi.png) kusumin 2026/09/24](https://info.nextmode.co.jp/blog/oktane26-workflows-flowcase)

### Category

[» 技術](https://info.nextmode.co.jp/blog/tag/技術) [» Okta](https://info.nextmode.co.jp/blog/tag/okta) [» Notion](https://info.nextmode.co.jp/blog/tag/notion) [» イベントレポート](https://info.nextmode.co.jp/blog/tag/イベントレポート) [» Netskope](https://info.nextmode.co.jp/blog/tag/netskope) [» CrowdStrike](https://info.nextmode.co.jp/blog/tag/crowdstrike) [» Notion AI](https://info.nextmode.co.jp/blog/tag/notion-ai) [» AWS](https://info.nextmode.co.jp/blog/tag/aws) [» Asana](https://info.nextmode.co.jp/blog/tag/asana) [» カルチャー](https://info.nextmode.co.jp/blog/tag/カルチャー) [» ワーケーション](https://info.nextmode.co.jp/blog/tag/ワーケーション) [» 生成AIセキュリティ対策シリーズ](https://info.nextmode.co.jp/blog/tag/生成aiセキュリティ対策シリーズ) [» Oktane25](https://info.nextmode.co.jp/blog/tag/oktane25) [» SaaS](https://info.nextmode.co.jp/blog/tag/saas) [» re:Invent](https://info.nextmode.co.jp/blog/tag/reinvent) [» AI](https://info.nextmode.co.jp/blog/tag/ai) [» リモートワーク](https://info.nextmode.co.jp/blog/tag/リモートワーク) [» Keeper](https://info.nextmode.co.jp/blog/tag/keeper) [» ネクストモードアドベントカレンダー2024](https://info.nextmode.co.jp/blog/tag/ネクストモードアドベントカレンダー2024) [» Oktane24](https://info.nextmode.co.jp/blog/tag/oktane24) [» Oktane23](https://info.nextmode.co.jp/blog/tag/oktane23) [» Asana AI](https://info.nextmode.co.jp/blog/tag/asana-ai) [» Slack](https://info.nextmode.co.jp/blog/tag/slack) [» Oktane26](https://info.nextmode.co.jp/blog/tag/oktane26) [» OIGシリーズ](https://info.nextmode.co.jp/blog/tag/oigシリーズ) [» その他](https://info.nextmode.co.jp/blog/tag/その他) [» 脱Excelシリーズ](https://info.nextmode.co.jp/blog/tag/脱excelシリーズ) [» Oktane22](https://info.nextmode.co.jp/blog/tag/oktane22) [» SysCloud](https://info.nextmode.co.jp/blog/tag/syscloud) [» Google](https://info.nextmode.co.jp/blog/tag/google) [» HubSpot](https://info.nextmode.co.jp/blog/tag/hubspot) [» Zapier](https://info.nextmode.co.jp/blog/tag/zapier) [» Azure AD](https://info.nextmode.co.jp/blog/tag/azure-ad) [» Entra ID](https://info.nextmode.co.jp/blog/tag/entra-id) [» Googleドライブ](https://info.nextmode.co.jp/blog/tag/googleドライブ) [» SentinelOne](https://info.nextmode.co.jp/blog/tag/sentinelone) [» ゼロトラスト](https://info.nextmode.co.jp/blog/tag/ゼロトラスト) [» DocuSign](https://info.nextmode.co.jp/blog/tag/docusign) [» Jamf](https://info.nextmode.co.jp/blog/tag/jamf) [» セキュリティ対策](https://info.nextmode.co.jp/blog/tag/セキュリティ対策) [» トラブルシューティング](https://info.nextmode.co.jp/blog/tag/トラブルシューティング) [» 利用者目線](https://info.nextmode.co.jp/blog/tag/利用者目線) [» 運用](https://info.nextmode.co.jp/blog/tag/運用) [» GitHub](https://info.nextmode.co.jp/blog/tag/github) [» GitHub Gist](https://info.nextmode.co.jp/blog/tag/github-gist) [» JOUG](https://info.nextmode.co.jp/blog/tag/joug) [» Notion Calendar](https://info.nextmode.co.jp/blog/tag/notion-calendar) [» Proflly](https://info.nextmode.co.jp/blog/tag/proflly) [» kintone](https://info.nextmode.co.jp/blog/tag/kintone)

[![ネクストモード株式会社](https://nextmode.co.jp/assets/images/common/logo_white.svg)](https://nextmode.co.jp/)

Service

- [生成AIセキュリティ](https://nextmode.co.jp/services/ai/security/)
- [SaaSライセンス＆サポート](https://nextmode.co.jp/services/saas/) 
    - [Oktaライセンス＆サポート](https://nextmode.co.jp/services/saas/okta/)
    - [Netskopeライセンス＆サポート](https://nextmode.co.jp/services/saas/netskope/)
    - [Notionライセンス＆サポート](https://nextmode.co.jp/services/saas/notion/)
    - [Asanaライセンス＆サポート](https://nextmode.co.jp/services/saas/asana/)
    - [SysCloudライセンス＆サポート](https://nextmode.co.jp/services/saas/syscloud/)
    - [CrowdStrikeライセンス＆サポート](https://nextmode.co.jp/services/saas/crowdstrike/)
    - [Keeperライセンス＆サポート](https://nextmode.co.jp/services/saas/keeper/)
- [AWS総合支援](https://nextmode.co.jp/services/aws/) 
    - [AWS導入コンサル・構築](https://nextmode.co.jp/services/aws_consulting/)
    - [AWS運用・保守代行](https://nextmode.co.jp/services/aws_operation/)

Company

- [会社情報](https://nextmode.co.jp/company/)
- [サービス一覧](https://nextmode.co.jp/services/)
- [導入事例](https://nextmode.co.jp/casestudy/)
- [お知らせ](https://nextmode.co.jp/news/)
- [サステナビリティ](https://nextmode.co.jp/sustainability/)
- [採用](https://nextmode.co.jp/recruit/)
- [私たちの働き方](https://nextmode.co.jp/workstyle/)
- [カルチャー](https://nextmode.co.jp/culture/)

Contact

- [お問い合わせ](https://nextmode.co.jp/contact/)
- [資料請求](https://info.nextmode.co.jp/request/)

Media

- [セミナー](https://info.nextmode.co.jp/seminar)
- [ブログ](https://info.nextmode.co.jp/blog)
- [ホワイトペーパー](https://info.nextmode.co.jp/white-paper/)

- [![ネクストモード公式YouTubeチャンネル](https://nextmode.co.jp/assets/images/common/icon_youtube.svg)](https://www.youtube.com/channel/UCeW8ocoe9C3E0GOINh167MA)
- [![ネクストモード公式Xアカウント](https://nextmode.co.jp/assets/images/common/icon_x.svg)](https://twitter.com/Nextmode_Inc)

[English](https://nextmode.co.jp/en/)

- [NTTグループカスタマーハラスメント基本方針](https://group.ntt/jp/group/customer_harassment/)
- [就活ハラスメント防止方針](https://docs.nextmode.co.jp/nextmode_recruit_harassment.pdf)

- 運用アシスタント利用規約([AWS](https://docs.nextmode.co.jp/nextmode-unyo-assistant-aws-terms-of-use.pdf)/[Azure](https://docs.nextmode.co.jp/nextmode-unyo-assistant-azure-terms-of-use.pdf))
- [日中運用支援定型約款](https://docs.nextmode.co.jp/nextmode-nittyu-unyo-shien-terms-of-use.pdf)
- [定型約款](https://docs.nextmode.co.jp/nextmode-standard-contracts.pdf)

[プライバシーポリシー](https://nextmode.co.jp/company/privacy.html)

Copyright(c) Nextmode, Inc.

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "南栄樹",
    "url" : "https://info.nextmode.co.jp/blog/author/minami-eiki"
  },
  "dateModified" : "2024-06-17T09:40:27.254Z",
  "datePublished" : "2023-02-08T04:15:29.000Z",
  "headline" : "GitHub Gistを使ってHubSpotのブログにコードを表示させる｜Nextmode Blog",
  "image" : [ "https://info.nextmode.co.jp/hubfs/HubSpot.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://info.nextmode.co.jp/blog/hubspot-brog-gist",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://info.nextmode.co.jp/hubfs/nm_l_color.png"
    },
    "name" : "ネクストモード株式会社"
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://nextmode.co.jp/#organization",
  "@type" : "Organization",
  "alternateName" : "Nextmode, Inc.",
  "logo" : "https://nextmode.co.jp/assets/images/common/logo_white.svg",
  "name" : "ネクストモード株式会社",
  "sameAs" : [ "https://www.youtube.com/channel/UCeW8ocoe9C3E0GOINh167MA", "https://twitter.com/Nextmode_Inc", "https://info.nextmode.co.jp/" ],
  "url" : "https://nextmode.co.jp/"
}
```