Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

ソースコードハイライター..\Prism.js/..

やっとの思いで見つける&導入する事ができました。やっぱりJavascriptだったか✨(⁼̴̀ૢ꒳​⁼̴́ૢ๑)

 

 

 

Prismjs.com

http://prismjs.com/index.html

f:id:DDramonQ:20160819204817j:plain


試しにコードを入力してみました★ プレビューで確認できました。嬉しい(´つヮ⊂)✨
#grad3-1 {
   height:300px;
   background:linear-gradient(135deg, #00c6c9 50%, #00bdef);  
   text-align:center;
   font-family:sans-serif;
   padding:25px;
   font-size:30px;
   color:#333939 }
#grad3-2 {
   height:300px;
   background:linear-gradient(135deg, #00c6c9, #00bdef);  
   text-align:center;
   font-family:sans-serif;
   padding:25px;
   font-size:30px;
   color:#333939 }





何を隠そう、実は前回までの、コードの色付け(ハイライト)は、手動でした(´>∀<ˋ๑)>ww
それっぽくしたくて、手動で体力まかせだったので、超絶時間かかりました…( ¯∀¯٥)
でもさすがにこれからずっとはキツイな~、多分自動化するプログラムがあるんだろうな~と思って探しました?

ただ、HPが英語 +  Javascript ということもあって実装までに(スタイルが適用されるまで) 少々手こずりました::(っ`ω´c)::?w
コードを入力しているのに、ハイライトされないよ…( ³ω³ ).。o?? みたいなww

何とか無事できました?

本当は「ハイライター作りたいなぁ」と思っていたのですが、jsのソースコード見て断念しましたまだ早過ぎたようです( ³ω³ ).。o?ww



highlighter.js

https://highlightjs.org

f:id:DDramonQ:20160819210230j:plain

 

 

こちらもソースコードハイライターになります。Prism.jsよりも有名?老舗?なのかもしれません。google検索では、こちらの方が上位にヒットしていました?

 

 

 

 

どちらを使うかは好みもあるかと思います。僕は

- CSS-Trickさん

- SitePoint</>さん

 

が使っておられるというのに連られて、結局Prism.jsにしました(´つヮ⊂)✨♪w

 

f:id:DDramonQ:20160819210513j:plain

 

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️