プラグインを使用せずPrism.jsでコードをハイライト表示する | まるっと。
右上のDOWNLOADボタンをクリックする Compression level:（圧縮レベル）を選択する 下の縮小版を選択します テーマ（Themes）を選択する テーマ名をクリックするとデザインサンプルが確認できます 言語を選択する 必要な言語にチェックを入れます プラグインを選択する プラグイン名をクリックするとサンプルが確認できます 私が選んだものです Line Highlight 指定した行の色を変える Line Numbers 行番号を振る Previewer: Color（Previewer: Base）カラーをポップアップ表示する JSとCSSをそれぞれダウンロードする 画面下のボタンをそれぞれクリックしてローカルに保存します サイトで使えるようにする ファイルをアップロードする 保存した「prism.css」と「prism.js」をサーバーの子テーマ内にアップロードします
beautyOfCode: jQuery Plugin for Syntax Highlighting
UPDATE: Support for Syntax Highlighter 2.0 + jQuery Listed + bitbucket Repository The Syntaxhighlighter by Alex Gorbatchev is the best I have seen so far. As you see in this post, wordpress.com uses it, too. But the required syntax is not xhtml-compliant (name on pre is forbidden). In order to enable compliant xhtml I had to rewrite a small part anyway, so I just made a small jQuery-Plugin that ju
Creamo – ゲーム開発
日本は世界に知られるゲーム大国でもあり、「スーパーマリオ」「ドラゴンクエスト」「どうぶつの森」などなど、これまで数々の世界的ゲームを生み出してきています。そんなゲームを生み出す「ゲームデザイナー」。必然的に人気の職業でもあります。 ゲームデザイナーは「ゲームプランナー」とも呼ばれ、ゲームの基本設計（＝開発）をする仕事です。広範囲の開発技術や知識を要するだけでなく、ゲームの流行にも敏感でなければいけません。ゲーム設計は高度な技術を要しますが、一つの大きな世界観を生み出し世界に発信できる可能性がある面などは、やりがいのある仕事といえるでしょう。 キャラデザインは別の職業 ちなみに、ゲームデザイナーはゲームの登場人物のキャラクターデザインをする仕事のように勘違いされることもありますが、それは勘違い。キャラクターデザインをするのは、グラフィックデザイナー（CGデザイナー）の仕事となります。 ゲーム
[Blogger] beautyOfCode を導入しよう
Perl や JavaScript のコードをブログやウェブページで例示しなくてはいけなくなったときに "読者が理解しやすい形で表示させたい" と思ったことがきっとあると思います。そんなときに役に立つのが シンタックスハイライトです。シンタックスハイライトを利用するとコードを各種エディタのように色分けすることで読者の理解しやすい形で表示させることが出来るようになります。このようなシンタックスハイライト機能を Html 上で表現できるスクリプトはいろいろあるのですが、今回はこのブログ(この記事を書いているとき) でも利用している jQueryプラグインである beautyOfCode ついて紹介していこうと思います。 導入方法 <!-- jQuery / beautyOfCode--> <script src='http://android-beryl.googlecode.com/hg/a
![[Blogger] beautyOfCode を導入しよう](https://cdn-ak-scissors.b.st-hatena.com/image/square/84742c0541d3e3f5c168c2cc0a689f0b69b8f823/height=288;version=1;width=512/https%3A%2F%2F2.bp.blogspot.com%2F-mplB-Ho7SUU%2FThlgmSwCwdI%2FAAAAAAAAArY%2Fcy9Jy142_Ls%2Fw1200-h630-p-k-no-nu%2Fbeautyofcode.png)
ソースコードを行番号付きで、きれいに表示する「SyntaxHighlighter」の導入と使い方
ソースコードをきれいに色分けしてくれる「SyntaxHighlighter」の導入と使い方です。 JavaScriptをサーバにアップロードする必要はありません。 JavaScriptが置いてあるリンク先を示すことで、簡単に導入できます。 実際に、このBloggerの「gogoToRoTAN」ブログに導入しました。 表示したソースコードの一部を強調させることも可能です。 「SyntaxHighlighter」は、エディタの色分けのように、きれいに表示してくれるスクリプトです。 対応コードは、以下のように、ほとんどのソースに対応しています。 ActionScript3 Bash shell ColdFusion C# C C++ CSS Delphi Pascal Diff Erlang Groovy JavaScript Jscript Java JavaFX Perl PHP Plain
ソースコードの装飾表示方法 SyntaxHighlighter
HTML,CSS,JS,Perl,PHPなどの各ソースコードをWebサイト上に綺麗に再現。 NetyaSun ソースコード表示 ホームページ 作成、運営、管理ガイド 行番号や各行背景色で見やすい ソースコード ビュー ライブラリ SyntaxHighlighter エディタのようにWebサイト上に綺麗にソースコードを表示する方法。 ソースを書くプロ達や未来の開発者のための学びの場である HTML,CSS,JS,Perl,PHPなどのマニュアル・解説サイトなどで、 PREソースコードを行頭番号付きでカッコよく表示するソース ビューア SyntaxHighlighter SyntaxHighlighter:Download ソース上にオンマウスで の操作タブがソースの右上に表示されるようになった。 ソースを別窓ビュー表示したりクリップボードに保存や印刷も可能な優れものです。 <?xml ve
『AmebloでSyntaxHighlighterのバージョン2系を利用する方法』
以前に「アメブロでSyntaxHighlighterを使ってみる」でSyntaxHighlighterの使い方を書いてみましたが、この際に利用したバージョンは3系でした。 SyntaxHighlighterはバージョン2系も存在して、こちらの方も人気があって未だに技術系のブログとかでは、ソースを公開する際にバージョン2系のSyntaxHighlighterを利用している人も多くいたりします。 2系の最新バージョンは、2.1.382となっており2010年5月にリリースされています。 それ以降、アップデートがされてないところを見ると、今後のメジャーの開発は3系にシフトしたのかもしれません。 ただ、2系にはメニューバーが表示されたり、ソースを折り返して表示するなど、3系にはない便利な機能もあったりします。 この辺は、好みで使い分けてもよいかもしれません。 一番単純な方法は、下記のJavaScri
サイト構築日記 » 「SyntaxHighlighter」各要素ごとの設定項目 /便利なライブラリ,API
前回は「SyntaxHighlighter」のconfig（全体）設定をみていきました。今回からは各要素ごとに設定できる項目をみていきます。公式サイトでは「SyntaxHighlighter/Configuration」の「SyntaxHighlighter.defaults」に記載されています。この内容の説明がありましたので引用します。 SyntaxHighlighter.defaults holds all default values for each highlighted element on the page. These options are local to each highlighter element and could be changed individually via parameters described in the next section. The
『アメブロでSyntaxHighlighterを使ってみる』
エンジニア系のブログではよく見るSyntaxHighlighter をアメブロでも使えないか試してみました。 ソースコードとかをブログで見せたいときに、関数や言語の予約語とかがマークアップされて綺麗に表示してくれます。 なお、ここではアメブロのフリープラグインに直接SyntaxHighlighterのコードを埋め込む方法と、以前に「AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ 」に書いたGoogle code上にホストする2種類の方法を試してみました。 また、SyntaxHighlighterのJavaScriptファイルなどをアメブロ内にアップロードすることはできないので、何れもホスティングバージョン （無料）を使っています。（後半のほうはホストのホストになりますけど・・・） まずは、直接フリープラグインに埋め込む方法。 これは、下記のように
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://spyweb.media/2017/10/05/prism-js-highlight-syntax-source-code/
Wordpress プラグイン SyntaxHighlighter Evolved の表示をちょっとカスタマイズ « webtrace design
BloggerにSyntaxHighlighter を導入する方法（ソースコードをきれいに表示）| 某氏の猫空
テーマとは？－Syntax Highlighter
http://samidarehetima.blog9.fc2.com/blog-entry-85.html
caraldo.net - it転職 リソースおよび情報
SyntaxHighlighter