djeeno.log: Markdown

ラベル Markdown の投稿を表示しています。すべての投稿を表示

2018年1月21日日曜日

Markdown(.md)でキーボードのキーを表記する

Markdown(.md)でキーボードのキーを表記する。

こんな感じ: Ctrl+C, Ctrl+P

どこで見つけたかすっかり忘れましたが、以来重宝しています。

書き方はとっても簡単。

これが、

<kbd>Ctrl</kbd>

こうなる。

Ctrl

意外と知らない方が多いみたい。

2018年1月14日日曜日

MarkdownとStackEditでBlogger（改）

前々回、こんな記事を書いたばかりですが、下書きの再編集を行うと改行が消滅したり、
Bloggerから投稿を編集すると、StackEditのMarkdown(.md)ファイルとの
整合性が取れなくなったりと、若干面倒な点があったため、運用方法を変更しました。

以下、記事投稿の手順。

↓Export to diskの

↓Export as HTMLから

↓Plain HTMLを選択し、COPY TO CLIPBOARD。

あとは、Bloggerに貼り付けて投稿するだけです。

以前の方法よりシンプルで気に入っています。

2018年1月13日土曜日

BloggerでMarkdownのシンタックスハイライト

前回、Bloggerの記事をMarkdown(.md)で書けるようにしたので、
次はコードブロックのシンタックスハイライトに手を加えます。

Bloggerのテーマにjsとcssを追記するだけです。
超簡単。

↓Bloggerの左ペインテーマの

↓HTMLの編集の

↓headの終了タグ</head>の行の直前に、以下を追記します。

以下は当ブログ（2018/01/13時点）の例です。
コピペ、もしくは適宜変更してご利用ください。

  <!-- START USER DEFINED AREA -->
  <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css' rel='stylesheet'/>
  <style>code{font-family:Menlo,"Osaka－等幅",Consolas,"Courier New",Courier,monospace;color:#333;background:#f8f8f8};</style>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/awk.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang-repl.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/ldif.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/scheme.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/yaml.min.js'></script>
  <script>hljs.initHighlightingOnLoad();</script>
  <!-- END USER DEFINED AREA -->

たったこれだけ。簡単ですね。

2018/01/24 時点追記。

Markdownのキーボードのキー表記のCSSを追加。

  <!-- START USER DEFINED AREA -->
  <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css' rel='stylesheet'/>
  <style>code{font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;color:#333;background:#f8f8f8};</style>
  <style>kbd{padding:.1em .6em;border:1px solid rgba(63,63,63,0.25);-webkit-box-shadow:0 1px 0 rgba(63,63,63,0.25);box-shadow:0 1px 0 rgba(63,63,63,0.25);font-size:.7em;font-family:sans-serif;background-color:#fff;color:#333;border-radius:3px;display:inline-block;margin:0 .1em;white-space:nowrap}</style>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/awk.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/dos.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang-repl.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/ldif.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/scheme.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/yaml.min.js'></script>
  <script>hljs.initHighlightingOnLoad();</script>
  <!-- END USER DEFINED AREA -->