前回、いいねボタンを作成後、記事を書く際に思った。
やっぱり行番号とか、コピーボタン、欲しいよな。
楽な方法とか、ないかなーと調べたら、まあうさブラザーズさんのページを見つけた。
これは便利そうだ！ さっそく導入する。
Google-code-prettify
（英語版Wikipediaでも無かったから、GoogleのGeminiに問うた）
「このライブラリはもともとGoogleによって公開されていましたが、現在はGitHubのGoogle Archiveにアーカイブされており、公式なメンテナンスは終了しています。しかし、今でもフォーク版が使用されたり、ブログなどで利用されたりしています」
だ、そうな。
FAQにプログラミング言語を指定する場合について書かれている。
機能拡張で様々な言語も対応するが、詳細は英文の説明、読んで。
が、指定しなくてもデフォルトで、C言語、Java、Python、SQL、HTML、XML、CSS、JavaScript、Bash、Makefilesなど、多くのプログラミング言語とマークアップ言語に対応。
Bloggerの テーマ>HTMLを編集 で、<head>内に以下を追加。
<!-- Google-code-prettifyを追加 -->
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"/>なお参考にしたウェブサイトや、多くの紹介ページでは、
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"/>
となっているが、RawGit はすでにサービス終了している。
今現在でも使えているのは、RawGitはサービス終了の際に既存のCDNキャッシュを削除せず、1年間のキャッシュ期間を設けていたようだ。それが続いているのかも？
Google-code-prettifyのStartedページどおりに設定すべきだろう。
Google-code-prettify のスキン(スタイル)は５種
prettify.css（これがデフォルト）
desert.css
sunburst.css
sons-of-obsidian.css
doxy.css
スキンに対応するには文末に ?skin= で指定。例）desertの場合。
<!-- Google-code-prettifyを追加 -->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"/> 行番号を入れて表示する場合のタグ。
<pre class="prettyprint linenums"><code>ソースコードを入れる</code></pre>この行番号の初期設定は５行ずつなので、以下の画像サンプルはCSSで１行ずつに変えている。それとコードのボックスの高さを指定した。それ以外は、いじっていない。
（CSSは記事の下部にまとめてある）
（CSSは記事の下部にまとめてある）
prettify.css（これがデフォルト）何もスキンを指定しないとこれ。
 |
| prettify.css 長いコードは横スクロールになる |
 |
| desert.css 長いコードは横スクロールになる |
 |
| doxy.css 指定無しでも折り返す |
サンプルタグとCSS
なお左側の行番号が見切れているスキンがあるが、CSSで修正できる。
私はコードボックスの高さを300pxに設定したので、行が長いと縦スクロールになる。これに横スクロールまで付けたくないので、CSSでコードの折り返しもしている。
HTML
<div id="code-box"><pre class="prettyprint linenums"><code>ここにコード入れる</code></pre></div>CSS
#code-box { max-height:300px; overflow: auto; }
/*コードの行番号*/
pre.prettyprint.linenums li{ list-style-type: decimal; } /* 行番号を1行ずつ表示 */
pre.prettyprint ol.linenums{ padding-left: 60px!important;} /*行番号の左が切れるのを修正*/
pre.prettyprint {white-space: pre-wrap;} /*コードの折り返し指定*/コピーボタンを付ける
最初は１行しかコピーできなかったり、あるいはペーストすると最後にボタンの名前の コピー が入っちゃったり。
最終的には、Geminiくんがこうしてくれた。javascriptは</body>の直前あたりがいいらしい。
クラス名は好きに変えちゃって。変えたらjavascriptの方（１ヶ所）も変えてね。
<script>//<![CDATA[
// ソースコードのコピーボタン用
document.addEventListener('DOMContentLoaded', () => {
const codeBlocks = document.querySelectorAll('pre.prettyprint');
codeBlocks.forEach(block => {
const copyButton = document.createElement('button');
copyButton.textContent = 'コピー';
copyButton.classList.add('code-copy-button');
block.style.position = 'relative';
block.appendChild(copyButton);
copyButton.addEventListener('click', () => {
// 1. コピーボタンを一時的に非表示にする
copyButton.style.display = 'none';
// 2. コードブロックのテキストを正確に取得
const code = block.innerText;
// 3. ボタンを元の状態に戻す
copyButton.style.display = 'block';
// 4. クリップボードにコピー
navigator.clipboard.writeText(code).then(() => {
copyButton.textContent = 'コピー完了！';
setTimeout(() => {
copyButton.textContent = 'コピー';
}, 2000);
}).catch(err => {
console.error('コピーに失敗しました:', err);
alert('コピーに失敗しました。');
});
});
});
});
//]]></script>CSS
/*ソースコードのコピーボタン*/
.code-copy-button {
position: absolute;
top: 5px;
right: 5px;
padding: 5px 10px;
background-color: #337ab7;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s;
}
.code-copy-button :hover {
background: #999;
opacity: 1;
}そうだ、今までの記事のコードもタグを直さなくちゃ。
Blogger改造記事はしばらく書かないだろうと思ってたのに、自分のために記しておく。
投稿
0 件のコメント:
コメントを投稿