prism.js(1.23.0)を WordPress で利用する

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2021-04-01 (木) 15:11:10 | 最終更新:2021-04-01 (木) 15:48:51

前回 の導入から4年。
prism.js も成長しただろうし
私の言語も広がってきたので
再度導入してみる。

公式:Prism

【環境】
PrismJS: 1.23.0
WordPress: 5.7
導入
設定

公式サイトの ダウンロードページ にて設定。

()内は、<code class=”language-xxxxx”> の xxxxx に設定すべき値。
公式:Supported languages

  • Compression level:
    • カスタマイズをしたいので、[Development version] を選択
  • Core
  • Themes
    • ダークテーマが好きなので、[Okaidia]
  • Languages
    • ☑ Select/unselect all
  • Plugins
    • 次項参照
プラグイン

せっかく Diff を導入したので、そちらで記述してみる。


Line Highlight
Line Numbers
Autolinker
+ Custom Class
Show Language
JSONP Highlight
Highlight Keywords
Remove initial line feed
+ Inline color
+ Keep Markup
Command Line
Unescaped Markup
+ Data-URI Highlight
Toolbar
+ Copy to Clipboard Button
+ Match braces
+ Diff Highlight
+ Treeview
参考サイト

Blogger.comにPrism.jsをCDNで導入する(2020-11-20)

容量

言語追加の方法がわからないので
今回はフル選択してみた。
時代は、5G だしね!
Total filesize: 768.93KB (98% JavaScript + 2% CSS)
ぎゃー!重い・・・
ちなみに前回は
Total filesize: 146.01KB (96% JavaScript + 4% CSS)

でも、読み込み速度はあんまり気にならない。
ラッキー♪

DL、配置、WordPress へ組み込み

prism.js(1.9.0)を WordPress で利用する 参照。

利用

prism.js(1.9.0)を WordPress で利用する 利用 参照。

Keep Markup

(おそらく)今回 Keep Markup プラグインを追加したおかげで
HTML コードを表現する際に < > をエスケープする必要がなくなった。

今まで

< > をエスケープする必要があった。


<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup">
&lt;p&gt;Example&lt;/p&gt;
</code>
</pre>
これから

<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup">
<p>Example</p>
</code>
</pre>
で!

過去記事の表示が崩れてるんだろうな・・・。

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2021-04-01 (木) 15:11:10 | 最終更新:2021-04-01 (木) 15:48:51

Razor

Posted by muchag | Library & PlugIn & AddIn,Visual Studio |
初回投稿:2019-11-16 (土) 19:41:28 | 最終更新:2019-11-16 (土) 22:00:47

MVC 3 から、標準で導入されたらしい。
Microsoft:ASP.NET Core の Razor 構文リファレンス

【環境】
VS: 2019C
文法

インライン式。
「コードナゲット」とも呼ばれるみたい。


複数行に渡る場合以外は、閉じる必要がない。

埋め込み例

コメント

全て使える。

エスケープ

Razor の根幹となる @ を文字列として表記したい場合は
例によって @@ と、重ねて記述する。

サニタイズ

コードブロック

複数行に渡る処理を書きたい場合は、@{} で記述する。

コードブロック内に出力内容を記述することも可能。


構文

if などの構文を記述する際は、コードブロック拡張版を利用する。


javascript

if などの構文を記述する際は、コードブロック拡張版を利用する。


javascript へ値を渡すときは
‘(シングルクォーテーション)
“(ダブルクォーテーション)
いずれかで囲む必要があるらしい。

参考サイト

vaguely:【ASP.NET Core】Razorで遊んでみる(2018-11-08)

Posted by muchag | Library & PlugIn & AddIn,Visual Studio |
初回投稿:2019-11-16 (土) 19:41:28 | 最終更新:2019-11-16 (土) 22:00:47

Laravel Mix -> Hackers Galore 様編

Posted by muchag | CakePHP 3.x,Library & PlugIn & AddIn,困ったTT |
初回投稿:2018-12-07 (金) 13:31:02 | 最終更新:2018-12-11 (火) 23:13:04

【環境】
CakePHP: 3.6.5
php: 7.3.0 rc6
手順
シンボリックリンク問題対応

シンボリックリンク権限問題 解決のために
シンボリックリンクを作成。


mkdir /media/sf_CakeTest/node_modules
mkdir /var/CakeTest
mkdir /var/CakeTest/node_modules
mount --bind /var/CakeTest/node_modules /media/sf_CakeTest/node_modules
package.json 配置

https://github.com/laravel/laravel/blob/master/package.json
を CakePHP3 のルートディレクトリへ配置。

webroot 内に配置しないように。

私は、直接 Laravel 5.7.15 からコピペした。

インストール

cd /media/sf_CakeTest
yarn install
imagemin

imagemin についての警告が出るので、インストール。


warning "laravel-mix > img-loader@3.0.1" has unmet peer dependency "imagemin@^5.0.0 || ^6.0.0".

