ソースコードをハイライトするならPrism.jsが便利

-
ソースコードをハイライトするライブラリを探していたところ、初心者でも使いやすく、デザインがシンプルなPrism.jsを起用することにしました。プラグイン機能を指定し、拡張できるので便利です。以下、使い方をまとめました。

Prism.jsをダウンロードする

http://prismjs.com/download.html



出典：Prism.js



デザインと言語を選択

Themesはdefaultにしました。
Languagesでハイライトしたいプログラミング言語を選択します。



行のハイライトと行番号のプラグインを追加


Line Highlight とLine Numberを選択します。

JSファイルとCSSファイルをダウンロード


カスタマイズしたデータの容量の確認が上記に出ます。
シンタックスハイライトの表示を確認し、javascript(JS)とCSSファイルデータをダウンロードしてください。19.24KB と大変軽量です。



ファイルを各ブログでアップロード

※bloggerにはファイルをアップロードする機能がないのです…。
つまりダウンロードしても意味がない。WordPress等ならばアップロードできたり、プラグインがあったりと便利そうです。

Bloggerでの方法を探したのですが、分かりませんでした。
CDNを使用した方法でシンタックスハイライト表示して下さい。

BloggerでのPrismシンタックスハイライトはCDN利用がオススメ
基本的に、Prism 導入方法はCSSとJavaScriptのファイルをダウンロードして自分のサーバーにアップロードします。しかしBloggerにはファイルをアップロードする機能がないんですね…。ですからCDNを使用して、ヘッダに外部から読み込んで使用できるようにします...



Prismの設置


prism.jsを使用するために、headタグ内に読み込む記述を追加します。


prism.cssを<head>要素内に <style>要素で読み込ませます。
</head>の前に下記を置く。

<link href="themes/prism.css" rel="stylesheet" />



prism.jsは</body>前に下記を書き込んで下さい。

<script src="prism.js"></script>


Prismの活用


HTMLコード表示の際はエスケープを行う

htmlを表示させたい時は、「<」「>」「"」「'」「&」を「&lt;」「&gt;」「&quot;」「&#039;」「&amp;」に変換する必要があります。
自動でエスケープする機能はありません。

文字列をエスケープしてくれる変換サイトで毎回実施して下さい。

CSSは変換する必要はありません。


表示したコードの導入

<pre>要素の中に <code>要素があります。
<code>要素にclass属性で「language-xxxx」のように各言語を指定し、先ほど変換したコードを導入します。

<pre><code class="language-markup">導入したいHTML</code></pre>
<pre><code class="language-css">導入したいCSS</code></pre>
<pre><code class="language-js">導入したいJavaScript</code></pre>



Popular posts from this blog

コンビの漏れないラクマグを購入してみた♪使用感レビュー

-
Image
元々ピジョンのマグを使用していました。一番多くの方が持っているのではないでしょうか？ 我が子は基本コップ付きの水筒で飲んでいるのですが、外出時や夜間・早朝の水分補給のためにマグマグを飲んでいました。しかし、 ピジョンのストロー部分を何度も噛んでしまいボロボロに…！ もう３〜４回もパーツを交換しています。 そのため、今回新しいマグマグを探していたのです。コンビから新商品のマグマグが発売されたということで、「はじめてコップ」を購入してみました♪ 各メーカーのマグマグについてご紹介したいと思います。 ピジョンとの比較 ピジョンのマグは200ml、ラクマグは２４０mlと３４０mlの２種類があります。写真のラクマグは３４０mlです。ピジョンと比べて１４０mlもの差があるのですが、大きさはそんなに変わりはありません。 ラクマグの方が若干大きく見えますが、 重量はピジョンの方が重く感じます。おそらくピジョンには滑り止めがあるからでしょう。 ラクマグには滑り止めがないので、テーブルに置くとつるんと滑ってしまいます。赤ちゃんがバタバタしていると、手が当たってしまってよく倒れてしまうものです。滑り止めがある方が安心ではありますね♪ また、コンビが軽量と感じる理由としてはコップ本体部分がピジョンと比べて薄く感じます。しかし内側を触るとしっかり作りで厚みは十分でした。 洗い物はどちらも細かい…！ １日の終わりに毎回分解して洗うのですが、どちらも部品は細かいです。 ピジョンは コップ本体・蓋・スライド蓋・口元シリコン・パッキン・ストローと６つ。 （写真のピジョンは口元シリコンがないので少ないです…；） ラクマグは コップ本体・蓋・取っ手・口元シリコン・（ストロー）と4〜５つ。 商品によって各々違うのですが、 ラクマグの方がパッキンとシリコンが一体型になっているのでそれだけ大きいため、見失いにくいですね。 従来であればたくさんあり失くしてしまうことも多々あるので、数が少ない分だけ楽になります。 実際に使用してみた感想 今回「はじめてコップ」を購入してみたのですが、残念なことに容易には飲めません。 赤ちゃんが簡単に口に添えるだけ飲めます！とメーカーサイトに記載されていたので、 そっと口を添えればすぐに飲めると思ってい...
read more »

