2020年4月6日月曜日

Bloggerのコード・ハイライト

Bloggerのコード・ハイライト

Prism の導入

Blogger のコードハイライト用に Prism を使用します。
導入は簡単で、次のコードを Blogger テーマの HTML に次のコードを貼り付けるだけです。（テーマの HTMLの操作方法が分からない場合は、こちらなどを参考にしてください）
<!-- Prism -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism.min.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js'></script>
<!-- /Prism -->
これで、コードハイライトは可能です。

使い方

<pre><code class="lamguage-markup">...</code></pre>
<pre><code class="language-xxx"> と </code></pre>で表示したいコードを囲みます。
「XXX」の部分には言語を指定します。記述方法については、Prism のSupported languages を参考にしてください。

オプション

CDN を追加することで、テーマの変更や行番号表示などができるようになります。

テーマの変更

上記の設定で使用されるテーマはdefaultです。
どのように表示されるかは、Prism のサイト で確認できます。右側の団子状に並んだ丸の1つをクリックすると、ページ内のコードが選択したもので表示されます。
気に入ったものがあれば、そのCDNをテーマの HTMLに設定します。
例えば、OKAIDIAを設定する場合は次のようになります。

手順

  1. cdnjs サイトに行き、css タブを選択してください（初期値はjsタブになっていると思います）。
  2. その中から、https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-okaidia.min.css を探しコピーします（1.20.0 部分はバージョンなので適宜読み替えてください）。
  3. このコピーを、次のように href の中に張り付けて、テーマの HTMLに設定してください。
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-okaidia.min.css' />
テーマの変更は以上です。

行番号

テーマの変更同様に、cdnjs サイトからURLをコピーしてテーマの HTMLに設定するだけですので、そのコードのみを示します（行番号については JavaScipt も必要ですので同時にインクルードします）。
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-numbers/prism-line-numbers.min.css' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-highlight/prism-line-highlight.min.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-numbers/prism-line-numbers.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-highlight/prism-line-highlight.min.js'></script>

言語

大半の言語はデフォルトでサポートされていますが、所望の言語がない場合は、cdnjs サイトの js タブの中から components を含む URL をテーマの HTMLに設定します。
【例】
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-sass.min.js'></script>
Written with StackEdit.
- 0 件のコメント:

2020年4月4日土曜日

Mathjaxの構文

Mathjax構文

1. 数式モード

数式を表示する方法には、LaTexLaTex風に言えば「ディスプレイモード」と「テキストモード」の2種類がある。
HTML風に言えば「ブロックレベル」と「インライン」に該当する。

(1) ディスプレイモード

ディスプレイモードは、$$で数式の両端を囲みます。

【コード例】

$$
i=\sqrt{2}I\sin \omega t
$$

【表示】

i=2Isin⁡ωt i=\sqrt{2}I\sin \omega t

(2) テキストモード

テキストモードは、文中に数式を埋め込むもので、式の両端を$で囲みます。

【コード例】

$a \ne 0$ の場合、$ax^2  + bx + c =  0$ の解は次の式から計算します。

【表示】

a≠0a \ne 0 の場合、ax2+bx+c=0ax^2 + bx + c = 0 の解は次の式から計算します。

2. 数式モードでの文字と空白

数式内の文字はイタリック体で表示され、空白は全て無視される。従って、空白には\quadを使用し、文字には書体変更コマンド\textrmを使用して一時的に平文へ戻す必要がある。

【コード例】

$$x_i = 2x_{i-1} for each i, i=1,2, \dots,n \qquad 失敗例$$
$$x_i = 2x_{i-1} \quad  \textrm{for each i, i=1,2, \dots,n} \qquad 成功例$$

xi=2xi−1foreachi,i=1,2,…,n失敗例x_i = 2x_{i-1} for each i, i=1,2, \dots,n \qquad 失敗例
xi=2xi−1for each i, i=1,2, …,n成功例x_i = 2x_{i-1} \quad \textrm{for each i, i=1,2, \dots,n} \qquad 成功例

3. 上付き文字と下付き文字

【コード例】

$$A^1,A^2,...,A^n  \qquad y=ax^2+bx+c \qquad y=e^{x^2+x+1}$$
$$A_1,A_2,...,A_n \qquad y=a_1+a_2+a_3+a_4 \qquad y=A_{i,j}+A_{i,k}+A_{i,l}$$

【表示】

A1,A2,...,Any=ax2+bx+cy=ex2+x+1A^1,A^2,...,A^n \qquad y=ax^2+bx+c \qquad y=e^{x^2+x+1}
A1,A2,...,Any=a1+a2+a3+a4y=Ai,j+Ai,k+Ai,lA_1,A_2,...,A_n \qquad y=a_1+a_2+a_3+a_4 \qquad y=A_{i,j}+A_{i,k}+A_{i,l}

- 0 件のコメント:

MathjaxをBloggerで使用する

MathjaxをBloggerで使用可能にする手順は次の通り。
（画像をクリックすると拡大できます）

Ⅰ. Mathjaxの設定

 1. Bloggerの管理画面で「テーマ」を選択する。

2. 右上の「：」のようなボタンをクリックする


3. プルダウンメニューから「HTMLの編集」を選択する

4. <head>セクション内に別掲のコードを貼り付ける

コード

