カテゴリー
JavaScript

[超簡単]MarkEd js を使用してmarkdownからhtmlへの変換を行う方法

超簡単です。ブラウザ側で、Markdown から HTML に変換して、表示します。

1. ソースコード

  • HTML
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<div id="IDDivHtmlArea"></div>
  • JavaScript
var IDDivHtmlArea = document.getElementById("IDDivHtmlArea");

IDDivHtmlArea.innerHTML = marked(’# This is Markdown Header’);

これだけです。これだけで、「# This is Markdown Header」がHTML に変換されて表示されます。

2. まず、変換後のHTMLを表示するDivエリアを作成する

まず、HTML で 「IDDivHtmlArea」というID でDivタグを作成します。この中に、Markdown から変換されたHTML文章が表示されます。

3. CDN からライブラリを読み込み

https://cdn.jsdelivr.net/npm/marked/marked.min.js ここから取得します。

4. marked 関数を使用して、MarkdownからHTMLに変換する

marked(’# This is Markdown Header’);

これだけですね。これをIDDivHtmlAreaにセットすれば、完了です。

5. 公式URL

https://github.com/markedjs/marked

カテゴリー
JavaScript TypeScript

NW.js + Typescript で exports is not defined の対処方法

TypeScriptから生成されたJavascriptファイルには、以下が含まれます。

Object.defineProperty(exports, "__esModule", { value: true });

これが、NW.jsに読み込まれたとき、以下のエラーメッセージが出力され、Javascriptが実行できません。

Uncaught ReferenceError: exports is not defined

対処方法

HTMLファイルに以下を記述し、各Javascriptファイルが読み込まれる前に実行されるようにします。

<script>var exports = {"__esModule": true};</script>

こうすることで、exports未定義の状態にならず、実行できるようになります。

カテゴリー
JavaScript

[NodeJS] 警告の発生場所が特定できない場合は、trace-warnings で実行しよう

TypeScript で TCP サーバーを構築していたのですが、MaxListenersExceededWarning のワーニングが
発生しており、原因が分からずにいました。

(node:1396) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGHUP listeners added. Use emitter.setMaxListeners() to increase limit

発生場所を特定する方法の1つに、--trace-warning オプションをつけて実行する方法があります。

d:\work\@node\tcpserver>node --trace-warnings build\PastDataDelete.js
(node:13644) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGHUP listeners added. Use emitter.setMaxListeners() to increase limit
    at _addListener (events.js:243:17)
    at process.addListener (events.js:259:10)
    at fileAppender (d:\work\@node\tcpserver\node_modules\log4js\lib\appenders\file.js:77:11)
    at Object.configure (d:\work\@node\tcpserver\node_modules\log4js\lib\appenders\file.js:88:10)
    at clustering.onlyOnMaster (d:\work\@node\tcpserver\node_modules\log4js\lib\appenders\index.js:59:27)
    at Object.onlyOnMaster (d:\work\@node\tcpserver\node_modules\log4js\lib\clustering.js:74:50)
    at createAppender (d:\work\@node\tcpserver\node_modules\log4js\lib\appenders\index.js:57:21)
    at Object.keys.forEach (d:\work\@node\tcpserver\node_modules\log4js\lib\appenders\index.js:73:25)
    at Array.forEach (<anonymous>)
    at setup (d:\work\@node\tcpserver\node_modules\log4js\lib\appenders\index.js:71:33)

これをみると、log4js まわりで発生しているように見えます。

私の場合の原因

私の場合は、log4js でのログファイル定義を、ログ出力の都度行っていたことが原因でした。

const log4js = require('log4js');
log4js.configure({
appenders : {
    app : {type : 'file', filename : "./log/app.log"}
},
categories : {
    default : {appenders : ['app'], level: 'debug'},
}
});
const logger = log4js.getLogger('app');

これを外に出して、問題解決でした。

カテゴリー
JavaScript

gulp ejs で The following tasks did not complete: ejs が出たときの対処法

gulp ejs ジョブで以下のエラーメッセージに遭遇することがあります。

[21:04:35] The following tasks did not complete: ejs
[21:04:35] Did you forget to signal async completion?

処理の末端まで実行されたのに、終了したと検知されないことが原因です。

対処方法

明示的に終了を宣言します。

具体的には、コールバック関数を実行します。

var gulp = require('gulp');
var ejs = require('gulp-ejs');
var rename = require('gulp-rename');
var outdir = "../public/"

gulp.task('ejs', function(cb) {
    gulp.src(
        [
            '../ejs/*.ejs' //入力ソースパターン&path
            ,'!' + "../../ejs/_*.ejs" //入力除外ソースパターン&path
        ]
    )
        .pipe(ejs())
        .pipe(rename({extname: '.html'})) //出力ファイル名パターン
        .pipe(gulp.dest(outdir)); //出力path

        cb();

});

このように、

gulp.task('ejs', function(cb) {

cb()というコールバックを引数にとってタスクを定義します。

タスクの最後で、

cb();

コールバックを実行します。

こうすることで、

[21:06:50] Starting 'ejs'...
[21:06:50] Finished 'ejs' after 28 ms

ちゃんと終了してくれます。