こちらを解決するために、imagemin をインストール。


yarn add -D imagemin
yarn add v1.12.3
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 14 new dependencies.
info Direct dependencies
└─ imagemin@6.0.0
info All dependencies
├─ @mrmlnc/readdir-enhanced@2.2.1
├─ @nodelib/fs.stat@1.1.3
├─ arrify@1.0.1
├─ call-me-maybe@1.0.1
├─ dir-glob@2.0.0
├─ fast-glob@2.2.4
├─ file-type@8.1.0
├─ glob-to-regexp@0.3.0
├─ globby@8.0.1
├─ ignore@3.3.10
├─ imagemin@6.0.0
├─ merge2@1.2.3
├─ p-pipe@1.2.0
└─ replace-ext@1.0.0
Done in 9.96s.
webpack.mix.js 配置

https://github.com/laravel/laravel/blob/master/webpack.mix.js
を CakePHP3 のルートディレクトリへ配置。

私は、直接 Laravel 5.7.15 からコピペした。

assets ディレクトリ配置
/assets/js/app.js
/assets/sass/app.sass

を配置。

私は、直接 Laravel 5.7.15 からコピペした。

webpack.mix.js 修正

参考サイトのものを基に、自分の環境に合わせて改変。

/webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');


mix.setPublicPath('webroot'); // since not in Laravel, need to help Mix along here
mix.js('assets/js/app.js', 'webroot/js')
.sass('assets/sass/app.scss', '../assets/build/css')
.sass('assets/sass/self.scss', '../assets/build/css')
.styles([
    'assets/build/css/app.css',
    'assets/build/css/self.css'
    ], 'webroot/css/app.css');
テストコード

参考サイトにはテストコードを記述する件があるけど
Laravel からコピペしてきた、ExampleComponent.vue があるので
テストコードはスキップ。

組み込み
/src/Template/Pages/home.ctp

header 閉じタグ直後に3行追加。


body 閉じタグ直前に2行追加。


webpack 始動

npm run watch

 DONE  Compiled successfully in 8082ms                                                                                                                                                                                                                                                                               15:57:56
                                                                                                                                                                                                                                                                                                                       Asset     Size  Chunks                    Chunk Names
  /js/app.js  1.38 MB       0  [emitted]  [big]  /js/app
/css/app.css   198 kB       0  [emitted]         /js/app
表示確認

CakePHP3 のロゴ黒帯下に

Example Component
I’m an example component.

と、ExampleComponent.vue の内容が表示された。

やた~!!

ところが・・・

その後の使い方で 困ったこと が・・・。

webpack.mix.js において
ファイル統合をしようとすると
表示時にデベロッパーツールのコンソールへ謎のエラー、
というか、
コンパイル後の app.js へ、謎の追記がされる。

stack overflow:Uncaught SyntaxError: Invalid or unexpected token in file compiled by Browserify(2016-06-10)
こちらと同じ症状っぽいんだけど、
上記は Elixir 時代のものだし、提示されている方法が Nginx のもので
私の環境は Apache なので、どうしてよいかわからずじまい。

webpack.mix.js

mix.setPublicPath('webroot'); // since not in Laravel, need to help Mix along here
mix.js('resources/assets/js/app.js', 'webroot/js')
.sass('resources/assets/sass/app.scss', 'webroot/css');

これだと問題ないけど


mix.setPublicPath('webroot'); // since not in Laravel, need to help Mix along here
mix.js('assets/js/app.js', 'webroot/js')
.sass('assets/sass/app.scss', '../assets/build/css')
.sass('assets/sass/self.scss', '../assets/build/css')
.styles([
    'assets/build/css/app.css',
    'assets/build/css/self.css'
    ], 'webroot/css/app.css');

これだと
コンパイルは無事に通り、ファイルも生成されるけど
Uncaught SyntaxError: Invalid or unexpected token となり
デベロッパーツール上では、app.js に ******************************************** な感じのが表示される。
コンパイル後の app.js ファイルを直接見てもそんな記述はないけど。。。

わかる方がいらしたら、ぜひ情報をください。

試行錯誤
yarn install

yarn install --no-bin-links
yarn install v1.12.3
info No lockfile found.
[1/4] Resolving packages...
warning laravel-mix > autoprefixer > browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > autoprefixer > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > postcss-merge-rules > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > postcss-merge-rules > caniuse-api > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "laravel-mix > img-loader@3.0.1" has unmet peer dependency "imagemin@^5.0.0 || ^6.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 120.15s.
解決1

warning laravel-mix > autoprefixer > browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > autoprefixer > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > postcss-merge-rules > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning laravel-mix > css-loader > cssnano > postcss-merge-rules > caniuse-api > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

こちらの4行を解決するために

/package.json

へ、下記3行を追記。


"browserslist": [
    "> 1%",
    "last 2 versions"
],

と思ったけど、これでは解決しない。

解決2

