sw1227’s diary

Visualization, GIS, Machine Learning, Generative Art, Simulation, Math

はてなブログのシンタックスハイライトを綺麗にする

  • 1. 背景
  • 2. highlight.jsの導入
    • 2.1. highlight.jsを取得
    • 2.2. 行間の調整
  • 3. 使い方
    • 注意点

f:id:sw1227:20181117115002p:plain

1. 背景

例えばPythonのコードをはてなブログに貼り付けたい場合、

```python

ソースコード

```

と記述することで以下のように表示されます。

@app.route("/lifegame")
def lifegame():
    """ Conway's Game of Life """
    return render_template("lifegame.html")

あまり綺麗ではないしカスタマイズも(たぶん)できなくて萎える...と思いきや、はてなブログJavaScriptを差し込むことができるため、highlight.jsを使ってAtom One Dark風のシンタックスハイライトを実装することができました。他にも185言語・89種類のスタイルが使えるようです。

続きを読む

About

1. やっていきたい分野

カテゴリ

言語・フレームワーク

  • JavaScript
    • d3.js
    • Three.js
    • React
    • Vue.js
    • Deck.gl
    • Kepler.gl
    • Leaflet.js
    • Web Audio API
    • Web MIDI API
  • Python
    • Jupyter Notebook
    • numpy, scipy, pandas, scikit-learn, ...
  • Haskell

2. リンク