雑感；JavaScript
Node.js
世の中JavaScriptが大流行。以前触ったときは「静的なWEBページに少し動きを加える」ぐらいの認識だったのです。 Asciidoctorにも、例えば数式の表現(MathJax.js)やコードハイライター(highlight.js)が使われているようです。
JavaScriptはブラウザで動いているのではないのか？
で、通常のプログラミング言語のように手元でJavaScriptが動作する、これを可能にしているのがNode.js。 さっぱりわからなかったのですが、初心者はサーバーサイドJavaScriptみたいな認識で良いようです。(笑)
Asciidoctor
Asciidoctorはruby言語で書かれているのですが、JavaScriptで書かれた有用なライブラリの充実が、 rubyからJavaScriptを利用するという方向に傾いている、車輪の再発明はしない。という関係に なってきているなと思います。
利用させていただいている分には、使い方を調べれば後ろがどうなっていようが構わないのですが、 いざ何かがあったとき、JavaScript、HTML、CSSなどの知識、この前言葉を覚えたTypeScript、lesscssなどの 基本的知識がなければ、issueもあげれない。
ということで、ついていけない、いけてない、おじさんになったなと思いました。(笑) Asciidoctorの使い方を整理してここに置いておくのがせいぜいですね。
VSCode:MPE:reveal.js ができちゃった
Markdown Preview Enhanceのドキュメントを読んでいます。
この拡張プラグインで僕が使う範囲のプレゼン資料はできてしまいました。汗;
Presentation reveal.js の記述1、2があったので、次のmdファイルを作ってみました。
コード記述部分の'が1個足りないのと、参照している画像jpeg,svgは別途用意してみてください。
--- presentation: # presentation theme # === available themes === # "beige.css" # "black.css" # "blood.css" # "league.css" # "moon.css" # "night.css" # "serif.css" # "simple.css" # "sky.css" # "solarized.css" # "white.css" # "none.css" theme: beige.css width: 960 height: 700 enableSpeakerNotes: true progress: true slideNumber: true fragments: true # fade-out Start visible, fade out # fade-up Slide up while fading in # fade-down Slide down while fading in # fade-left Slide left while fading in # fade-right Slide right while fading in # fade-in-then-out Fades in, then out on the next step # fade-in-then-semi-out Fades in, then to 50% on the next step # grow Scale up # shrink Scale down # strike Strike through # highlight-red Turn text red # highlight-green Turn text green # highlight-blue Turn text blue # highlight-current-red Turn text red, then back to original on next step # highlight-current-green Turn text green, then back to original on next step # highlight-current-blue Turn text blue, then back to original on next step mouseWheel: true transition: 'default' # none/fade/slide/convex/concave/zoom transitionSpeed: 'default' # default/fast/slow backgroundTransition: 'default' # none/fade/slide/convex/concave/zoom --- <!-- slide --> # MPE & reveal.jsのテスト by <a href="https://shd101wyy.github.io/markdown-preview-enhanced/#/">Markdown Preview Enhanced(MPE)</a> <a href="https://revealjs.com/#/">reveal.js</a> <!-- slide --> ## 文字のみ これは１ページ目のスライドです。 <!-- slide --> ## テーブル |item01|item02|item03| |:-|-:|:-:| |ひだり|みぎ|まんなか| |>|みぎ|まんなか| |ひだり|みぎ|まんなか| |^|みぎ|まんなか| <!-- slide data-notes="Write your note here"--> ## 画像 <div style="text-align:center;"> <img src="./attach/02.jpg" style="width:600px;"/> </div> <!-- slide --> ## 効果のテスト - Item 1 <!-- .element: class="fragment fade-in" data-fragment-index="1" --> - Item 2 <!-- .element: class="fragment fade-in" data-fragment-index="2" --> <!-- slide --> ## 効果のテスト2 <p class="fragment">Fade in</p> <p class="fragment fade-out">Fade out</p> <p class="fragment highlight-red">Highlight red</p> <p class="fragment fade-in-then-out">Fade in, then out</p> <p class="fragment fade-up">Slide up while fading in</p> <!-- slide --> ## 効果のテスト3 <span class="fragment fade-in"> <span class="fragment highlight-red"> <span class="fragment fade-out"> Fade in > Turn red > Fade out </span> </span> </span> <!-- slide --> ## KaTex $$f(x)=x^2+2$$ <!-- slide --> ## code ``latex \documentclass{standalone} \begin{document} Hello world! \end{document} `` <!-- slide vertical=true --> code chunk うごかない。 ``python {cmd=python} for i in range(5): print("Hello World") `` <!-- slide --> ## SVGのテスト <div style="text-align:center;"> <img src="./attach/Asset9.svg" style="width:600px;"/> </div>
正確には中身をもう少しよく見て、テーブル罫線のcssなどを変更する必要があるかもしれませんが、とりあえずメモ。
今日はここまで。
VSCode: Latex Work Shop (lualatex)
LaTex環境
LaTexを使う機会も少なくなりましたが、何かをきちんとまとめたい論考などはLaTexで書いています。
最近の動向は分からないのですが、Lua言語で書いた日本語対応のLuaLaTexをよく見かけるようになりました。
VSCodeでの設定は下記のまま。
LaTexテンプレートはとりあえず、そのページからたどれる下記にしました。
うん、快適ですが、LuaLaTexはpLaTexなどに比べると出力までの時間が長いですね。
また、日本語環境の場合、Pandocで使えるLaTexがLuaLatexらしい。以下のリンクをはじめとしたリンクは読み応えがあります。
VSCode+Pandoc→PDFのケースだといろいろいじってみるのも楽しそうです。
参考ページがたくさんあるので、私ごときがしゃしゃりでる内容ではありません。(笑)
今日はここまで。
2020.5.21追記
日本語フォントについて調べていたら。TexLive2020以降では「原の味」フォントが標準となっているとか。
もう、ご尽力された方々、各方面の皆様、八百万の神様、感謝、感謝の言葉しかありません。例題があったのでPDFにしてみました。出力は次のようになりました。
VSCode:MPEのまとめ
MPEの機能
ブログなのでその時自分が思ったことをつらつら書いていて、いつかまとめようと思うわけです。
ここは名前のとおりガラクタ箱なので、読みにくい物、何をしているのか分からないことも、本人からみると思考過程が わかって良い物なのですが、もう少し詳しくなったらQiitaにでもまとめます。
ところで、MPEのコンテキストメニューを手を動かしながら読み解いていくと、つぎのようになっているかと思います。
パーサー、レンダラーがいいのか、その日本語訳が正しいかはわかりません。(泣)
いずれにしても分かったことは、PDFにする際にはCSSで様式を整えられること、同様の機能を持つVSCodeの拡張機能にもいろいろな違いがあることです。
Markdown-PDFの出力などと比べてみましょう。
puppeteer PDFの設定
上のMPEでコード背景が違う場合、次の設定をします。だいぶ悩んだんですが.... 検索して見つかったのはここです。
これに該当する設定を探しました。ctrl + ,で以下。
それで、フロントマターを次のようにする。
--- title: "Habits" author: John Doe date: March 22, 2005 output: pdf_document print_background: true ---
そうしたら、こうなります。
MPEとMarkdown-PDFのシンタックスハイライター
MPEは、Prism.js、Markdown-PDFはhighlight.jsの違いがあるようです。
余談
JavaScript、CSSまでは聞いたことがあったのですが、TypeScriptやlesscssというのがあるというのを初めて知りました。(汗；
VScode：Markdown Preview Enhanced(MPE)～Pandoc
MPEの第2回目、いろいろな出力形式を比較しています。 今日はPandocについてやってみたことを書きます。と、その前にPandocのオンラインマニュアルを参照します。
Pandoc オンラインマニュアル
日本Pandocユーザー会 pandoc-doc-ja.readthedocs.io
Pandoc User's Guide
この中で注意するのは次のようなもの
- PDFへの変換にはLaTexを使っていて、TexLiveに入っているということ。(ただし、英語圏など用)
- 文字コードはUTF-8
- pandocは文書をネイティブ表現にするReader群とターゲットの出力形式にするWriter群から構成される。
- (どこで見たか忘れましたが。)ネイティブ表現=中間形式?はHTMLのようなもの。
日本語PDFは拡張機能のLatex Workshopで整理することにして、とりあえず英語の変換を行ってみます。
Pandocのインストール(by chocolatery)
Powershellかコマンドプロンプトを管理者権限で起動して、chocolateyからインストールします。
> choco install pandoc
MPEのマニュアル
このマニュアルを参照します。
意訳してみましょう。
Markdown Preview Enhanced supports pandoc document export feature that works similarly to RStudio Markdown. To use this feature, you need to have pandoc installed.
(意訳) MPEはRStudio Markdownと同様に機能するpandoc docment exportをサポートしています。この機能を使うには、pandocのインストールが必要です。(Rstudio Markdownもwordやhtmlに変換できますが、MPEはこれにインスパイアされたのかもしれません。)
Installation instruction of pandoc can be found here. You can use pandoc document export by right clicking at the preview, then you will see it on the context menu.
(意訳)インストール方法はここ(リンク先)で見つけることができます。pandoc document exportはプレビュー画面でマウスボタンを右クリックし、コンテキストメニューで見つけられます。
Pandoc parser
By default Markdown Preview Enhanced uses markdown-it to parse markdown.You can also set it to pandoc parser from package settings.
(意訳)既定のMPEはmarkdownをパース(翻訳、変換)するのに https://github.com/markdown-it/markdown-it を使います。pandocのパーサー(翻訳器、変換器)を使うにはパッケージの設定をしてください。
You can also set pandoc arguments for individual files by writing front-matter
(意訳)個々のファイルのフロントマターにpandocの引数を書くことができます。
--- pandoc_args: ["--toc", "--toc-depth=2"] ---
Attention: This feature is still experimental. Feel free to post issues or suggestions.
(意訳)注意：この機能はまだ実験的な機能です。問題や議論は自由に投稿してください。
Known Issues & Limitations:
(意訳)既知の問題と制限:
- ebook export has problem.
(意訳) ebookへの出力には問題があります。
- Code Chunk is sometimes buggy.
(意訳)コードチャンクは時々バグが発生します。
ここまで意訳してきて、このコードチャンクやプログラムチャンクは、markdown文書の中に実際のプログラムを書いて、実行した結果を文書に反映させるような機能です。Rmdの主要な機能なので、もしかしたら別途入れている拡張機能「R Markdown All in One」の方が、pandocの機能を生かす場合には良いかもしれませんね。
wordへの出力
pandoc、Latex、R markdown All in One、vscode-pandocなどいろいろなからみが出てきそうなので、ここではMicrosoft Word(docx)の出力方法のみをまとめてみます。
フロントマターは例題ではつぎのようになっています。
-- title: "Hi there" output: pdf_document ---
これを、ドキュメントを参考にしてつぎのように変更しました。
--- title: "Habits" author: John Doe date: March 22, 2005 output: word_document: path: ./Habits.docx highlight: breezeDark ---
docxへの変換は次のようになりました。
数式なども変換されていてびっくりです。書式は「表題」、「見出し１」などに設定されていて編集するのも楽そうですが、「段落」は「First paragraph」になっているなど、もう少し勉強してみる必要があるようです。でも満足。
highlight: breezeDarkはいくつかテーマを選べるようです。
また、「見出し」の書式などをあらかじめ設定したdocx(ここでは、mystyles.docx)を用意しておき、その書式に沿って変換する場合には、
output:
word_document:
path: ./Habits.docx
highlight: breezeDark
reference_docx: mystyles.docx
という風にする。とドキュメントにあります。
Pandocはもう少し勉強してみる必要がありますね。
VScode：Markdown Preview Enhanced(MPE)~概略
概略
Markdown Preview Enhanced、インターネット上では単にMPEと略されることも多いようです。
VScodeのMarketPlaceでmarkdown @sort:installsと入力すると、インストール順では4番目に人気があるようです。
このMPE、拡張機能の良さはMarkdown文書をプレビューし、得たいフォーマット（主にPDF形式）にマウス操作で、変換できることです。 ただし、Markdownでは微調整が効かなかったり、ほかの文書形式にして、より高機能なこと(プログラムソースの流し込み、できないですよね?、できたら...)はAsciidocで行ったり、提出様式が決められている場合にはLatex、docx形式で整える場合も少なくないです。
マウス右クリックメニューは次のようなものです。
これを、略図にしてみましょう。
凡例をつけ忘れましたが。
- 背景が緋色 (MPEなど)
- 背景が黒(Papeteer、Calibre、Pandoc)
- ライブラリと私は呼んでいますが、VScode外のほかのプログラムを呼び出す機能で変換を実現するメニューです。
- HTML
- HTMLも複数のメニューから生成できます。MPE内部になんらかの外部プログラム(javascript)などがあるのかもしれません。ただ、Calibreの出力が綺麗ならそちらを使うべきでしょう。
- PDF
- PDFもHTMLと同様に比較が必要ですね。
- reveal.js
- これは挑戦中なのですが、ここでは、PandocからAsciiDoc→AsciiDoc Slides(でオンライン?)HTMLプレゼンテーションをつくるのと、Pandocからそのままreveal.jsに変換する方法の二つがあります。
ただし、MPEからPandocを使う場合Word、RTF、(LaTexのプレゼンテーション)Beamerが標準的で、カスタム文書がどの程度変換できるかは、今は不明です。
Markdownから最終的にどの文書フォーマットで最終形式で結果を得るか。
これを極めるというか、自分のスタイルを見つけることが、拡張機能を少なくしたり、作業効率を上げるコツではないかと思っています。
Puppeteer
MPEのドキュメントに次のように書かれています。
You need to have the Chrome browser installed. There is an extension setting with name chromePath that allows you to >specify the path to the chrome executable. By default you don't have to >modify it. The MPE extension will look for the path automatically.
(意訳)Chrome ブラウザをインストールして、chromePathにそのインストール先(Path)を設定しろ。ただし、デフォルトではMPE拡張機能は自動的にPathを見つけるので、chromePathは触るな。
Chromeさえ入っていれば、何もしなくて良いらしい。
やってみます。
PDFはSumatraPDFで表示しています。簡単、お手軽でした。
Calibre
まず、CalibreをChocolateyでインストールします。PowerShellの管理者権限で実行しています。
入力
PS C:\Windows\system32> choco install calibre
出力
Chocolatey v0.10.15 Installing the following packages: calibre By installing you accept licenses for the packages. Progress: Downloading calibre 4.15.0... 100% calibre v4.15.0 [Approved] calibre package files install completed. Performing other installation steps. The package calibre wants to run 'chocolateyInstall.ps1'. Note: If you don't run this script, the installation will fail. Note: To confirm automatically next time, use '-y' or consider: choco feature enable -n allowGlobalConfirmation Do you want to run the script?([Y]es/[A]ll - yes to all/[N]o/[P]rint): A
上の行でAを入力しました。
出力
Installing 64-bit calibre... calibre has been installed. calibre may be able to be automatically uninstalled. Environment Vars (like PATH) have changed. Close/reopen your shell to see the changes (or in powershell/cmd.exe just type `refreshenv`). The install of calibre was successful. Software installed to 'C:\Program Files\Calibre2\' Chocolatey installed 1/1 packages. See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log). PS C:\Windows\system32> refreshenv Refreshing environment variables from registry for cmd.exe. Please wait...Finished..
インストールが終了しました。 テストします。
入力
PS C:\Windows\system32> ebook-convert
出力
使用法: ebook-convert.exe 電子書籍のフォーマットを変換します。
出力する電子書籍のフォーマットは、出力ファイルの拡張子から推測されます。出力ファイルの拡張子をEXTとして、output_file は 特別な形式 .EXT と指定することも可能です。この場合、出力ファイル名の本体部分は、入力ファイル名のものが使用されます。ファイル名の先頭にハイフンは使えませんので注意してください。output_file に拡張子をつけなかった場合、出力ファイル名はディレクトリとして見なされ、HTMLファイルで構成されれる "open ebook" (OEB) フォーマットで、指定したディレクトリに出力されます。
入力ファイルと出力ファイルを指定した後ろに、変換をカスタマイズするための様々なオプションを指定することができます。使用可能なオプションは、入出力のファイルタイプに依存します。使用可能なオプションとその使い方を見るためには、入出力のファイルを指定した後ろに、-h オプションを指定してください。
電子書籍変換システムについての完全なドキュメントは下記を参照してください
https://manual.calibre-ebook.com/conversion.html
スペースを含む引数を ebook-convert.exe に渡す場合には、クォーテーションマークでくくってください。例: "C:\some path with spaces"
オプション:
--version プログラムのバージョン番号を表示して終了
-h, --help このヘルプメッセージを表示して終了
--list-recipes ビルトイン・レシピ名の一覧を表示。以下のようにしてビルトイン・レシピから電子書籍を作成できます。: ebook-
convert "Recipe Name.recipe" output.epub
開発者: Kovid Goyal <kovid@kovidgoyal.net>
calibreからのPDF出力はMetadata(おまじない。とする)が必要のようです。MPEの画像の例を使っていますので、おまじないを次のように変更します。MPEのドキュメント
変更前
--- title: "Hi there" output: pdf_document ---
変更後
--- title: "Hi there" output: pdf_document ebook: pdf: paper-size: a4 default-font-size: 19 ---
SumatraPDFの出力。
なんか変かもしれません。
今日はここまで。
VScode：日本語まわり
Japanese Language Pack for Visual Studio Code：UIを日本語にしたい。
普段、VScodeのUIを日本語にして使っています。
英語のWEBページの操作例を参考にする場合は、ロケールを変更したくなります。 説明にありますが、次のようにします。
インストールが完了したら、Japanese Language Pack を読み込むために locale.json 内で "locale": "ja" を設定します。locale.json を編集するには Ctrl+Shift+P を押してコマンド パレットを表示させ、"config" と入力し、利用できるコマンドのリストをフィルター処理してから Configure Language コマンドを選択します。詳細については Docs を参照してください。
zenkaku：全角スペースを検出したい。
日本語を使っている以上、避けては通れない全角スペース。何度これで引っかかって悩んだことか。
こんな感じで表示してもらえます。ありがたや。
2つのコマンドがあり、F1 or Ctrl + Shif + P キーでコマンドコマンドを起動して入力します。
Enable Zenkaku Disable Zenkaku
Trailing Space：スペース削除
余分なスペースを削除していただける、ありがたい機能です。
確かこの記事を見て、うむむと思ったので追加しました。
ショートカットもありますが、F1 or Ctrl + Shif + P キーでコマンドコマンドを起動して使っています。
encdetectjp：日本語のエンコード判定
通常はUTF-8エンコーディングで作業をしていますが、CSVデータや過去に作った文書、VBAバックアップなどはShif-JISになっている場合もあります。
これを判定して注意を促してくれるのがencdetectjpです。 動作すると次のような表示をしてくれます。とても重宝しています。
