HMLタグをブログ記事に記載する方法
HTMLの編集
</head> の上に下記のコードを貼り付けます。
- <!-- ex-code-prettify 追加 -->
- <link href='https://cyokodog.github.io/jquery.ex-code-prettify/jquery.ex-code-prettify.css' media='screen' rel='stylesheet' type='text/css'/>
- <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
- <script src='https://cyokodog.github.io/jquery.ex-code-prettify/google-code-prettify/prettify.js'/>
- <script src='https://cyokodog.github.io/jquery.ex-code-prettify/jquery.ex-code-prettify.js'/>
- <style type="text/css">
- .prettyprint.linenums {
- box-shadow: 32px 0 0 #f0f0f0 inset, 36px 0 0 #eee inset;
- overflow: auto; /* 横スクロールバーON */
- }
- pre.ex-code-prettify ol.linenums{
- margin-left:0px;
- padding-left:40px; /* 行番号領域-8px */
- }
- pre.ex-code-prettify ol.linenums li{
- margin-left:0px;
- color: #bebec5;
- line-height: 10px; /* 行間-8px */
- text-shadow: 0 1px 0 #fff;
- }
- .ex-code-prettify-contents{
- border:solid 1px #aaa; /* 罫巻色変更 */
- border-radius:10px; /* 罫巻角丸量+6px */
- word-wrap: break-word;
- overflow: auto;
- }
- </style>
- <script>
- $(function(){
- $('.code').exCodePrettify({tabToSpace:true,rawLabel : '全選択'});
- });
- </script>
以上で終了です。
記事内にソースコードを記載する方法
ブログ記事を編集するときに、「HTML」編集画面で、 コードを貼り付けたい場所で 以下のタグを使います。「書きたいコード」の所に書きたいコードを貼り付けるのですが、そのまま貼り付けるだけだとうまく表示されません。
ブログ記事にコードを記載する場合、
「<」を「<」に。
「>」を「>」に書き換える必要があります。
書き換える方法としては、辞書登録に登録するか、 自動で置換出来る便利なサイトで変換するかになるかなと思います。
私はこちらのサイトを利用しています。 とても便利です(⁎˃ᴗ˂⁎)
参考サイト様
もっと詳しく書かれています!
0 件のコメント:
コメントを投稿