ブログ記事中のスニペットを外部参照する
[展開する] 上を表示するためのHTMLは次の通りです． <pre><code class="language-cpp" src="./sample.cpp"></code></pre> 端的には<pre><code>にsrc属性を追加します． 動機 最近はもっぱらラップトップでブログを書くわけですが，画面が小さく1，エディタとプレビューでいっぱいいっぱいになってしまいます．こんな状態でスニペットを含むMarkdownを開いた光景は，JR武蔵小杉駅の南武線ホームを彷彿とさせます． スニペットを省略できれば全体の見通しが良くなることはもちろん，メンテナンス性の向上(?)も期待されます．どっかの数学者も言ってましたね．「ソースコードは分割せよ」って． 流れ jQueryを読み込む DOMの書き換え Markdown jQueryを読み込む 今回はjQueryを使うことにします．<head>内で読み込み． <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <head> DOMの書き換え [展開する] メモ indexと書いたが実際は何を指しているのか不明．なんだろう． Markdown 今回の記事のソースコードはこんな感じ． --- title: "ブログ記事中のスニペットを外部参照する" date: 2019-03-27T10:00:00+09:00 draft: false topics: ["Programming"] tags: ["jQuery", "HTML"] --- <pre><code class="language-cpp" src="./sample.cpp"></code></pre> 上を表示するためのHTMLは次の通りです． ```html <pre><code class="language-cpp" src="./sample.cpp"></code></pre> ``` 端的には`<pre><code>`に`src`属性を追加します． ## 動機 最近はもっぱらラップトップでブログを書くわけですが，画面が小さく[^1]，エディタとプレビューでいっぱいいっぱいになってしまいます．こんな状態でスニペットを含むMarkdownを開いた光景は，JR武蔵小杉駅の南武線ホームを彷彿とさせます． スニペットを省略できれば全体の見通しが良くなることはもちろん，メンテナンス性の向上(?)も期待されます．どっかの数学者も言ってましたね．「ソースコードは分割せよ」って． ## 流れ - [jQueryを読み込む](#jQueryを読み込む) - [DOMの書き換え](#DOMの書き換え) - [Markdown](#Markdown) ## jQueryを読み込む 今回はjQueryを使うことにします．`<head>`内で読み込み． ```html <head> <script src="https://ajax.