幼児や妊娠中・授乳中のママは精油を使用してもいいの？

-
Image
精油とは 精油はエッセンシャルオイル・アロマオイルとも呼ばれ、アロマテラピーやアロマセラピーで使用されています。アロマとは「芳香」のことで、香りを使って心身のケアを行うことを言います。 精油の選び方 精油は１００％植物由来のエッセンシャルオイルを選びましょう。 AEAJ表示基準適合認定精油（ブランドリスト） や、100％ Pure & Natural・Pure Essential Oilと記載がある精油であれば安心です。 また、購入時には「純度が植物由来100％」の精油・エッセンシャルオイルと記載があるか確認しましょう。合成フレグランスオイル等も同様に「アロマオイル」と記載されているため、必ずチェックして下さい。 精油の作用 アロマの香りを嗅ぐことで嗅覚経路に伝達し、心理作用として大脳にある海馬に伝わります。学習や記憶を司る海馬にて幸せな記憶と香りが繋がり、精神がリラックスします。 そして自律神経系の器官である視床下部にてホルモン分泌など促し、免疫バランスを整えます。血流増加しながら、各身体の部位に癒しの情報が伝わるのです。 以上のような精神的作用の他に、消化器系・筋肉身体の組織・呼吸器系・皮膚への殺菌などの身体的作用も挙げられます。また、ヒバなどの精油による防虫効果も期待できます。 アロマオイルの使用として芳香だけでなく、塗布してマッサージをすること（触覚作用）により、皮膚から浸透して老廃物を除去してくれます。 精油の副作用 良いことばかりの精油のようですが、元である植物成分が体に合わない場合、アレルギー症状が発症してしまったり、肌トラブルを起こすことがあります。 柑橘系エッセンシャルオイルに多く見られるのが、 光毒性 です。流布した皮膚が日光に当たると、火傷のような肌トラブルが起きることがあります。 また、ローズマリー・カンファー・セージ・ペパーミント・シダーウッド・フェンネルなどのケトン類を多く含む精油は 神経毒性 に注意が必要です。 ケトン類は鎮痛作用があります。他にも鎮静作用・粘液溶解作用（痰や鼻水の切れをよくする）などもありますが、強いショック症状が起きたり、手足のしびれなどの神経系の症状が発生する恐れはあります。 とくに乳幼児・妊娠中・授乳中のママ・高齢者・持病を...
read more »

Blogger目次を見出しと連動させて自動生成する方法

-
Image
ネットを閲覧している最中に、「次ページへ」が７つもある長いサイトに訪問したりします。欲しい情報がどこにあるのかもわからないし、各ページごとの検索になるので command＋F も何度もやらないといけない。 そこで目次を見出しと連動させて自動生成する方法をご紹介致します。 参考にさせて頂いたサイト Bloggerで目次と見出し番号を自動生成させるカスタマイズ方法 / 人気のあるBloggerブログの作り方 ※こちらでご紹介しているソースは、目次の連番と本文の「1.見出し」及び準見出し等が番号と連動しております。 例 目次 1.見出し 　準見出し に対して、以下が本文の表示です。 1.見出し ー本文ー ↑ 見出し ー本文ー 上記のようなスタイルを希望していたので、カスタマイズ致しました。 本ブログのような目次スタイルになります。 特に重要なカスタマイズ箇所 下記の箇所のchapNo削除したところ、本文「見出し」になったので変更。 変更前 toc += '<a href="#' + chapid + '">' + chapNo + $(this).text() + "</a>"; $(this).html(chapNo + $(this).html()); }); 変更後 toc += '<a href="#' + chapid + '">' + chapNo + $(this).text() + "</a>"; $(this).html($(this).html()); }); 実際挿入するタグは下記になります。（上記ソース変更済み） <script type='text/javascript'> //<![CDATA[ if (typeof(jQuery) == 'undefined') { document.write("<scr" + "ipt type...
read more »

