Discover Top Posts Tagged with #google-code-prettify

Popular Recent

google-code-prettifyでコードハイライト！

まえからgoogle-code-prettifyを導入していたのですが、どうやって反映させているのか！のまき。

これでコードハイライトされるよ~~٩( 'ω' )و

#google-code-prettify

Syntax Highlighting

html의 element 중 pre element로 감싼 곳을 css와 javascript를 사용하여, 개발자가 보기 편하도록 하는 라이브러리

Library

highlightjs

웹에서 사용하는 syntax highlighting으로 많은 언어와 스타일을 지원한다.

site

http://highlightjs.org/

github

https://github.com/isagalaev/highlight.js

theme

http://highlightjs.org/static/test.html

SyntaxHighlighter

가장 오래된 Syntax highlight이다. 예전에는 많이 사용했지만 현재는 사용하는 횟수가 많이 줄어 들었다.

site

http://alexgorbatchev.com/SyntaxHighlighter/

github

https://github.com/alexgorbatchev/SyntaxHighlighter

google-code-prettify

구글에서 만든 라이브러리이다. 많이 사용하는 라이브러리로 css와 js만 다운로드 해서 script와 css를 사용하여 넣어주면 된다.

site

https://code.google.com/p/google-code-prettify/

theme

google-code-prettify에도 다양한 테마를 적용할 수 있다. 그러한 테마는 아래의 리스트에서 확인하여 적용하면 된다.

http://jmblog.github.io/color-themes-for-google-code-prettify/

http://stanleyhlng.com/prettify-js/

http://demo.stanleyhlng.com/prettify-js/?id=bootstrap-light

#prettify #google-code-prettify #theme #prettifyjs #highlightjs #highlighter #syntax

setup google-code-prettify on Tumblr

php

<?php echo 1; json_decode(123); if (1 == 0) { echo 'test'; } else { echo 'no'; }

if ( 1 == 0 { console.log('test'); }

css

table#id.style tr td { color: black; line-height: 10px; }

#google-code-prettify

# google-code-prettify

syntaxhighlighter를 내가 잘 이용을 못하는건지 색상구분도 잘안돼고

사용도 불편해 google에서 지원해주는 prettify를 사용하기로했다.

근데 이건 또 line number가 나오질 않는다....

짜증짜증!!! 그래도 syntaxhighlighter가 더 잘되있는거같은데 다 영어설명이라...

google code prettify는 한글로 설명되있는 자료도 많고해서 금방 바꾸긴했지만

line number도 없고 깔끔하지 않은 느낌...

우선 귀찮으니깐 오늘은 여기까지!

소스코드 다운받아 적용 후 게시물에 쓸때는

<pre class="prettyprint">를 입력하여 사용하면 된다.

*참고사이트

- 사용 방법 :

http://ghebook.blogspot.kr/2011/09/google-code-prettify.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+blogspot/LjfQi+(%EC%A1%B0%EA%B8%88%EC%9D%80+%EB%8A%90%EB%A6%AC%EA%B2%8C+%EC%82%B4%EC%9E%90.)

- google-code-prettify 사이트 :

http://code.google.com/p/google-code-prettify/

#syntax #google-code-prettify

[tips]google-code-preffityとMathJaxの導入メモ

両者のTumblr(その他blog)への導入法をまとめます．

1. google-code-prettify

基本的にここ(tips! | google-code-prettifyでシンタックスハイライト)に書いてあるとおりにすれば導入できます．以下では若干の補足説明をします．

アップロードが完了したら

ファイルのアップロードはstatic file uploaderから行います． (/themes → Submit a theme → static file uploaderとたどっていけばあります) アップロードしたらファイルのURLをメモしておき，テーマ編集からCustom HTMLのところで2つのファイルを読み込みます．もし，別のテーマを利用するのであれば，利用するテーマの.cssファイルだけアップロードして読み込むようにすれば大丈夫です．

注意

static file uploaderのNoticeにも書いてあるように，テーマに利用するファイル以外のアップロードは絶対しないでください．アカウントが凍結/削除される恐れがあります．

あと，アップロードしたファイルは書き換えが出来ないので，内容を変更した場合は再度アップロードして読み出し部分のURLを書き換える必要があります．

2. MathJax

MathJaxの導入は非常に簡単です． MathJaxトップページより， Resources/Documentation → (current version) → Using MathJax in Web Platforms とたどり，

To enable MathJax in your web platform, add the line:

と書いてあるところの下にあるコードを

内に挿入するだけです．

#google-code-prettify #MathJax #tips

To get google-code-prettify to work in Tumblr

Edit your theme's HTML and place this between the <head></head> tags:

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet"/> <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script> <style> pre.prettyprint { overflow-x: auto; } pre.prettyprint li { list-style-type: decimal !important; } </style>

#google-code-prettify

Testing google-code-prettify

Lets try this out...

/** * Module dependencies. */ var express = require('express'), routes = require('./routes'); var app = module.exports = express.createServer(); // Configuration app.configure(function(){ app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(express.cookieParser()); app.use(express.session({ secret: 'ss3-dev' })); //app.use(require('stylus').middleware({ src: __dirname + '/public', compress: true })); app.use(require('stylus').middleware({ src: __dirname + '/public' })); app.use(app.router); app.use(express.static(__dirname + '/public')); }); app.configure('development', function(){ app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); }); app.configure('production', function(){ app.use(express.errorHandler()); }); // Routes app.get('/', routes.index); app.get('/app.js', routes.stitch); app.listen(3001); console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

cool!

#google-code-prettify

google-code-prettify を導入

2012年2月11日追記イベントハンドラの登録方法を加筆

2011年12月3日追記 2011年3月に CSS のテーマギャラリが追加されました。

tumblr で画像、CSS、JSファイルをアップロードできることがわかったので、シンタックスハイライトを使えるようにするために、google-code-prettify を導入しました。アップロードしたらテーマのなかで JavaScript と CSS ファイルを指定し、body 要素にイベント属性の「onload=”prettyPrint()”」を追加するだけです。

2012年2月11日追記 jQuery 、addEventListener メソッドを使ったイベントハンドラの登録方法は次のようになります。HTML と JavaScript の分離ができるだけでなく、ほかのライブラリが登録したイベントハンドラを上書きしてしまう可能性がなくなり、レンダリングされるタイミングが速くなるので、体感的に速く表示されるようになります。

// jQuery.ready メソッドによるイベントハンドラの登録 $(function(){ prettyPrint(); }); // addEventListener もしくは attachEvent メソッドによるイベントハンドラの登録 if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function (event) { prettyPrint() }, false); } else if (document.attachEvent) { document.attachEvent('onreadystatechange', function (event) { prettyPrint() }); }

チェンジログを見ると今年の9月に CoffeeScript のサポートが追加され、<pre class=”prettyprint lang-coffee”>でハイライトされます。今後テーマをカスタマイズしたときに URL を忘れてしまわないようにメモをしておきます。アップロードしたファイルは削除できないようです。

#tumblr #google-code-prettify