Engineerの研鑽

メインはプログラミング系ブログ(本の要約とかもします)

質問はCONTACTやコメントでお願い致します。

【はてなブログ】プログラムのコードを色付きで貼り付ける

こんにちは! ゆきぽんずです

 

はてなブログでプログラムのソースコードを色付きで貼り付けるのに困っていませんか?

 

色を付けずにコードを貼り付けることはできますが、なんか味気ないですよね

 

今日はその問題を解決していきます

 

色々解決策を載せてもわかりにくいと思うので1つだけ紹介します

 

私が一番オススメするのは、はてな記法でコードをコピペすることです

はてな記法でのコードのコピペ

こちらが実際の完成図です

こちらの右側のコードをコピペすると、色のついたコードを記載することが出来ます

はてな記法でのコードのコピペ

 

こちらが実際の色付きのコードです

さらにはデフォルト(標準)で下のスクロールバーもつけてくれます

(function() {
  module.exports = function(robot) {
    return robot.hear(/(.*)/i, function(msg) {
      var luisApiKey, luisURL, userComment;
      userComment = encodeURIComponent(msg.match[1]);
      luisApiKey = process.env.HUBOT_LUIS_API_KEY;
      luisURL = "https://westus.api.cognitive.microsoft.com/luis/v2.0/apps/983149a3-f0cf-4005-9097-a65a602bb1fe?verbose=true&timezoneOffset=-360&subscription-key="+ luisApiKey +"&q="+ userComment +"";
      return robot.http(luisURL).get()(function(err, res, body) {
        if (err) {
          return res.send("Encountered an error :( " + err);
        }
        body = JSON.parse(body);
        return msg.reply("" + body['entities'][0]['entity']);
      });
    });
  };

}).call(this);
 

それでは実際に作成するための手順を紹介していきます

はてな記法で書く用の記事の下書きを作成します

(誰でも出来るように画像も貼っています)

 

以下の手順で作成してください

【New Entry】を押して新しい記事を作成

New Entry

【Edit WYS/WYG】の横のVをクリックして、出てきたはてな記法をクリック

Edit はてな記法

はてな記法】で記入

はてな記法

実際にはてな記法でコードを記入したとき

こちらのサイトを見ながら、|言語名|の言語名を決めてください

ソースコードを色付けして表示する(シンタックスハイライト) - はてなブログ ヘルプ

まとめ 

 今日は、はてなブログでプログラムのコードを色付きで貼り付ける方法を紹介しました

 

正直先人の方が詳しく説明されているのでいらないかなっとも考えましたが、最新版ということで紹介しようと思いました

 

良かったら参考にしてください

 

今日もブログを読んでくださりありがとうございます

 

あなたのそばにゆきぽんず