#highlightjs

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

カスタマイズの「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}

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

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.

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

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에 붙여 넣기를 해줍니다.

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

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!

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/