還暦過ぎたエンジニアの挑戦

いくつになっても好奇心だけは忘れないエンジニア Hikaruのブログ

MENU

Qiita風にコードをクリップボードにコピー【リメイク版】

以前、
Qiita風にコードをクリップボードにコピーする
という記事を書きましたが、今回はそのリメイク版です。

 

前回のバージョンでは

  • 一つの記事の中に、複数のコードを書くと正しく動作しない
  • シンタックスハイライトさせると、その装飾用のコードまでコピーされてしまう

という問題がありました。
(え~、ひどいじゃん😠。 はい、ごめんなさい😓)

シンタックスハイライトとは、
読みやすくするためにコードに色を付けるなどの装飾をすることです。

生のコードがこれだとすると

SELECT count(TABLE_NAME) 
FROM INFORMATION_SCHEMA.TABLES 
WHERE TABLE_SCHEMA = {データベース名};  

シンタックスハイライトしたコードはこんな感じ

SELECT count(TABLE_NAME) 
FROM INFORMATION_SCHEMA.TABLES 
WHERE TABLE_SCHEMA = {データベース名};  

この方が、わかりやすいですね。

今回はその点を改良して、
シンタックスハイライトしたコードでも
記事内に複数のコードがあっても
ワンクリックでコードをコピーできるようにリメイクしました。

こんな感じです。

SELECT count(TABLE_NAME) 
FROM INFORMATION_SCHEMA.TABLES 
WHERE TABLE_SCHEMA = {データベース名};  

 
 


はてなブログで使うには

はてなブログはコードのシンタックスハイライトに対応しています。
(公式のヘルプにあります。詳しくはこちらを

Hikaruの思いとしては、、、

せっかくきれいにコードを紹介できるような記事が書けるのですから、
一歩踏み込んで、簡単にクリップボードにコピーできるような機能があるといいな
というのが発想です。

簡単ですので是非使ってみてください

最初にJqueryを使えるようにしておきます
  1. ブログの管理画面の「デザイン」を開きます

    f:id:hikaru217:20200627141901j:plain
    デザイン

  2. 「カスタマイズ」の中にある「ヘッダ」を開いて、
    「タイトル下」までスクロールします

    f:id:hikaru217:20200627141911j:plain
    Jqueryの読み込みをここへペースト

  3. 「このあたりをクリック」したら、下のコードをコピーして貼り付けてください。

<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.min.js"></script>

記事を書くとき
  1. コードを表示したい箇所にこの下のコードをコピペし、
    「{ここにコードを書く}」という部分に実際のコードを入力してください。
<div class="copy1">
    <div class="copied" style="display:none;">Copied!</div>
    <div class="showCopy">
        <span class="material-icons" style="display:none;">
            <span class="toCopy">file_copy</span>
        </span>
        </button>
    </div>
    <div class="copyMessage">
        ```
        {ここにコードを書く}
        ```
    </div>
</div>
  1. コードの言語を指定すると、はてなのルールでシンタックスハイライトされます。

 
 


編集モードには注意して

この記事は、
はてなの編集モードが「Markdown」であることを想定して書いています。

はてな記法」で編集しているときは、同様にコードをコピペして使えますが、
「みたまま」で編集しているときは、「HTML」タブに切りかえてから貼り付けて使用してください。

コードの書き方

も、編集モードによって違います
Markdownモードでは

```{ここにコードを書く}```

という部分を

HTMLモードでは

<pre> {ここにコードを書く}</pre>

はてな記法では

>|| {ここにコードを書く}||<

という書式で書く必要がありますので注意して読み替えてください。

 

記事の最後に忘れずに

記事を書き終えたら、記事の最後に下記の2行のコードをコピペしてください。
コードをクリップボードにコピーするスクリプトスタイルシートです。

<link href="https://cdn.yutenji.biz/css/copy1.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.yutenji.biz/js/copy1.js></script>

このブログのCDN*1からのダウンロードにしていますが、
スタイルなどを変更したいときは
ご自分のブログやサイトに読み込んで修正してください。

 

Hikaru

*1:CDNとは「Content Delivery Network」の略で、要するに素材などを配布するためのサイトです