seen from Japan
seen from Italy
seen from United States
seen from United States
seen from Romania
seen from Netherlands
seen from Singapore
seen from Canada
seen from United States
seen from China
seen from Germany
seen from T1
seen from Canada
seen from Germany
seen from China
seen from T1
seen from Poland
seen from China
seen from India
seen from United States
ใส่สีให้ Code บนเว็บไชต์ด้วย highlight.js
การใส่สีให้กับโค้ดบนเว็บไซต์โดยใช้ highlight.js ผ่าน CDN สามารถทำได้โดยดำเนินการตามขั้นตอนต่อไปนี้: เพิ่มลิงก์สคริปต์ของ highlight.js ด้านล่างนี้ลงในส่วน <head> ของหน้า HTML ของเว็บไซต์ของคุณ: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"> <link rel="stylesheet"…
View On WordPress
Tumblrブログにhighlight.jsを導入
TumblrブログにはMarkdown機能がありますが、ソースコードを表示させてもシンタックスハイライトされません。
自分でhighlight.jsを導入
というわけで自分でこのブログにhighlight.jsを導入し、シンタックスハイライトを有効化させました。
やり方は簡単です。HTMLの編集画面で以下のコードを<head>タグ内に貼り付けるだけ。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/base16/default.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script><script>hljs.initHighlightingOnLoad();</script>
default.min.cssの部分を変更することでハイライトの色（スタイル）を変えられます。 どんなスタイルがあるかは公式サイトをご覧ご覧ください。
Code Blocks Should Look a Little Better Around Here from Now on Thanks to highlight.js
I was getting pretty unhappy with the way code blocks looked on this site so I decided to see if there was something I could do about it.
It's been many years now since anyone let me within 10 feet of CSS but for starters I realized that most of my code blocks which are intended to wrap at 74 (as god intended!) were cut off by the width of the text which is intended to be easy to read. I did a little investigation and while I'd never heard of the unit before it turns out that there's a ch unit which is the width of the glyph 0 in the current font.
A quick
.post pre code { overflow-x: auto; display: block; width: 75ch; }
and we were in business.
I use Solarized Light almost exclusively for my themes unless I'm working with a monster who runs a dark theme in whch case I'll switch over to Solarized Dark. Next step was to hit up the CSS values at Solarized's Site and get my theme to be something at a least a little bit prettier than the drab grey that it was before.
.post a code { color: #c00906; } .post code { border-bottom: .1em solid #93a1a1; color: #657885; background-color: #fdf6f5; }
But I still wasn't happy. Whatever Keith Gregory has to say on the matter, I like syntax highlighting. While I'm ok with the base experience being nice looking if flat, if someone wants to give me some JS then it can be even better.
A bit of research and I found highlight.js. It had builtin support for Solarized Light and supported the languages I tend to write about so in classic Internet fashion I went with that. Integrating it into Tumblr was as simple as adding
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/solarized-light.min.css"><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script><script>hljs.initHighlightingOnLoad();</script>
to the Description section of the theme.
With all that done, code should look a lot better around here from now on.
(->> (range) (filter odd?) (map inc) (take 10) (reduce +))
sum( [ x + 1 for x in range(1,100) if x % 2 == 0 ][0:10] )
$1 ~ /needle/ { sum += $3 } END { print sum }
$ awk ' > $1 ~ /needle/ { > sum += $3 > } > > END { > print sum > } > '
Syntax Highlighting on Tumblr
Syntax Highlightとは
シンタックスハイライト
構文強調
つまりはhtmlやCSS、C#言語、Javaなどのプログラムソースコードを記事としてテキストで見せる際に、色付けや太字表記などで見やすく形成する処理のこと。
例.html
Syntax Highlight <h1>こんな感じに</h1> <p>みやすくhtmlタグを表示してくれます。</p> <p><a href="abc.html" target="_blank">色が強調されて見やすいですね。</a></p>
例.CSS
/*htmlだけじゃなくてCSSも*/ div#main p.class a:hover { margin: 0 auto; background-color: #FFF; }
例.Javascript
function styleCode() { if (typeof disableStyleCode != 'undefined') { return; } var a = false; $('code').each(function() { if (!$(this).hasClass('Sample')) { $(this).addClass('Sample'); a = true; } }); if (a) { Sample(); } } $(function() {styleCode();});
Tumblrで動的に追加された記事に対してhighlight.jsで強調表示する
Tumblrでhighlight.jsを使ってソースコードを強調表示しているブログというのは多々あると思う。 ここのブログもそのうちのひとつだけど。
最初にページを表示したときに存在する要素に対しては強調表示できるのだけど、 下までスクロールしていったときに動的に追加される要素に対しては普通にhighlight.jsを使っているのでは当然ながら強調表示されない。
せっかくスクロールしていくと記事が動的に追加されるのに、 ソースコードの箇所が強調表示もされず見辛いのは悲しいので、 どうにかならないかと思い、MutationObserverを使って要素が追加されるのを監視して、追加されたらhighlight.jsを再度実行するというコードを書いた。
コードは以下の通り。jQueryとhighlight.jsが使用できる必要がある。
$(function(){ 'use strict'; var codeAreaSelector, postAreaSelector, MutationObserver, observer; function highlight(selector) { return $(selector).each(function(index, element) { hljs.highlightBlock(element); }); } codeAreaSelector = '.body-text code:not(.hljs)'; postAreaSelector = '#posts'; highlight(codeAreaSelector); MutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver; if (!MutationObserver) { return; } observer = new MutationObserver(function(mutations) { highlight(codeAreaSelector); }); observer.observe($(postAreaSelector).get(0), { childList: true, subtree: true }); });
既に強調表示の処理が行われた要素に対して再度実行しないように （実行しても問題ないのかもしれないが） jQueryに渡すセレクタ内で:not(.hljs)を指定して要素を除外している。
あとは記事が追加される親要素に対してMutationObserverで監視をして、 追加されたらhljs.highlightBlockで強調表示するようにしている。
今のところ想定通り動作してくれている。
もう少し言えばMutationEventsに対応すればより良いのだろうけど、Tumblrを見ているユーザがInternet Explorerの古いものを使っていたりとか、それ以外のブラウザでも妙に古いバージョンのものを使っているとは思えない（思いたくない）ので対応しなかった。
CAPTION
最近ちゃんと睡眠時間を取っていない私@tumblrです.
ウェブ上でのHighLightで悩んでました. Sublimeや拘りさえしなければ問題ないのですが, ダメな癖が出ました.
ウェブ上でソースコードを載せるときテキストまま載せるのは美しくありません. ブロガーさんたちは SyntaxHighlighter や highlight.js などを使って,ソースコードを見やすくしています. どちらを選ぶかは宗教です. vimかemacsかを選ぶかという問題と同等です.
さてはて, 最初はSyntaxHighlighterを使っていたのですが,Highlight.jsに乗り換えました. そして, この話はまた今度の機会に...
CAPTION FOR IMAGE
キャプションです. 友人に｢付けないとやばくない?｣と言われまして今後はつける方針にしました (ちなみに, 標準語でない). 普段, 画像URLを開いてKeyconfigのショートカットキーでURLだけを取ってきてました... が,タイトル付きのタイプに変えましたの次になります.
Image Link for Markdown
 > [%TITLE%](%URL%)
ショートカットキーはお好きなものを割り当ててください.私はcpでトリガーを引いてます.
おわりに
なんで最近向上指向なんだろ...
Pythonの勉強でも
Pythonに興味を持ちつつもなかなか手をつけられないでいたんだけども 色々あって少し使ってみようかと
それと、highlight.jsが使えるかどうかのテストも兼ねて
#!/usr/bin/env python2.7 # -*- coding: utf-8 -*- import sys, os if __name__ == "__main__": if len(sys.argv) != 2: print os.path.basename(__file__),": argument mismatch." quit() print "Hello,",sys.argv[1]
とりあえず、練習用に引数をひとつとって表示するだけの簡単なコードを作ってみた
む…Preタグが有効にならないのかインデントがしっかり反映されないな自分で調整せんといかんのか…
Better Code Syntax Highlighting w/ Highlight.js
Lately I've been getting more and more snobby about my text editor of choice for writing code, but more specifically the syntax highlighting it provides. At about the same time that I started writing this blog, I tried out [Sublime Text 2 beta](http://www.sublimetext.com/) and have been hooked ever since. I've installed it on my two Ubuntu machines (work & home) and am about to install it on my Windows 7 machine (my second work laptop). At the same time, I discovered the amazing solarized dark color scheme. Since I'm so infatuated with this syntax highlighting scheme it seemed natural to set it up for my blog as well. I had zero previous experience with dynamic syntax highlighting on a blog I just Googled for a good solution that would work with Tumblr. I settled on the solution of using Google Prettify. It's also being used by Google Code and StackOverflow. The problem is that most of my "code" is Bash. For what ever reason, Google Prettify does not do a good job of marking up Bash. It was a very half ass implementation. It looked great on JavaScript, C and HTML, but was shitty for Bash which is the majority of what I post here. After seeing a new JavaScript syntax highlighter released a couple days ago called [Rainbow.js](http://craig.is/making/rainbows), I was motivated to try to find a solution that would satisfy highlighting desires. Rainbow.js was exciting, but still not my solution for Bash since only a few languages are currently supported. I Googled around a bit more and found a post by the creator of [Highlight.js](http://softwaremaniacs.org/soft/highlight/en/). His post was being a bit critical of Rainbow.js. IMHO, he has the right to be critical. His syntax highlighting JavaScript library is far above Google Prettify and is much more versatile with the languages it supports. Best of all - it provides the most thorough syntax highlighting for Bash that I've seen. It even has a built in css scheme for the solarized dark color scheme. If you're reading this then I have already fully switched over the highlighting from Google Prettify to Highlight.js. Here's a sample script to demonstrate the code highlighting. #!/bin/sh echo "Enter the address:\t\t\c" read address_raw address=$(echo "$address_raw" | sed 's/ /+/g') new_address=$(curl -s "http://maps.googleapis.com/maps/api/geocode/xml?address=$address&sensor=false" | \ grep "formatted_address" | \ sed 's/.*//g;s/<\/formatted_address>//g') echo "The validated address is:\t$new_address" The code above works. It just uses Google Maps to correct malformed addresses. Anyway...I'm much more happy now. The only feature that is missing is line numbers. I hope that feature gets added at some point but if not I'll manage. If Rainbow.js ever supports Bash I may give it a try as well.
