FC2ブログ

Welcome to my blog

スポンサー広告

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログランキング参加中

見たらクリックしてもらえると、とっても嬉しいです!!
HTMLとかのWeb関連

ウェブページに行番号付きのソースコードを貼りたい

0
どうも!しゅんごんです。

今の時代、僕みたいな素人でもプログラミングなどの勉強や情報を得ることが簡単にできます。
多くの方がわかりやすく自身のブログやサイトで解説してくれて、簡単な内容であれば専門書などを買うこともなく解決できます。
僕も多くの方の知恵をお借りして日々勉強しているのですが、人間は使わないと物忘れをしてしまうものです。
忘れてしまったら、再度解説しているサイトに行けば解決できますが、そのサイトが閉鎖…なんてこともしばしば。
ならば自分のブログもメモ代わりにすれば良いではないか!

しかし、ここでひとつの問題が浮上…。
それは、HTMLのタグが優先されてしまい、思ったとおりに表示が出来ない問題です。
例えば、改行をしたい場合は<br>というものをつけないと改行できません。
しかし、ソースコードを記事に貼り付ける場合、大概はコピペですし長いソースの時だといちいち<br>を入力するのも面倒です。

そこで、コピペしたものをそのまま表示するためのHTMLの要素も用意されていて、以下のようにすればソースコードも簡単に貼り付けることが出来ます。

<pre><code>ここにソースコード</code></pre>

<pre></pre>という要素と<code></code>という要素を使えば出来るみたいです。
この要素についてちゃんと知りたい方は解説されているページのリンクを貼っておくので参考にしてください。
ちなみに僕も見ましたが、う〜ん、よくわかんない(笑)
多分、2つを組み合わせればそのまんまのレイアウトで貼り付けることが出来ますよ〜ということだと思います。
pre要素のおかげで<br>をいちいち書かなくても改行できてるのかな?

これでいい感じになると思いますが、長いソースコードだと行番号も欲しくなりますよね〜。
一部の文字列を探すためには行番号があったほうが見つけやすいです。
ここで、自分のブログを構成しているHTMLの<head></head>内に以下を追加しましょう。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
僕と同じFC2ブログを使っている方はテンプレートのカスタマイズから出来ます。
他のブログサービスの方でもテンプレートだとかブログデザインの変更をHTMLやCSSを弄れるのであれば実装できると思います。
これはGoogleが作ったjavascriptのライブラリを読み込んでいます。
何言ってるのかさっぱりですが、要するにこれが行番号を表示できるような環境を作るために読み込むものだと思えば良いと思います、多分。
HTMLの編集が完了したら、以下のようにすればソースコードを表示できます。

<pre><code class="prettyprint linenums">ここにソースコード</code></pre>

これで行番号も表示できるはずです。
なんかプログラミングができる人のブログっぽくていい感じになりました( ・´ー・`)どや

2017/02/25 一部修正

参考サイト

ブログランキング参加中

見たらクリックしてもらえると、とっても嬉しいです!!

- 0 Comments

There are no comments yet.

Leave a reply

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。