ソースコード表示した時にCOPYボタン設置

ソースコードの表示もお洒落

いや、お洒落ってかカッコいい

自分も素人ながらカスタマイズした時に

記事アップしてソースコード紹介してますが

ＣＯＰＹボタンがないのは不親切だな、、、

って事でＣＯＰＹボタン設置しました

参考にしたサイト

まぁ、そりゃ、まずはふじやんさんのパク、、、参考にしようと思うわなぁ
※ウチも使ってるBloggerのテーマF-lightの製作者

highlight.js を導入しました | ふじろじっく

ソースコードの表示を見栄え良くして、便利なコピーボタンも付けました。

fujilogic.blogspot.com

なんか文字の色も変わっててかっちょいいよねぇ

ここで出てくる highlight.js ってのを自分も導入しようと思ったんですが

バージョンがどうとか、、、バージョン変わってコード変えたとか、、、

そんなのは素人には無理！！

却下！！

Google先生に聞いてみるも、どうも面倒くさいのばかり

ChatGPTに聞いても素人が聞いても解らない事が出てくる

流石に人間に聞くようには話が進まない

とはいえ、、、ChatGPT結構便利です

CSSとかを貼り付けると素人には判らない内容を説明してくれるので助かってます

まだまだ何を言ってるんだ？って事の多いChatGPTですが、プログラム等に関しては正しい答えを返してくれているんじゃないでしょうか？

その答えが正しいかどうかの判断が素人には出来ないのでテストサイトで試してからここに導入したりしてます

で

カッコいいコード表示は諦めて、、、

COPYボタンだけなら簡単に設置できないかな、、、

ソースコード表示にコピーボタンを実装する（Clipboard API 対応版）

ブログやサイトなどでのソースコード表示に、 highlight.js や Google Code Prettify 、 Prism などのシンタックスハイライターを用いたり、素の pre 要素と code 要素を使っている方は多いと思います。 そのよう...

mizunosame.blogspot.com

ふじやんさんも紹介されていたmizusameさんの記事を見てみると、、、

これだ！！

COPYボタン設置

導入方法は基本的にmizusameさんの記事を見てください

COPYボタンも幾つか種類を置いてくれてますよ

一応、BloggerテーマF-lighでの導入方法、自分が使用しているCSS、スクリプトはアップします

これにCOPYボタンを設置します

コードだよ！！　COPYボタン設置でCOPYが楽になったよ！！

COPYボタン設置でCOPYがワンクリックで出来るようになりました

pre {
  position: relative;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--dark-bg);
  color: var(--color);
  margin: 0em 0;
  padding: .5em;
  text-indent: 0;
}
pre code{
  display: block;
  margin: 0;
  padding: 2em 1em 1em;
  max-height: 500px;
  line-height: 1.4;
  overflow: auto;
}
.copy-button{
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  margin: 0 auto;
  padding: 0 1em;
  height: 24px;
  border: none;
  line-height: 1;
  font-weight: bold;
  background: #666;
  color: #fff;
  cursor: pointer;
}
.copy-button:hover{
  background: #999
}

/*==== コード ====*/
pre {
  position: relative;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--dark-bg);
  color: var(--color);
  margin: 3em 0;
  padding: .5em;
  text-indent: 0;
  line-height: 1.3;
  overflow: auto;
  max-height: 500px;
}

 <script>//<![CDATA[
// コピーボタン作成用コード
(function(d){
  const pre = d.querySelectorAll('pre');
  if(pre.length == 0){
    return
  }
  for(let i = 0; i < pre.length; i++){
    const btn = d.createElement('button');
    btn.className = 'copy-button';
    btn.textContent = 'COPY';
    pre[i].insertBefore(btn, pre[i].firstElementChild);
    btn.addEventListener('click', copy_code, false)
  }
})(document);

// コピー機能用コード
function copy_code(){
  const code = this.nextElementSibling.innerText;
  if(navigator.clipboard){
    navigator.clipboard.writeText(code).then(() => {
      this.textContent = 'COPIED';
      setTimeout(() => {
        this.textContent = 'COPY'
      }, 1000)
    }).catch(e => {
      alert('コピーできませんでした\nお手数ですが手動でコピーしてください\n\n' + e.message)
    })
  } else{
    alert('このブラウザは Clipboard API 非対応です\nお手数ですが手動でコピーしてください')
  }
}
//]]></script>

※マージンとか時間とかCOPYの文字を小文字から大文字に変更とかしてます

  <pre><code>ここにコードを記述</code></pre>

HTMLはコレです

過去にこれで書いてたソースコード全てに適用されるので書き直ししなくて良いですよ

Bloggerなら、そのままコピペで設置できる筈です

Blgger以外のブログサービスにも設置できますが少しスクリプトが違います

COPYボタンも幾つか種類を置いてくれてますしmizusameさんの記事を参考に導入してみてください

HTML特殊文字変換

ブログ記事にコードを書いても表示されない、どうなってんの！？

って場合は特殊文字を変換する必要があります

変換してから

<pre><code>ここにコードを記述</code></pre>

で、コードを書けば表示されます

↓がコピーボタンもあって便利です

HTML特殊文字変換 - むぎねこ道具箱

HTML特殊文字のエンコード・デコードを行います。

mugineko.com

その他のカスタマイズ

出来る範囲でちょこちょこイジッてます

↓にまとめてます

ZEROからF-lightへBloggerテーマ変更 | Trekking from Kochi

BloggerのテーマをZEROからF-liteへ変更、手直し中です

kochimountaingo.blogspot.com