Uploadしよう！ 〜High Light編〜

あんドーナツ。和洋のセッションが素晴らしい！

時々、気まぐれ

ほぼ修飾をせずに、諸々使用しているんですが、それでも、ちょっと変えてみたい気になることがあります。ほぼ気分。
今回の気分は、Code部分の行数表示に関してです。
まだ、Bloggerの使い方がよく分かってないので、できるのかもしれないですが・・・。
記事を修正すると、修正日時で公開されるので、過去日も修正日になってしまうので、過去分は行数表示無しで行こうかと思っています。（仮に、できるとしても、あれこれ修正するので、いささか・・・）

pandoc変換

Markdownでの記述が、

Test Test

のようになっていると、pandoc後は、

<pre class="lang-python"><code>Test Test</code></pre>

と出力されます。pandocでは、何もせず、単に、markdownを変換しただけの状態です。
ただ、諸々のCode HighlightをsupportできるJavascriptでは、以下のような記述にする／なるようになっています。

<pre><code id="lang-python">Test Test</code></pre>

上記の「id」部分の記述は、Prism.jsでのもので、「lang-xx」もしくは「language-xx」がHighlightをさせるAttributeになります。

Code Highlight on Prism.js

使用しているPrism.jsで、行数表示を行うには、HTML上で、

<pre class="line-numbers"><code id="lang-python">Test Test</code></pre>

のように、<pre>に、「class」属性を記述すれば、可能となっています。

諸々変換

pandoc変換後HTMLからBlogger用HTMLにするための、諸々変換その1を上記仕様に合わせる形でUpdate。
ただし、

  1. 行数表示は記事毎のOn/Offのみ対応
  2. Prism.js特有の仕様は対応不可

となっているので、そこまでして、出力した方がいいのか悩ましいところになっています。

表示有無

当初、行数表示をしなかった理由は、それによって、実表示分から１行当たり数文字少なく表示されるからで。
余分なスクロール等を減らしたいと常々考えているのと、そもそもBrowserをFull Screenで使ってないなどの要件も相まって、 極力「パッと見」でわかるようにしたいからなんですけどね。視野性、インパクト性、見た目、等々、いろいろ考えると、いつも悩ましいことであるな、と思ってしまうのでした。

コメント

コメントを投稿

このブログの人気の投稿

Tabulatorで行こう！ 〜ダイバー編〜

あれから半日 ある程度のところまで、というところで、寝たんだけど。寝付けないわけです（笑） 「何をどうすれば」「あれをこうすれば」「これがああなって」という感じで、脳は活動をやめてないわけです。 ルーチンなので、そのうち、眠りに落ちるのですが、ナカナカ抜けない癖のようなものです。 修正を加えていた「書庫アプリ」も、ほぼ所望には仕上がりをみました。 そうなんだよね Wiredのフロントエンド に関する記事なのですが、「そうね！そうね！」と思ってしまいました。ほんと、移り変わりが早いので、ナカナカ入るタイミングを見つけられないで、今に至ってしまってますからね。大縄跳びに、上手く入れないみたいな（笑） Sort機能 Defaultで、Sortすることになっているので、Sortさせない列に対しては、以下のような設定をします。（一部抜粋） var table = new Tabulator("#example-table", { layout:"fitColumns", columns:[ ... {title:"Gender", field:"gender", headerSort:false}, Full は、こちらに。 Filter機能 Exampleを見ると、いろいろできますが、ここでは、「Text入力」と「選択入力」の二つを紹介。 var table = new Tabulator("#example-table", { layout:"fitColumns", columns:[ {title:"Name", width:150, headerFilter:true}, ... {title:"Favourite Color", field:"col", 　　　　　　　　　 headerFilter:"select", headerFilterParams:{values:true}}, ... ...
続きを読む

Tabulatorで行こう！ 〜違うじゃん編〜

あれから数日 タイトルに書いてしまってるので、なんですが（笑） 「 table.js 」に、再度落ち着いたと思いきや、結局、別のLibraryをいじってるという日々でした。 「 Tabulator 」という多機能のTable操作のライブラリです。 まだ、最終的にやりたいことはできてないのだけど、落とし所は過ぎてるので、カキコ。 初動のハマり箇所 いつものように、ぐぐる先生に、お手伝いをいただきますと、 $("#tabulator-example").tabulator({ layout:"fitColumns", ... と表現されているところが多いのですが、実は、 var table = new Tabulator("#example-table", { layout:"fitColumns", ... というのが、最新では紹介をされています。最初の方は、「 jQuery 」とセットになってるお話なんですが、最新では、いりません。ちなみに、最新は、 4.1 です。 それでも、ｊQueryという場合には、 <script type="text/javascript" src="dist/js/tabulator.min.js"></script> <script type="text/javascript" src="dist/js/jquery_wrapper.min.js"></script> Wrapperが用意されているので、それをimportしてください、ということになっています。（パスは読み替え要です） 必要な設定 最低限の設定は、以下になります。 <link href="dist/css/tabulator.min.css" rel="stylesheet"> <script type="text/javascript" src="dist/js/tabulator.min.js"></scr...
続きを読む

Fedoraで行こう！ 〜音声合成pyttsx3編〜

久しぶり 数年ぶりに、書いてみました。諸々のScriptの調整やら何やら、ございますれば。 Fedoraは、 37 を使用しております。 まあ、もうすぐ、 38 でますけどね。 インストールしてみた ふと、音声合成をやってみたくなり、ぐぐる先生で調べまして、 pyttsx3 なるものがあり、 使えますよ、と。事前で、というか、Python側ではなく、Fedora側で、インストールしておくものもある、 という感じで。 $ sudo dnf install espeak $ pyenv> pip install pyttsx3 pyenv は、 virtualenv にて、仮想的な環境を 構築した上での作業になっております。不要であれば、sudoを使って、インストールすればいいかと 思います。 libespeakのエラー $ python >>> import pyttsx3 >>> engine = pyttsx3.init() >>> engine.setProperty("voice", "Japanese") >>> engine.say("こんにちは") >>> engine.runAndWait() 少なくとも、上記コードは問題が発生したものと同一ではないのですが、上記だと、タイトルに ありますように、 libespeak でエラーになります。単純に、日本語を 解釈をしていない、ということです。 第一の問題 espeak は、日本語を解釈しません。日本語を解釈するのは、 espeak-ng になります。従って、 $ sudo dnf install espeak-ng CLIによるespeak-ngでは、ちゃんと日本語を解釈しますが、pyttsx3の先程のコードでは 問題がクリアになりません。 グーグル先生では、libespeak-ngをlibespeakに、シンボリックリンクすることで対応 というものがでます。 マイルール的に、管理者領域では、通常のUpdateや設定以外では操作しない、と決めている ので、リンクの張り替えによる対応はしないとしました。 第二の問題 $...
続きを読む