Crayon Syntax Highlighter のテスト

Crayon のテストです。

<!doctype html>
<html>
<head>
<title>HTML Test</title>
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}
</script>
<style type="text/css">
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

<!doctype html>

<html>

<head>

// Say hello world until the user starts questioning

// the meaningfulness of their existence.

function helloWorld(world) {

for (var i = 42; --i >= 0;) {

alert('Hello ' + String(world));

}

</script>

p { color: pink }

b { color: blue }

u { color: "umber" }

</style>

</head>

<body>

<h1>Hello world!</h1>

</body>

</html>

手順
（１）新規投稿→テキストモードへ
（２）ツールのメニューボタンから「crayon」を選択
（３）テキスト入力部分にソースを入力
（４）終ったら、上部の「Add」ボタンを押下
詳細な手順は、TECH ACADEMYを参照。

グラフィクスのファイル保存方法

R で作成したグラフィクスのファイルを保存するには
以下の2方法があります。

(1) savePlot

画面にグラフィクスを作成後、savePot関数を呼び出す。

savePlot("filename.ext"), type="type")

 type : "png", "jpeg", etc..

1	type : "png", "jpeg", etc..

(2) バッチスクリプトの使用

png(…) や jpeg(…) などの関数を呼び出し、新しいグラフィクスファイルを開く。
plotやその他の関連関数を呼び出し、グラフィクスイメージを作成する。
dev.off()を呼び出し、グラフィクスファイルを閉じる。

png("filename.ext", width=w, height=h) # w:幅, h:高さ

【例】myPlot.png を作成する

png("myPlot.png", width=648, height=432) # サイズの指定は任意

plot(x, y, main="Scatterplot of X, Y")   # main はタイトル

dev.off()

各プラットフォームで使用できる関数のリストは

help(Devices)

で確認できます。

Rmdファイルの変換

Rmd(Rマークダウン）ファイルの変換メモ。

library(rmarkdown)
render("rm-sample.Rmd", "html_document") # HTMLレポート
render("rm-sample.Rmd", "pdf_document") # PDFレポート
render("rm-sample.Rmd", "word_document") # MS Wordレポート
render("rm-sample.Rmd", "revealjs_presentation", "rm-sample-reveal.html") # revealjs ウェブスライド
render("rm-sample.Rmd", "ioslides_presentation", "rm-sample-io2012.html") # io2012 ウェブスライド
render("rm-sample.Rmd", "beamer_presentation", "rm-sample-beamer.pdf") # beamer スライド

library(rmarkdown)

render("rm-sample.Rmd", "html_document") # HTMLレポート

render("rm-sample.Rmd", "pdf_document") # PDFレポート

render("rm-sample.Rmd", "word_document") # MS Wordレポート

render("rm-sample.Rmd", "revealjs_presentation", "rm-sample-reveal.html") # revealjs ウェブスライド

render("rm-sample.Rmd", "ioslides_presentation", "rm-sample-io2012.html") # io2012 ウェブスライド

render("rm-sample.Rmd", "beamer_presentation", "rm-sample-beamer.pdf") # beamer スライド

MathjaxにおけるLatexコマンドのテスト

\[TeX\]

\[TeX\]

\[LaTeX\]

\[LaTeX\]

$$
\begin{align}
(a+b)^2 &= (a+b)(a+b)          \tag{3.1c}      \\
        &= a^2 + ab + ba + b^2 \tag{$\dagger$} \\
        &= a^2 + 2ab + b^2     \tag{$\ast$}
\end{align}
$$

\begin{align}

(a+b)^2 &= (a+b)(a+b) \tag{3.1c} \\

&= a^2 + ab + ba + b^2 \tag{$\dagger$} \\

&= a^2 + 2ab + b^2 \tag{$\ast$}

\end{align}

$$
\begin{align}
(a+b)^2 &= (a+b)(a+b) \tag{3.1c} \\
&= a^2 + ab + ba + b^2 \tag{$\dagger$} \\
&= a^2 + 2ab + b^2 \tag{$\ast$}
\end{align}
$$

Mathjax Latex の数式を左揃えにする

Mathjax Latex を使用すると、数式が綺麗に表示できます。
ちょっと残念な点は、この数式が「中央揃え」になることです。

通常、ノートの中央に数式を書くことはないですよね。
と言うことで、左揃えにする方法をググって
「MathJax – 数式を左寄せにする方法」
の、「CSSによる左寄せ」を参考にさせてもらいました。
（Latexのコマンドは使用できないようです。）

テーマのCSSを直接変更すると、テーマのバージョンアップの都度
CSSを変更しなければならないので、子テーマにCSSを設定する
事にしました。

【子テーマの作成】

次の手順に従います。

子テーマディレクトリを作成する
style.cssを作成する
functions.phpを作成する

(1) 子テーマディレクトリの作成

http://hoge/huga/wp-content/themes/ の下に、

twentyseventeen-child（テーマが twentyseventeen の場合）

と言うディレクトリを作成する。
（自分が使用しているテーマに合わせ、変更してください。）

(2) style.css の作成

テーマが twentyseventeen の場合、次のように作成する。
コメント部分が重要です。
自分の環境に合わせ修正する必要があります。

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://hoge/huga/wp-content/themes/twentyseventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       your-name
 Author URI:   http://hoge
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-seventeen-child
*/
body{
font-family:"Meiryo UI", “メイリオ”, Meiryo, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, sans-serif;
}
/* Mathjax Latex : left-align */
.MathJax_Display {
  text-align:  left !important;
  text-indent: 1em  !important;
}

Theme Name: Twenty Seventeen Child

Theme URI: http://hoge/huga/wp-content/themes/twentyseventeen-child/

Description: Twenty Seventeen Child Theme

Author: your-name

Author URI: http://hoge

Template: twentyseventeen

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready

Text Domain: twenty-seventeen-child

body{

font-family:"Meiryo UI", “メイリオ”, Meiryo, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, sans-serif;

}

/* Mathjax Latex : left-align */

.MathJax_Display {

text-align: left !important;

text-indent: 1em !important;

}

(3) functions.php の作成

各テーマ共通です。

<?php 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); 
function theme_enqueue_styles() { 
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); 
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') ); 
} ?>

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );

} ?>