こちらは、yarn install 前にはできないので
下記警告が出てから対処。


warning "laravel-mix > img-loader@3.0.1" has unmet peer dependency "imagemin@^5.0.0 || ^6.0.0".

こちらを解決するために、imagemin をインストール。


yarn add -D imagemin
npm run watch1

起動してみると


npm run watch

__ snip __

sh: cross-env: コマンドが見つかりません

と怒られた。

解決

teratail:npm run watch時に「sh: 1: cross-env: not found」のエラー発生(2018-04-05)
を参考にして、package.json を、下記の通り編集。

/package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
}


{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
}
npm run watch2

再び、webpack を起動してみると


npm run watch

__ snip __

These dependencies were not found:

* /media/sf_CakeTest/resources/assets/js/app.js in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
* /media/sf_CakeTest/resources/assets/sass/app.scss in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
解決

これは、resources ディレクトリを Laravel からコピペしたため
assets ディレクトリを配置し忘れていた。

npm run watch3

再び、webpack を起動してみると


npm run watch

__ snip __

 error  in ./resources/assets/sass/app.scss

Module build failed: Error: ENOENT: no such file or directory, scandir '/media/sf_CakeTest/node_modules/node-sass/vendor'
npm rebuild node-sass

Qiita:EC2環境でLaravelのセットアップ中にnode-sassのvenderディレクトリが見つからないと言われたときの対処法(2016-07-21)
を参考に npm rebuild node-sass してみた。


npm rebuild node-sass
npm ERR! path ../node-sass/bin/node-sass
npm ERR! code EROFS
npm ERR! errno -30
npm ERR! syscall symlink
npm ERR! rofs EROFS: read-only file system, symlink '../node-sass/bin/node-sass' -> '/media/sf_CakeTest/node_modules/.bin/node-sass'
npm ERR! rofs Often virtualized file systems, or other file systems
npm ERR! rofs that don't support symlinks, give this error.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-12-07T05_28_07_044Z-debug.log
シンボリックリンク権限問題

件の シンボリックリンク権限問題 が出たので


mkdir /var/CakeTest
mkdir /var/CakeTest/node_modules
mount --bind /var/CakeTest/node_modules /media/sf_CakeTest/node_modules
npm rebuild node-sass再

で、もっかい


npm rebuild node-sass

> node-sass@4.10.0 install /media/sf_CakeTest/node_modules/node-sass
> node scripts/install.js

node-sass build Binary found at /media/sf_CakeTest/node_modules/node-sass/vendor/linux-x64-57/binding.node

> node-sass@4.10.0 postinstall /media/sf_CakeTest/node_modules/node-sass
> node scripts/build.js

Binary found at /media/sf_CakeTest/node_modules/node-sass/vendor/linux-x64-57/binding.node
Testing binary
Binary is fine
node-sass@4.10.0 /media/sf_CakeTest/node_modules/node-sass

それでも vendor ディレクトリは生成されなかった。

npm install node-sass@3.7.0

そこで、
stack overflow:Error: ENOENT: no such file or directory, scandir
に載っていた


npm install node-sass@3.7.0

を実行してみると
大量のログが出たけど
vendor ディレクトリは生成されなかった。

解決?

ここで試しに webpack を起動。


npm run dev

すると、コンパイル完了。

どの時点で、不具合が解消されたか不明。
次回試行まだお預け。

予想

npm rebuild node-sass

こちらで入ってきた node-sass は 4.10.0

そして、3.7.0 を入れたらうまくいったので
4.10.0 の不具合?

参考サイト

Hackers Galore:Using Laravel Mix with CakePHP 3(2018-04-29)

ログ
sh: cross-env: コマンドが見つかりません

npm run watch

> @ watch /media/sf_CakeTest
> npm run development -- --watch


> @ development /media/sf_CakeTest
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

