ブログ記事にソースコードを載せたい（未解決）

はてなでブログを始めることにしました。特にこれといった意気込みがあるワケではありません。
きっかけということでは、前からｇｏｏブログでくだらないことを細々と書いていたのですが、ちょっと気になることがあったのです。

ワタシが書くのはジャンルは雑多で、内容はどうしようもないことばかりなのですが、その中で遊びでやってるＰＣ系の話が出ることがあります。
真面目な方がやってる技術系のブログを見ると、ＰＣのコマンドやソースコード、処理結果の例示（コード表記というのでしょうか）がとてもキレイに書かれています。ワタシも同じように書きたい。え？ でもどうやってやるん？

Install Ruby On Rails on Ubuntu 18.04 Bionic Beaver | GoRails

  勝手にリンク貼っちゃマズかったらｻｰｾﾝ

コマンドを示してる箇所がありますね。こんな感じに文字背景色を変えたり、枠外にはみ出たところはスライドバー（スマートフォンならスワイプ？）で動かせるようにしたい。

よく見る表現ですし、当たり前のように登場しているので、画像貼り付けレベルで簡単にできるのかと思いましたが、まったくわからん。ヤフってもすぐには出てきません。そもそも、このコマンドというかターミナル画面を貼り付ける行為を何と言えばいいのかがわからないので検索しようにも要領を得ません。

技術系ブログをたくさんあたって、そういった表現をしている事例を研究してみましたが、htmlソースを見てもいまいち参考になりませんでした。

そんなときに気づいたのは、技術系ブログははてなブログが多い、技術に明るい人たちがはてなを選ぶ理由があるのではないか？ もしかしたらはてなブログには例えばコマンド貼り付けが簡単にできるような機能があったりするのでは？ そうか、ｇｏｏブログがショボかったのだな！（完全な思い込みによる冤罪）

お試しではてなブログを開設しました。10年くらい前に作ったカビの生えたアカウントを掘り起こしてきました。（よくそんなの残ってましたね）

勝手に盛り上がって期待していた都合のいい機能ははてなブログにもありませんでした。いやワタシのことだから見落としがあるかもしれないですが、たぶんそのような独立した機能はなかったと思う。

それほど万人にニーズのある表現ではないのか。たしかに技術系の記事でしか見かけないですね。それなら機能として用意されてなくても仕方ないですが、皆さんはどうやって実現させているのだろう。
この段階で、ｇｏｏブログがとりわけショボいのではないことが判明。疑ってｽﾐﾏｾﾝ。。

コード表記、で検索すると、htmlの<code>タグで囲めばいい、とあります。やってみました。

$ rake db:migrate

これでいいのか。ほんのり背景色は変わったしタグ自体は効いてるみたいだけど、やりたいのとはなんか違うような。

文字背景色を変える。これもヤフったら出てきます。cssで操作するんですか。コマンド文字列を<div style="width: 50%; height: 60px;background-color:#c0c0c0;"> と </div>で挟みました。

$ rake db:migrate

微調整をしてないのでアレですが、それを置いておいても、なんかこう、背景色はついたんだけど、う～ん。codeタグでやったほうが美しいかも。

はてなブログの投稿フォームを見ると、はてな記法とか、Markdown形式とかありますよね。Markdown形式？そうか、それか！！

GitHubやいろんなマニュアルの記法として使われてるのは知ってましたが、個人的に縁がないなとスルーしてました。今回この事案でほんの少しだけ勉強したんですが、構文に色がつけられたりしただけで、それはそれで良かったのですが、ここじゃない、、とさっさと撤収しましたw

山歩きであやうく怪しい道を延々とさ迷うところだった、といった感じでしょうか。だっていくら頑張ってもスライドバー出てこないですし。。

とりあえず既存のブログをそれっぽくしてみました。

もうスライドバーはあきらめて文字背景色だけいじってます。でも美しくないなぁ。

【Python入門】format関数で文字列の書き方 | プログラミング教室情報サイト【プロナビ】

これだ！見やすいし色つきだし、スライドバーもあります。フルサービスという感じですね。これがやりたい。別のとこで生成したモノを貼り付けてるのかなぁ。どうやってやるんだろう？

CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方 | コリス

css、スクロールと来たのでズバリの記事かと思いましたが最新機能の紹介でした。あぁでもコードの例示がいい感じにされてますね。新機能ではなく、このコードの貼り方の説明をして欲しいんじゃがw そんな愚問をサイトの方にぶつけるワケにもいかないしなぁ…

ブログ記事にまでしてるのに、解決法を示さず疑問形で終わるというw いや、ホントにわからないのです。識者にしたら即答レベルなんだろうか。どんな形式でもいいので誰か教えてください。