親子で使える！日焼け止め厳選しました

-
Image
シワ・しみ・たるみ予防として日焼け止めは一年中季節問わず必須です。 今回は赤ちゃんがいる家庭で親子一緒に使えて石鹸やお湯で落とせる日焼け止めを紹介したいと思います。日焼け止めクリームの必要性については下記を参考にして下さい。 【日焼け止めを選ぶ基準とは？】美肌の近道を選ぼう 正直、私はこの数年間メイクをせずに過ごしていました。 なんと日焼け止めクリームも塗らずに、洗顔後の化粧水も怠る日々… 理由は単純に面倒だったのです。 まず、顔に塗ったファンデーションが服やタオルに付着するのが嫌でメイクをしなくなりました。 それ... オススメ日焼け止めクリーム８選 基本的に３歳以下の幼児、妊婦さん、授乳中のママ用に厳選したので、精油不使用です。また、ご紹介する日焼け止めは基本、石鹸で落とせます。しかし大人はクレンジングクリームでしっかりめに落とすことを推奨いたします。 ジェルタイプは敏感肌には刺激になるDPGやPGなどアルコール成分が高配合になっている場合があり、汗などで流れ目に入るとしみてしまいます。 また伸びがよく使用感が良い日焼け止めは効果が薄くなってしまいます。クリームタイプを選びましょう。 オルビス サンスクリーン(R)フリーエンス SPF30 PA+++ オススメ度  ★★★ ★ ☆ 成分 水、ジフェニルシロキシフェニルトリメチコン、ＢＧ、グリセリン、シクロペンタシロキサン、酸化チタン、ＰＣＡ－Ｎａ、ポリグルタミン酸Ｎａ、乳酸Ｎａ、ヘチマエキス、トコフェロール、ジメチコン、含水シリカ、ハイドロゲンジメチコン、水酸化Ａｌ、ポリアクリル酸Ｎａ、ベヘニルアルコール、キサンタンガム、ペンタステアリン酸ポリグリセリル－１０、ポリグリセリル－３ポリジメチルシロキシエチルジメチコン、トリステアリン酸ポリグリセリル－１０、ステアロイル乳酸Ｎａ、クエン酸、ココグリセリル硫酸Ｎａ、メチルパラベン、プロピルパラベン 無油分・無香料・無着色・紫外線吸収剤不使用・ハイブリッドルーセントパウダー配合・立体スキンベール処方で敏感肌の方にも使える日焼け止めです。使用感はなめらかで素肌感覚♪ オルビス サンスクリーン(R)フリーエンス 50ml ORBIS poste...
read more »

【手作り・開封後の賞味期限は？】調味料・食品・おかず保存期間まとめ

