#highlightjs

[mogetaan-blog]

Tumblrでシンタックスハイライトする

コード書くときに見やすくしやくて悩んでたんだけど、最初からシンタックスハイライトする機能がデフォルトのテンプレートにあった。

カスタマイズの「HTML編集」のheadタグ内に「<meta name="if:Syntax highlighting" content="0">」があるので「content="1"」にしてあげる。 そのあと普通のカスタマイズ画面に戻ると「Syntax highlighting 」という項目がでてくるのでそれを有効にしてあげる。

あとは投稿するときにソースコードを「https://highlightjs.org/」にあわせてhtmlで書く。

<pre><code class="html">...</code></pre>

色を変えたいときは以下にみたいにもともとあるスタイルシートをコメントアウトして公式参照で適用したいスタイルを設定してあげればいい。

{block:IfSyntaxHighlighting} <!--<link rel="stylesheet" href="https://static.tumblr.com/ehm1tdz/2VWnye81h/tumblr-highlightjs.css">--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/darcula.min.css"> {/block:IfSyntaxHighlighting}

darculaにしてみたけどあんまり色がぱっとしないな

[ong-ar-sis]

highlight.js

highlightjs usage

How to use

Linking and calling

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>

more styles

Usage

Enable

<pre><code class="html">...</code></pre>

Disable

<pre><code class="nohighlight">...</code></pre>

[thekelvinliu]

updated theme + hello world

today after work, i started to play around with and rewrite the theme used by this blog. it's still very much a work-in-progress, but i just updated it anyway because #fuckitshipit (read: i want to get on with the rest of my night). originally, i was using a theme i bought from theultralinx. this was before i really dove into web development, and i figured the theme would look way better than anything i could've come up with. now, things are different. i have a handful of websites under my belt, and i write code for a living.

the original theme is/was beautiful -- it even inspired the design for my personal website. and in my rewrite, i kept things visually similar. i chose to write the theme with pug and style it with sass. these languages, mixed with tumblr blocks and variables, leads to some pretty interesting markup. i use a very small subset of the options that the original theme provided, so i was able to cut out a lot of unused html and javascript from the theme. since this was a spur-of-the-moment-turned-couple-hour thing, i don't have a proper development workflow yet. once that's in place, my plan is to clean up the existing styles, but i'll probably just end up writing my own. last but definitely not least, i added highlight.js so i can finally have syntax-highlighted code snippets 🎉🎉

to end, here's an unexciting hello world in bash.

# hello-world.sh echo "hello world"

[hi-tips]

Tumblr code highlighting(cont.)

No line wrap config for highlight.js

Add following snippets to your customed stylesheet.

pre, code { white-space: pre; overflow-x: scroll; } .hljs { display: inline-block; overflow-x: scroll; }

via http://stackoverflow.com/questions/31152421/highlight-js-with-blogger-cant-disable-auto-line-wrap And what's more, if you wants line numbers like

try http://idodev.co.uk/2013/03/syntax-highlighting-with-highlightjs/

[yangbeomsu]

tumblr에서 codehighlight 사용하기

highlight.js 를 사용하였습니다.

highlight.js에 접속하여 Get Version 을 눌러 cdnjs 의 2줄의 코드를 복사해둡니다.

그후 useage에 접속하여 위와같이 마지막줄을 복사하여줍니다. highlight.js의 style변경을 원하시면 style에서 가져온 style 명을 변경하여 주시면 됩니다.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/styles/변경하고 싶은 style.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>

위와같은 3줄의 소스코드를 html수정을 통하여 head에 붙여 넣기를 해줍니다.

그후 사용은 다음과 같습니다.

<pre><code> 내용 </code></pre>

[dwaynecrooks]

Added syntax highlighting to my Tumblr blog

I finally got around to adding syntax highlighting to my Tumblr blog.

def hello(message = "World") "Hello, #{message}!" end puts hello("syntax highlighting") # => Hello, syntax highlighting!

I'm using highlight.js and hosting the library and the Solarized Dark style from cdnjs.com.

[r2fresh-blog]

Syntax Highlighting

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

[wingyplus]

ทำ Syntax Highlighting บน Tumblr

ตอนกลางวันว่างๆ เขียนซักหน่อย คืออยากได้ syntax highlight ส่วนตัวไม่ชอบอะไรดิบๆ มันไม่น่าอ่าน ตอนแรกก็ว่าจะใช้ google prettify หรือ syntax highlighter แต่ prettify ดูจะใช้ยาก syntax highlighter มันเยอะ (ขี้เกียจ) เลยนั่งอ่าน blog คนอื่นไปเรื่อย พอมาอ่าน blog ของ thoughtbot เห้ยยยย !! มันใช้อะไรวะ เลยเปิด inspect ของ firefox นั่งดูเลยไปพบว่าใช้ของ  highlightjs โอว ปรับง่ายเปลี่ยนธีมก็ง่ายดี ใช้สามบรรทัดตาม http://highlightjs.org/usage/ แล้วก็ใส่คลาสให้กับ <code> ว่าเป็นภาษาอะไร