sh: cross-env: コマンドが見つかりません
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional log

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-12-07T04_27_40_334Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ watch: `npm run development -- --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ watch script.
npm ERR! This is probably not a problem with npm. There is likely additional log

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-12-07T04_27_40_345Z-debug.log
ERROR in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

npm run watch

ERROR  Failed to compile with 2 errors                                                                                                                                                                                                                                                                              14:16:59

These dependencies were not found:

* /media/sf_CakeTest/resources/assets/js/app.js in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
* /media/sf_CakeTest/resources/assets/sass/app.scss in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

To install them, you can run: npm install --save /media/sf_CakeTest/resources/assets/js/app.js /media/sf_CakeTest/resources/assets/sass/app.scss                                                                                                                                                                     Asset     Size  Chunks             Chunk Names
/js/app.js  2.76 kB       0  [emitted]  /js/app

ERROR in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Module not found: Error: Can't resolve '/media/sf_CakeTest/resources/assets/js/app.js' in '/media/sf_CakeTest'
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Module not found: Error: Can't resolve '/media/sf_CakeTest/resources/assets/sass/app.scss' in '/media/sf_CakeTest'
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Module build failed: Error: ENOENT: no such file or directory, scandir ‘/media/sf_CakeTest/node_modules/node-sass/vendor’

npm run watch

> @ watch /media/sf_CakeTest
> npm run development -- --watch


> @ development /media/sf_CakeTest
> node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

 10% building modules 1/1 modules 0 active
Webpack is watching the files…
                                                                                                                                                                                                                                                                                    95% emitting                             
 ERROR  Failed to compile with 2 errors                                                                                                                                                                                                                                                                              14:25:46

 error  in ./resources/assets/sass/app.scss

Module build failed: Error: ENOENT: no such file or directory, scandir '/media/sf_CakeTest/node_modules/node-sass/vendor'
    at Object.fs.readdirSync (fs.js:904:18)
    at Object.getInstalledBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/extensions.js:130:13)
    at foundBinariesList (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/media/sf_CakeTest/node_modules/node-sass/lib/binding.js:15:30)
    at Object. (/media/sf_CakeTest/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object. (/media/sf_CakeTest/node_modules/sass-loader/lib/loader.js:3:14)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:13:17)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18

 @ ./resources/assets/sass/app.scss 4:14-266
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

 error  in ./resources/assets/sass/app.scss

Module build failed: ModuleBuildError: Module build failed: Error: ENOENT: no such file or directory, scandir '/media/sf_CakeTest/node_modules/node-sass/vendor'
    at Object.fs.readdirSync (fs.js:904:18)
    at Object.getInstalledBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/extensions.js:130:13)
    at foundBinariesList (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/media/sf_CakeTest/node_modules/node-sass/lib/binding.js:15:30)
    at Object. (/media/sf_CakeTest/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object. (/media/sf_CakeTest/node_modules/sass-loader/lib/loader.js:3:14)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:13:17)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at runLoaders (/media/sf_CakeTest/node_modules/webpack/lib/NormalModule.js:195:19)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:170:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:27:11)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
    at NormalModule.doBuild (/media/sf_CakeTest/node_modules/webpack/lib/NormalModule.js:182:3)
    at NormalModule.build (/media/sf_CakeTest/node_modules/webpack/lib/NormalModule.js:275:15)
    at Compilation.buildModule (/media/sf_CakeTest/node_modules/webpack/lib/Compilation.js:157:10)
    at moduleFactory.create (/media/sf_CakeTest/node_modules/webpack/lib/Compilation.js:460:10)
    at factory (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:243:5)
    at applyPluginsAsyncWaterfall (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:94:13)
    at /media/sf_CakeTest/node_modules/tapable/lib/Tapable.js:268:11
    at NormalModuleFactory.params.normalModuleFactory.plugin (/media/sf_CakeTest/node_modules/webpack/lib/CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/media/sf_CakeTest/node_modules/tapable/lib/Tapable.js:272:13)
    at resolver (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:69:10)
    at process.nextTick (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:196:7)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
                                                                                                                                                                                                                                                                                                                     Asset     Size  Chunks                    Chunk Names
/js/app.js  1.39 MB       0  [emitted]  [big]  /js/app

ERROR in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/lib/loader.js??ref--5-5!./resources/assets/sass/app.scss
Module build failed: Error: ENOENT: no such file or directory, scandir '/media/sf_CakeTest/node_modules/node-sass/vendor'
    at Object.fs.readdirSync (fs.js:904:18)
    at Object.getInstalledBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/extensions.js:130:13)
    at foundBinariesList (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/media/sf_CakeTest/node_modules/node-sass/lib/binding.js:15:30)
    at Object. (/media/sf_CakeTest/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object. (/media/sf_CakeTest/node_modules/sass-loader/lib/loader.js:3:14)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:13:17)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
 @ ./resources/assets/sass/app.scss 4:14-266
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed: Error: ENOENT: no such file or directory, scandir '/media/sf_CakeTest/node_modules/node-sass/vendor'
    at Object.fs.readdirSync (fs.js:904:18)
    at Object.getInstalledBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/extensions.js:130:13)
    at foundBinariesList (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/media/sf_CakeTest/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/media/sf_CakeTest/node_modules/node-sass/lib/binding.js:15:30)
    at Object. (/media/sf_CakeTest/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object. (/media/sf_CakeTest/node_modules/sass-loader/lib/loader.js:3:14)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:13:17)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at runLoaders (/media/sf_CakeTest/node_modules/webpack/lib/NormalModule.js:195:19)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:170:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:27:11)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/media/sf_CakeTest/node_modules/loader-runner/lib/loadLoader.js:36:3)
    at iteratePitchingLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/media/sf_CakeTest/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
    at NormalModule.doBuild (/media/sf_CakeTest/node_modules/webpack/lib/NormalModule.js:182:3)
    at NormalModule.build (/media/sf_CakeTest/node_modules/webpack/lib/NormalModule.js:275:15)
    at Compilation.buildModule (/media/sf_CakeTest/node_modules/webpack/lib/Compilation.js:157:10)
    at moduleFactory.create (/media/sf_CakeTest/node_modules/webpack/lib/Compilation.js:460:10)
    at factory (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:243:5)
    at applyPluginsAsyncWaterfall (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:94:13)
    at /media/sf_CakeTest/node_modules/tapable/lib/Tapable.js:268:11
    at NormalModuleFactory.params.normalModuleFactory.plugin (/media/sf_CakeTest/node_modules/webpack/lib/CompatibilityPlugin.js:52:5)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/media/sf_CakeTest/node_modules/tapable/lib/Tapable.js:272:13)
    at resolver (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:69:10)
    at process.nextTick (/media/sf_CakeTest/node_modules/webpack/lib/NormalModuleFactory.js:196:7)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
 @ ./resources/assets/sass/app.scss
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Posted by muchag | CakePHP 3.x,Library & PlugIn & AddIn,困ったTT |
初回投稿:2018-12-07 (金) 13:31:02 | 最終更新:2018-12-11 (火) 23:13:04

NullReferenceException

Posted by muchag | C#,Library & PlugIn & AddIn |
初回投稿:2018-03-22 (木) 21:29:17 | 最終更新:2018-03-22 (木) 21:38:32

【環境】
NPOI: 2.3.0
Visual C#: 15.5.4(2017)
.NETFramework,Version: v4.6.1
経緯

ある日突然例外がスローされた。

System.NullReferenceException: オブジェクト参照がオブジェクト インスタンスに設定されていません。

見てみると、どうやら GetRow で失敗しているんだけど
何故か、22行目で突然失敗。

原因

CreateRow や CreateCell をしておらず
その行やセルが見つからない、ってことだったみたい。
stack overflow:NullReferenceException accessing Workbook Cells with NPOI(2016-10-23)

これが、一から作成してる Excel ファイルではなく
テンプレートファイルを用意していたので
ちょっと混乱した。

7行目から先は全て空白行なので
21行目も22行目もどちらも空白行なのに
22行目で突然エラー。

解決(邪道)

どうやら、21行目までは見た目空白行であっても
書式設定か何かがされていて、NPOI 側で既存と認識できていたみたい。

なので、100行目までフォント色を「自動」にしたら
例外にならなくなった。

本当は CreateRow や CreateCell をするのが正しい解決方法だと思うけど
今晩は時間がないので暫定で対応。

Posted by muchag | C#,Library & PlugIn & AddIn |
初回投稿:2018-03-22 (木) 21:29:17 | 最終更新:2018-03-22 (木) 21:38:32

editorconfig-eclipse

Posted by muchag | CakePHP 3.x,Eclipse,Library & PlugIn & AddIn |
初回投稿:2018-03-07 (水) 16:21:41 | 最終更新:2018-03-07 (水) 20:45:00

.editorconfig に対応するためのプラグイン。

CakePHP3 の コーディング規約 を調べていたら
.editorconfig なるものの存在を知った。

これを Eclipse で利用できるようになるプラグイン。

【環境】
editorconfig-eclipse: 0.3.0.201702161018 Beta
Eclipse:Oxygen (4.7)
EPP Marketplace Client:1.5.1.v20160929-1432
OS:Windows10 Pro 64bit
インストール
[ヘルプ]-[Eclipse マーケットプレース] 検索窓に「editorconfig」
「editorconfig-eclipse 0.x」がヒットするので [インストール] ライセンスに同意して [完了]
警告:署名なしコンテンツを含むソフトウェアをインストールしています。
このソフトウェアの真正性または妥当性を実証できません。
インストールを続行しますか?

がーん。。。断念。 😥

Posted by muchag | CakePHP 3.x,Eclipse,Library & PlugIn & AddIn |
初回投稿:2018-03-07 (水) 16:21:41 | 最終更新:2018-03-07 (水) 20:45:00

GitFlow for Visual Studio 2017

Posted by muchag | Git,Library & PlugIn & AddIn,Visual Studio |
初回投稿:2018-01-21 (日) 18:49:35 | 最終更新:2018-01-21 (日) 19:00:16

Visual Studio に GitFlow を導入するための機能拡張。

マーケットプレイス:GitFlow for Visual Studio 2017

【環境】
Visual C#: Community 2017
導入

上記ページから、.vsix ファイルを DL して開けば、
インストール作業が始まる。

その前に VS を閉じておくとスムーズ。

インストール後、チーム エクスプローラーのメニューに
「GitFlow」が追加される。

初期設定

「GitFlow」へ移動して [Initialize] [OK]

運用

「GitFlow」へ移動
[Start Feature] [Start Release] [Start Hotfix] [Other]

作成
[Start Feature] Feature 名を入力
[Create Feature]
その他
[Finish Feature] [Finish Release] [Finish Hotfix]
Posted by muchag | Git,Library & PlugIn & AddIn,Visual Studio |
初回投稿:2018-01-21 (日) 18:49:35 | 最終更新:2018-01-21 (日) 19:00:16

さくら VPS -> Composer

Posted by muchag | CentOS,Library & PlugIn & AddIn,PHP,さくらインターネット |
初回投稿:2018-01-16 (火) 22:41:44 | 最終更新:2018-12-02 (日) 18:05:42

【環境】
Composer: 1.6.2
php: 7.1.13
CentOS: 7.4.1708
さくらインターネット:VPS 2G プラン
インストール

curl -sS https://getcomposer.org/installer | php
All settings correct for using Composer
Downloading...

Composer (version 1.6.2) successfully installed to: /root/composer.phar
Use it: php composer.phar
起動

php composer.phar
Do not run Composer as root/super user! See https://getcomposer.org/root for details
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.6.2 2018-01-05 15:28:41

Usage:
  command [options] [arguments]

Options:
  -h, --help                     Display this help message
  -q, --quiet                    Do not output any message
  -V, --version                  Display this application version
      --ansi                     Force ANSI output
      --no-ansi                  Disable ANSI output
  -n, --no-interaction           Do not ask any interactive question
      --profile                  Display timing and memory usage information
      --no-plugins               Whether to disable plugins.
  -d, --working-dir=WORKING-DIR  If specified, use the given directory as working directory.
  -v|vv|vvv, --verbose           Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug

Available commands:
  about                Shows the short information about Composer.
  archive              Creates an archive of this composer package.
  browse               Opens the package's repository URL or homepage in your browser.
  check-platform-reqs  Check that platform requirements are satisfied.
  clear-cache          Clears composer's internal package cache.
  clearcache           Clears composer's internal package cache.
  config               Sets config options.
  create-project       Creates new project from a package into given directory.
  depends              Shows which packages cause the given package to be installed.
  diagnose             Diagnoses the system to identify common errors.
  dump-autoload        Dumps the autoloader.
  dumpautoload         Dumps the autoloader.
  exec                 Executes a vendored binary/script.
  global               Allows running commands in the global composer dir ($COMPOSER_HOME).
  help                 Displays help for a command
  home                 Opens the package's repository URL or homepage in your browser.
  info                 Shows information about packages.
  init                 Creates a basic composer.json file in current directory.
  install              Installs the project dependencies from the composer.lock file if present, or falls back on the composer.json.
  licenses             Shows information about licenses of dependencies.
  list                 Lists commands
  outdated             Shows a list of installed packages that have updates available, including their latest version.
  prohibits            Shows which packages prevent the given package from being installed.
  remove               Removes a package from the require or require-dev.
  require              Adds required packages to your composer.json and installs them.
  run-script           Runs the scripts defined in composer.json.
  search               Searches for packages.
  self-update          Updates composer.phar to the latest version.
  selfupdate           Updates composer.phar to the latest version.
  show                 Shows information about packages.
  status               Shows a list of locally modified packages.
  suggests             Shows package suggestions.
  update               Upgrades your dependencies to the latest version according to composer.json, and updates the composer.lock file.
  upgrade              Upgrades your dependencies to the latest version according to composer.json, and updates the composer.lock file.
  validate             Validates a composer.json and composer.lock.
  why                  Shows which packages cause the given package to be installed.
  why-not              Shows which packages prevent the given package from being installed.
実行ファイルの移動

mv composer.phar /usr/local/bin/composer

これで、直接 composer で利用できる。

アップデート

念の為、アップデート。


composer self-update
おまけ
インストール時警告

実は上記インストール時に、下記2行目の警告が出ていた。


curl -sS https://getcomposer.org/installer | php
PHP Warning:  Module 'intl' already loaded in Unknown on line 0
All settings correct for using Composer
Downloading...

Composer (version 1.6.2) successfully installed to: /root/composer.phar
Use it: php composer.phar

これは、php.ini で extension=intl.so をコメントアウトすることで消えたけど
CakePHP3 をインストールする際に intl は必要なはずなので、後ほど試す。

起動時警告

実は上記起動時に、下記2行目の警告が出ていた。


php composer.phar
Do not run Composer as root/super user! See https://getcomposer.org/root for details

あら、Composer って、root で利用してはいけないのね~。

実行ファイルを移動させて、一般ユーザに戻って利用したら
上記警告は出なくなった。

ちなみに、インストールを root でしたせいか
実行ファイルを移動しておかないと、php composer.phar では、実行できず


php composer.phar
Could not open input file: composer.phar

このように怒られた。。。

参考サイト

WinRoad徒然草:さくらのVPSサーバーにLaravelのインストール(2015-03-23)

Posted by muchag | CentOS,Library & PlugIn & AddIn,PHP,さくらインターネット |
初回投稿:2018-01-16 (火) 22:41:44 | 最終更新:2018-12-02 (日) 18:05:42

prism.js(1.9.0)を WordPress で利用する

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2017-12-07 (木) 22:30:03 | 最終更新:2021-04-02 (金) 18:45:33

今度こそ、長年愛用してきた iG:Syntax Hiliter とおさらばすることになりそう。
寂しい><
前回

公式:Prism

【環境】
PrismJS: 1.9.0
導入
設定

公式サイトの ダウンロードページ にて設定。

わけも分からず、欲張って入れたので
Total filesize: 146.01KB (96% JavaScript + 4% CSS)
あちゃーw

()内は、<code class=”language-xxxxx”> の xxxxx に設定すべき値。
公式:Supported languages

  • Compression level:
    • カスタマイズをしたいので、[Development version] を選択
  • Core
  • Themes
    • ダークテーマが好きなので、[Okaidia]
  • Languages
    • Markup(markup)
    • CSS(css)
    • C-like(clike)
    • JavaScript(javascript)
    • ActionScript(actionscript)
    • Apache Configuration(apacheconf)
    • AppleScript(applescript)
    • Bash(bash)
    • BASIC(basic)
    • Batch(batch)
    • C(c)
    • C#(csharp)
    • C++(cpp)
    • CoffeeScript(coffeescript)
    • Diff(diff)
    • Docker(docker)
    • Git(git)
    • Go(go)
    • Haskel(haskell)
    • HTTP(http)
    • ini(ini)
    • Java(java)
    • JSON(json)
    • Less(less)
    • Markdown(markdown)
    • nginx(nginx)
    • Objective-C(objectivec)
    • PHP(php)
    • .properties(properties)
    • Python(python)
    • Ruby(ruby)
    • Sass (Sass)(sass)
    • Sass (Scss)(scss)
    • Scala(scala)
    • Smarty(smarty)
    • SQL(sql)
    • Stylus(stylus)
    • Swift(swift)
    • Textile(textile)
    • Twig(twig)
    • TypeScript(typescript)
    • VB.Net(vbnet)
    • vim(vim)
    • Wiki markup(wiki)
    • YAML(yaml)
  • Plugins
    • Line Highlight
    • Line Numbers
    • Autolinker
    • Show Language
    • JSONP Highlight
    • Highlight Keywords
    • Remove initial line feed
    • Command Line
    • Unescaped Markup
    • Toolbar

Blogger.comにPrism.jsをCDNで導入する(2020-11-20)

DL

ページ下部より .js と .css を個別に DL。

配置

テーマディレクトリ内に配置。

/theme_directory/css/prism.css
/theme_directory/js/prism.js
WordPress へ組み込み
/wp-includes/functions.php

こちらだと、WordPress をアップデートする度に下記設定が消えてしまうので

/wp-content/themes/[theme_name]/functions.php

へ、下記を追加。
nobbi LABO:WordPressでシンタックスハイライトならPrism.jsが軽量&多機能でベストチョイス(2017-03-27)


/*---------------------------------------------------------
 * Prism.jsの呼び出し
 ----------------------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'startPrism' );
function startPrism() {

 	wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/css/prism.css' );
 	wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/js/prism.js', array('jquery'), '20171206', true );
}
利用
書式

<pre>
<code>

</code>
</pre>

この中にコードを書くだけ。

メタ文字

HTML タグなどは、そのまま書くとおかしくなるので
調整が必要。

エスケープ(サニタイズ)

Syncer:HTML Escape / Unescape
mwSoft Tools:HTMLエスケープ(サニタイズ)ツール

スクリプト扱い

公式:Unescaped markup


<script type="text/plain" class="language-markup">
<p>Example</p>
</script>

と書かれていたけど、実際にやってみるとうまく表示されない。

コメント化

公式:Unescaped markup


<pre class="language-markup"><code><!--
<p>Example</p>
--></code></pre>

と書かれていたけど、実際にやってみるとうまく表示されない。

改行

個人的には、下記のように、code タグとコード本文は改行して記述したいのだけど


<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup">
<script type=&quot;text/plain&quot; class=&quot;language-markup&quot;>
<p>Example</p>
</script>
</code>
</pre>

このように記述すると、下記のごとく、

  • 先頭行が空白
  • 最後尾に空白

という見た目になってしまう。



<script type="text/plain" class="language-markup">
<p>Example</p>
</script>

なので、

  • 公式:Remove initial line feed を導入することで先頭行を解決
  • code 閉じタグをコード本文の最後に続けることで最後尾を解決

<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup">
<script type=&quot;text/plain&quot; class=&quot;language-markup&quot;>
<p>Example</p>
</script></code>
</pre>
HTML(MarkUp)

上記改行も考慮しつつ試した結果
最初と最後の行をコメント識別子と同じ行に記述する。


<pre class="line-numbers" data-language="HTML" data-start="" data-line="">
<code class="language-markup"><pre class="language-markup"><code><!--<script type=&quot;text/plain&quot; class=&quot;language-markup&quot;>
<p>Example</p>
</script></code>
</pre>-->
class

<code> へ class=”language-xxxxx” と指定。


<pre>
<code class="language-xxxxx">

</code>
</pre>

xxxxx に書くべきワードは、上述。

行番号

pre タグへ data-line 属性を記述。

出力行

class=”command-line” 時に data-output 属性を記述して、行番号を指定することで
当該行へプロンプトを出さないように指定できる。

data-filter-output

data-filter-output 属性を記述して、任意の文字列を指定することで
当該行へプロンプトを出さないように指定できる。

行数が多かったり、後で変更が入ったときなど
行番号を指定するのはナンセンスな場合に有効。

参考サイト

打ち聞かせ:シンタックスハイライター Prism JS を使用する(2019-01-20)コマンドライン表示する( Command Line plugin )

サンプル
クラスの設定方法

公式:Different markup

言語毎のサンプル

公式:Per language examples

カスタマイズ
言語表記

下記優先順位にて決定される。

  1. <pre data-language=”xxxxx”>
  2. var Languages に定義されている内容
  3. <code class=”language-xxxxx”>

<code class=”language-xxxxx”> の xxxxx の部分に
prism.js 内に定義されていない語句を書けば、
Plain Text と判断されて、文字色は白一色となり
言語名は、xxxxx がパスカライズされる。

文字サイズ

言語表記が小さいと感じたので、font-size を修正。


pre.code-toolbar > .toolbar a,
pre.code-toolbar > .toolbar button,
pre.code-toolbar > .toolbar span {
	color: #bbb;
	/* font-size: .8em; ← コメントアウト */
	padding: 0 .5em;
	background: #f5f2f0;
	background: rgba(224, 224, 224, 0.2);
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
	border-radius: .5em;
}
行ハイライト

.line-highlight {
	position: absolute;
	left: 0;
	right: 0;
	padding: inherit 0;
	margin-top: 1em; /* Same as .prism’s padding-top */

	background: hsla(24, 20%, 50%,.08);
-	background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+	background: linear-gradient(to right, rgba(255, 255, 0, .3) 70%, rgba(255, 255, 0, 0));

138行目。
hsla はピンとこないので、rgba に書き換えて、アルファ値を調整した。

文字色

諸々調整。

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2017-12-07 (木) 22:30:03 | 最終更新:2021-04-02 (金) 18:45:33

AngularJS Eclipse 1.2.0

Posted by muchag | AngularJS,Eclipse,Library & PlugIn & AddIn |
初回投稿:2017-09-03 (日) 11:21:41 | 最終更新:2018-11-18 (日) 18:59:30

AngularJS 用プラグイン。
eclipse marketplace:AngularJS Eclipse

【環境】
AngularJS Eclipse: 1.2.0.201606160950
Eclipse: Oxygen (4.7)
OS: Windows10 Pro 64bit
インストール

マーケットプレイスからインストール。

適用

プロジェクトのコンテキストメニュー
[構成]-[Convert to AngularJS Project…]

Term Plugin の
[モジュール] というダイアログが出るので [適用して閉じる]

設定
検証

プロジェクトのコンテキストメニュー
[プロパティー]

左ペン [検証]-[HTML 構文] [プロジェクト固有の設定を可能にする] にチェック
[次の検証問題の重大度レベルを選択:]

要素
[不明なタグ名]-[無視] [無効なタグ名]-[無視]
属性
[未定義の属性名]-[無視] [未定義の属性値]-[無視] [適用して閉じる] [検証設定が変更されました] ダイアログがでるので [はい]
アウトライン
[ウィンドウ]-[ビューの表示]-[その他] [JavaScript]-[Tern Outline] で、専用アウトラインビューが開く。

参考サイト

Java Code Geeks:Eclipse IDE AngularJS Tutorial

Posted by muchag | AngularJS,Eclipse,Library & PlugIn & AddIn |
初回投稿:2017-09-03 (日) 11:21:41 | 最終更新:2018-11-18 (日) 18:59:30

EPP Marketplace Client

Posted by muchag | Eclipse,Library & PlugIn & AddIn |
初回投稿:2017-09-03 (日) 10:35:24 | 最終更新:2017-09-03 (日) 10:35:24

プラグイン配布所のクライアント。

【環境】
Eclipse:Oxygen (4.7)
EPP Marketplace Client:1.5.1.v20160929-1432
OS:Windows10 Pro 64bit
概要

Marketplace もプラグインなんだそうで
Oxygen インストール時には、存在しなかったので
手動で追加。

インストール

2017-09-03 現在
Oxygen 用マーケットプレイス配布ページ は、まだ存在しないようなので
Neon 用マーケットプレイス配布ページ からインストールした。

これによる不具合が起きませんように。。。

Posted by muchag | Eclipse,Library & PlugIn & AddIn |
初回投稿:2017-09-03 (日) 10:35:24 | 最終更新:2017-09-03 (日) 10:35:24
次ページへ »