GitLabを使用してソースコードを他サイトへ埋め込む方法
概要
GithubのGistのようにGitLabを使用して、ソースコードを他サイトへ埋め込む方法を解説する。
実演
以下のように、ソースコードをHTML埋め込むことができる。
ファイルの中のコマンド等に、ファイルの拡張子に合わせて色が付く。
手順
1. スニペットの作成
上の「＋」プルダウンメニュー押下で表示される「New Snippet」を選択しクリックする。
リポジトリの中でスニペットを作る場合は、そのリポジトリは公開リポジトリである必要がある。
自動的に以下の画面が開く。画面が縦に長いため、上半分の図と下半分の図に分けて掲載した。
ここで以下の内容を記述する。
- Title
- Description（必須でない）
- ファイル名
- ファイルの内容（コード等）
「Visibility Level」で「Private」か「Public」を選択し、[Create Snippet]ボタンをクリック。
以下のように、今回作成したスニペットのページが開く。
ここで、「Embed」プルダウンメニューからEmbedのコピーマークをクリック。
このとき今回作成したスニペットのHTML埋め込み用タグがクリップボードにコピーされる。
2. ページへの貼り付け
手打ちHTMLに貼り付ける場合よりWordpressに貼り付ける場合のほうが戸惑うことが多いことを想定し、ここではWordpressに貼り付ける場合の説明をする。
ブロック右の[＋]ボタンから「カスタムHTML」を選択。
以下のような枠が表示される。その中にクリップボード上のHTML埋め込みコードをペーストする。
プレビューを押すと以下のように表示される。
まとめ
- GitLabにも、GithubのGistのような機能が存在する
- GitLabからソースコードをHTMLに埋め込むことは簡単
広告
あまり見かけないGitLabの本。
リンク