-
Image
開封後の食品を、賞味期限の日付まで保存していませんか？ 印字されている日付は未開封の状態で品質を保つ期限です。 お腹を壊さない為にも、今一度冷蔵庫の中身をチェックしましょう。今回は開封後の期限をメーカーに確認し、一覧にまとめてみました。注意点を記載している項目もあります。 調味料 醤油 冷蔵　１ヶ月 〜１.５ヶ月（商品による） 酢  冷蔵　１年 みりん 常温　３ヶ月 冷蔵　６ヶ月 料理酒  常温　２ヶ月 味噌 冷蔵　３ヶ月 塩 無期限 一度冷蔵で保存したら湿気てしまうので冷蔵のまま保管 ・ずっと常温も◯ ※容器に指入れるのNG 取り分けてから、ひとつまみとる 岩塩・海塩(100%食塩ナチュラルなもの) 常温で保存 (湿気が多い時期は冷蔵庫が◎)  ※冷蔵庫から常温へ移動しておいても◯ 油 常温　１～２ヶ月 オリーブオイル 常温　１ヶ月 鶏がらスープの素 冷蔵　２〜３ヶ月 とんかつ中濃ソース 冷蔵　２ヶ月 ウスターソース 冷蔵　３ヶ月 お好み焼きソース 冷蔵　１ヶ月 オイスターソース 冷蔵　１ヶ月 焼肉のたれ 冷蔵　２週間 豆板醤 冷蔵　１年 コチュジャン 冷蔵　６ヶ月 ケチャップ 冷蔵　１ヶ月 マスタード 冷蔵 記載期限まで レモン汁 冷蔵　１〜２週間 ドレッシング  冷蔵　１ヶ月 チューブわさび・からし 冷蔵　３～４ヶ月 チューブ生姜  冷蔵　１ヶ月 赤缶カレー粉 常温　記載のある賞味期限まで （製造から２４ヶ月～３６ヶ月） 食品 牛乳 冷蔵　２〜３日 豆乳 冷蔵　４〜５日 ヨーグルト 冷蔵　１週間 粉チーズ・パルメザン 常温　１ヶ月（冷蔵 1ヶ月よりも早め） 冷凍　１～３ヶ月 カッテージチーズ 冷蔵　１週間 バター 冷蔵　２週間（冷凍 1ヶ月） パルメザンチーズ 常温　１ヶ月 (冷凍 1～3ヶ月) ピザ用チーズ 冷蔵　１週間（冷凍 1ヶ月） スライスチーズ 冷蔵　２週間（冷凍１ヶ月） ヤギミルク 常温　...
read more »

離乳食にも！3分でお粥ができる栄養豊富なオートミール

-
Image
出産してから数ヶ月が経過しました。毎朝の洗濯掃除を一通り済ませ、息子がひとり遊び中やお昼寝中の午前に夕食を10分～15分で作る。少しでも勉強や育児について調べたいので、時間との勝負です。朝食や昼食はパッと作れるトーストや白米を食べています。でも栄養面でいえば物足りない … 色々調べた結果、ロールドオーツで美味しいご飯が時短料理できる事を知り、実践してみました。 ロールドオーツとは オーツ麦のもみ殻を取り除いたオートグローツ蒸してから平らにし、乾燥させたオートミールです。加熱処理され薄くなっているので調理しやすいのが特徴です。 玄米よりも食物繊維約3.5倍、カルシウム約5倍、鉄分約2倍！ 栄養価が高く、食物繊維とミネラル、カルシウムが豊富に含んでいます。低GIなので血糖値上昇を抑制します。糖質制限にも適しており、ダイエットにも効果抜群ですね。水に溶けやすい水溶性の食物繊維なので、水分を吸収しコレステロールと共に排出してくれる作用があります。つまり便秘にも良い！ 私は妊娠前からひどい便秘ですが、オートミールを食べてから快腸続きです。 Bob's Red Mill, オーガニック, 極厚ロールドオーツ 32オンス (907 g) オーガニック食品や生活用品はいつもiherbで購入しています。 日本で買うよりも1/3の値段なのでお得です。 成分 オーガニック全粒粉オーツです。 ナッツ、大豆、小麦、ミルクを使用する施設で製造されており、防腐剤と化学添加剤は含まれていません。 USDA、QA認定のオーガニック食品なんですね。 Bob's Red Millは1日に48g以上の全粒穀物を摂取を推奨しています。 USDAの栄養ガイドラインでは、1日の推奨全粒穀物を1サービング16グラムを3回と定めているのですが、Bob's Red Millのオーガニック極厚ロールドオーツ1食分でほぼこの3回分の全粒穀物が摂取できます。 オートミールの保存方法 冷蔵1ヶ月 （メーカーに確認したところ、普通のオートミールなら半年保つ製品もあるようですが、Bob's Red Millはお米と同じ感覚で食べきった方が良いそうです。） ...
read more »