<!-- MathJax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js" type="text/javascript">    
  MathJax.Hub.Config({
    HTML: ['input/TeX','output/HTML-CSS'],
    TeX: { extensions: ['AMSmath.js','AMSsymbols.js'], 
      equationNumbers: { autoNumber: 'AMS' } },
      extensions: ['tex2jax.js'],
      jax: ['input/TeX','output/HTML-CSS'],
      tex2jax: { inlineMath: [ ['$','$'], ['\\(','\\)'] ],
      displayMath: [ ['$$','$$'], ['\\[','\\]'] ],
      processEscapes: true },
      'HTML-CSS': { availableFonts: ['TeX'],
      linebreaks: { automatic: true } }
  });
</script>
<!-- /MathJax -->

Ⅱ. コードブロック

コードの表示用に、それ程好きではないがインターネット上の情報が多いのでhighlight.jsを使用することにする。
設定は、上記同様に以下のコードをHTMLに設定する。

 

<!-- 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 -->

（このコードは。djeeno.logを参考にさせて戴きました）
使用方法は、以下の通り。


<pre><code>

ここにコードを配置する

</code><pre>
- 0 件のコメント:

2020年4月2日木曜日

マスク2枚

アベノマスク

いま、Twitter で表題の件が話題になっている。
昨日、首相が全世帯にマスク2枚を配るとの表明を受けてのものだ。
Twitter のハッシュタグは、#アベノマスク。今年の流行語大賞は、これに決定でしょう（忖度がなければ）。
昨日は、折しも4月1日だったため、「首相のエイプリルフールか」と思った関係者も多かったようです。
これが、まさしく冗談なら「流石、外交のアベ。世界中を大爆笑させた。」となるのだろうが、残念ながら鬼の首でも取ったかのように胸張って発表している姿は、世界中の笑いものになること間違いなし。
Twitter には、これを揶揄する投稿がすごい。
中でも、次の画像が素晴らしく、その才能に驚く。

アベノマスク1 アベノマスク2 アベノマスク3
- 0 件のコメント:

2020年4月1日水曜日

whichコマンド作成

Powershellでwhichコマンド

powershellでは、whichではなくgcmを使用するらしいのだが、直ぐにこれを忘れる。
（whereもあるが、何の動作もしない）

powershellにはaliasがあるので、gcm(Get-Command) を alias を使用してwhichで使えるようにする。

alias を作成するにはSet-Aliasコマンドレットを使用する。

Set-Alias -name which -value Get-Commnd

これで出来たかと思いきや、一時的に作られる alias のようで、次回以降は使用できなくなるようだ。

そこで、Windows 10 の PowerShell で起動時にコマンドのエイリアスを設定 (Set-Alias) するにはという記事があったので、それを参考に設定する。
(1) 管理者権限で次のコマンドを実行する。

Set-ExecutionPolicy RemoteSigned -Force

(2) ユーザ権限で次のコマンドを実行する。

New-Item –type file –force $profile

New-Item でプロファイルが次の場所に作成される。

C:\Users\tsuch\OneDrive\ドキュメント\PowerShell\Microsoft.PowerShell_profile.ps1

(3) プロファイルは次のコマンドで編集できる。

notepad $profile

プロファイルへの設定は次のように、Set-Aliasを使用して行う。

New-Alias -name エイリアス -value コマンド

または

New-Alias エイリアス コマンド

【例】
New-Alias -name an -value anaconda-navigator
New-Alias an anaconda-navigator

因みに、jupyter notebook の設定は次のようにすればできる。

New-Alias jn C:\Users\tsuch\Anaconda3\Scripts\jupyter-notebook.exe

New-Alias と Set-Alias の違いについて
Set-Alias は、コマンドレットを作成または変更するのに対し、New-Alias は、現在のセッションのコマンドレットを作成するが保存はされません。

肝心なwhichを忘れてました。

 New-Alias which Get-Command

Set-AliasではだめでしたがNew-Aliasにすると動くようです。
最後に、shコマンドの方が使いやすい。本当に必要な場合を除いて、使わない方がよさそうだ。
以上

- 0 件のコメント:
登録: 投稿 (Atom)

ただいま作業中

2022/04/13 MySTの翻訳環境作り サイドメニューをプログラムで変換可能にすること 作業の中心場所 – jupyter notebook : g:\jupyter\python pythonをwebでも可能に – g:\webapp\Doc-tools ...

  • ExcelVBAにハマる
    Microsoftは認めないだろうが、こんなのはVBAのバグじゃないのか？ Sub test() a= 35 * 3600 End Sub このたった３行を実行すると「オーバーフローしました。」との実行時エラーになる。 aのデータ型を指定しないためかと、「Long」や「Vari...
  • winampでapeを再生する
    前のパソコンがクラッシュしたため復旧作業中。 復旧といっても、ほとんどが構築し直し。 今日は、プリンタ接続が完了したので、winampのインストール後 曲を聴こうとしたら、apeが再生できないことが判明。 インターネット上でいろいろ調査したが、方法はこれ以外なさそうなの...
  • 利根川の不思議
    利根川一帯の奇妙な事柄 １．利根川の対岸に張り出した野田市 大きな地図で見る 近くに橋もなく（最寄の橋は芽吹大橋）、利根川沿いに対岸に行くには最短でも5km以上はある。 かてて加えて地区の西側に飯沼川が浸入を阻むように南北に流れており、適当な橋も見当たらない（地図上は）ので、迂回...