Pukiwiki-1.5.1にSyntaxHighlighterを設定する

正式にはサポートされなくなった(?)のか
Pluginが消えてしまった。

仕方がないので、Pukiwiki-1.4.7で使用していたPluginを
そのまま使用してみた。

【導入手順】
(1) プラグイン sh.inc.phpをダウンロードし、解凍後、
Pukiwikiのpluginフォルダに配置してください。
（なお、このプラグインは、現在リンク切れになっているので、筆者のパソコンに設定してあったものです。
利用する場合は、自己責任でどうぞ）
(3) SyntaxHighlighterをダウンロードし、解凍します。
解凍したフォルダ内の「scripts」、「styles」の両フォルダを、pukiwiki フォルダ内の skin/sh フォルダにそのままコピーします。
(4) pukiwiki.ini.php の56行目付近を次のように変更します。

//define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 1); // 1 = Disabled この行をコメントアウトします
define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled　 この行を追加します

これで、ハイライト表示が可能になるが、見映えを改善するため
pukiwiki 内の、skin/sh/styles にある「shCore.css」に次の変更を加えます。

(1) 表示領域の右側に、無条件に縦スクロールバーが表示されるので
それを表示しないようにする

55行目付近

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  overflow-y: hidden !important;  /* この行を追加する */
}

(2) フォントスタイルを変更する

47行目付近

font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;

に

font-family: "Meiry UI",メイリオ,"Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;

好みのフォントを追加する。

【使い方】

#sh(brush){{

ここにコードを配置する

}}

brush の種類は、こちらを見てください。

UTF-8へのコード変換

コードを変換(UTF-8へ)

ubuntu(bash)において、拡張子が .html のファイルのエンコードをEUCからUTF-8へ変換する。

find -name "*.html" | xargs nkf --overwrite -w

文字コード

-j : ISO-2022-JP
-s : Shify-JIS
-e : EUC-JP
-w : UTF-8

（注）nkfのインストール方法は次の通り。

sudo apt-get install nkf

「charset=euc-jp」を含む行の削除

# 3行目を削除し上書き保存する
sed -i -e "3d" *.html

# 複数行を削除する場合の例
# 5～10行目を削除し上書き保存する
sed -i -e "5,10d" *.html

「charset=”UTF-8″」を追加

# 3行目に追加する
sed -i -e '3i <meta charset="utf-8">' *.html

# PHPのDOMを使用する場合は次のようにする
sed -i -e '3i <meta http-equiv="content-type" content="text/html; charset=utf-8" />' *.html

Bootstrap テーブル見出しの中央配置

Bootstrapにおける、テーブル見出しは「左上配置」になり、bootstrapを使う意味がないような気になります。
縦・横中央揃えを指定できるようなクラスも無いようで・・・
rowspanやcolspanでセルを結合した場合は、下の画像の通り、特にひどい状態になります。

縦・横中央に配置するには、CSSで強制的に配置してやらないとダメなようなので、
Firebugで要素を調査したところ、次のように設定すると改善できるようです。

.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > th {
  vertical-align: middle;
  text-align: center;
}

結果は、以下の通りになりました。

なお、tableタグには次のclassを指定してください。

<!-- table-borderedは任意です -->
<table class="table table-bordered">

名前空間付きの要素にアクセスする

かつて、こんな投稿を公開している。

$(xml).find('ksjc\\:PrefCd').each(function(){

確かに、この方法はFirefoxでは正しい対処方法です。
全く未確認のまま公開したものではありません。

でも、Chromeでは未確認でした。
今日、これがChromeでは全く動かないことが分かりました。
今朝4時からず～っと悩み続けました。

結論
名前空間付き要素へのアクセス方法がブラウザ毎に異なる！
Qiitaに、この違いが記載されています。

上記の例の場合は、次の通り書き換えます。

$(xml).find('ksjc\\:PrefCd, PrefCd').each(function(){

これで、FirefoxでもChromeでも動くようになります。
なお、find(‘ksjc\\:PrefCd, PrefCd’)は、‘ksjc\\:PrefCd’ または ‘PrefCd’ の意です。

<gml:Point gml:id="p1">
  <gml:pos>35.60733100 140.10638000</gml:pos>
</gml:Point>

この様な、xmlの属性 gml:id にアクセスする場合は

$(xml).find("Point").each(function(){
  gid = ($(this).attr("gml:id");

名前空間（gml）が必要ですので注意が要ります。

日	月	火	水	木	金	土
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

団塊世代の黄昏