diff --git a/README.md b/README.md index dc938e4..78819bc 100644 --- a/README.md +++ b/README.md @@ -1,47 +1,32 @@ - - -# Description +# [markdown2bootstrapのコードブロックが残念だったので修正した - Qiita](http://qiita.com/tukiyo3/items/2243ea8c17fcdf2b6d10) -Converts a markdown file to a bootstrap-styled web page with a table of contents. It will figure out sections based on the headings used and calculate section numbers. +markdown2bootstrapのコードブロックが残念だったので修正した -From this: +ちょっと頑張ったけど全然ダメな箇所もあって力尽きた。 -![Markdown file](https://raw.github.com/renier/markdown2bootstrap/master/images/markdown.png) +* [成果物 download](https://github.com/tukiyo/markdown2bootstrap) -To this: +## 修正内容 -![Bootstrap web page](https://raw.github.com/renier/markdown2bootstrap/master/images/bootstrap.png) +![before_after.png](https://qiita-image-store.s3.amazonaws.com/0/25728/fc8c1652-949c-1df2-2696-faf266f578ef.png "before_after.png") -# Installing - $ npm install markdown2bootstrap -# Usage +# オリジナルの使い方 - $ node_modules/.bin/markdown2bootstrap doc1.md doc2.md ... - Converted doc1.md to doc1.html - Converted doc2.md to doc2.html - ... - $ cp -a node_modules/markdown2bootstrap/bootstrap ./ +* [renier/markdown2bootstrap](https://github.com/renier/markdown2bootstrap) -Notice that you can convert multiple files by specifying them on the command line. +```bash:インストール +npm install markdown2bootstrap +``` -Now open `doc1.html` in a web browser. You will notice that section numbers are automatically added along with a floating table of contents bootstrap-style. If you want to **turn off section numbering** use the `-n` option: +```bash:markdown->html変換 +cp -a node_modules/markdown2bootstrap/bootstrap . +node_modules/.bin/markdown2bootstrap doc1.md +``` - $ node_modules/.bin/markdown2bootstrap -n doc.md +doc1.htmlが生成される。 -The table of contents will still be created. - -You can also **turn on a bootstrap page header** by passing `-h`. The header uses a title and a subtitle. You can specify them in the markdown document like this: - - - - -You should at least specify a title to give the webpage a proper html `` tag. - -## Output - -The converted files are created in the current directory by default with an extension of `.html`. You can specify a different output directory by using the `--outputdir` option: - - $ node_modules/.bin/markdown2bootstrap --outputdir html doc.md - Converted doc.md to html/doc.html +```bash:タイトルを付けたい場合 +node_modules/.bin/markdown2bootstrap -h true doc1.md +``` diff --git a/README.orig.md b/README.orig.md new file mode 100644 index 0000000..dc938e4 --- /dev/null +++ b/README.orig.md @@ -0,0 +1,47 @@ +<!-- title: markdown2bootstrap.js --> +<!-- subtitle: Converts a markdown document to an html web page using bootstrap styling. --> +# Description + +Converts a markdown file to a bootstrap-styled web page with a table of contents. It will figure out sections based on the headings used and calculate section numbers. + +From this: + +![Markdown file](https://raw.github.com/renier/markdown2bootstrap/master/images/markdown.png) + +To this: + +![Bootstrap web page](https://raw.github.com/renier/markdown2bootstrap/master/images/bootstrap.png) + +# Installing + + $ npm install markdown2bootstrap + +# Usage + + $ node_modules/.bin/markdown2bootstrap doc1.md doc2.md ... + Converted doc1.md to doc1.html + Converted doc2.md to doc2.html + ... + $ cp -a node_modules/markdown2bootstrap/bootstrap ./ + +Notice that you can convert multiple files by specifying them on the command line. + +Now open `doc1.html` in a web browser. You will notice that section numbers are automatically added along with a floating table of contents bootstrap-style. If you want to **turn off section numbering** use the `-n` option: + + $ node_modules/.bin/markdown2bootstrap -n doc.md + +The table of contents will still be created. + +You can also **turn on a bootstrap page header** by passing `-h`. The header uses a title and a subtitle. You can specify them in the markdown document like this: + + <!-- title: This is a title --> + <!-- subtitle: This is a subtitle --> + +You should at least specify a title to give the webpage a proper html `<title>` tag. + +## Output + +The converted files are created in the current directory by default with an extension of `.html`. You can specify a different output directory by using the `--outputdir` option: + + $ node_modules/.bin/markdown2bootstrap --outputdir html doc.md + Converted doc.md to html/doc.html diff --git a/bootstrap/css/qiitanizer.css b/bootstrap/css/qiitanizer.css new file mode 100644 index 0000000..01395c6 --- /dev/null +++ b/bootstrap/css/qiitanizer.css @@ -0,0 +1,7 @@ +/* コードブロックでQiitaのタイトル書式対応 */ +.code_title>span { + font-size:xx-small; + background-color:rgba(0,0,0,0.07); + padding:1px 2px; +} +/* ```lang:title END */ diff --git a/bootstrap/js/qiitanizer.js b/bootstrap/js/qiitanizer.js new file mode 100644 index 0000000..ebde6bc --- /dev/null +++ b/bootstrap/js/qiitanizer.js @@ -0,0 +1,29 @@ +// コードブロックでQiitaのタイトル書式対応 +function set_code_title() { + var li_pun_class = document.getElementsByClassName('pun'); + for(var i=0; i<li_pun_class.length; i++) { + if (li_pun_class[i].innerHTML.match(/^:/)) { + li_pun_class[i].parentNode.className = 'code_title'; + } + } +} +set_code_title(); + +// 1行目はタイトルとみなす。Kobitoからのコピペ対応 +function first_line_as_h1() { + var body = document.getElementsByTagName("body")[0]; + var pattern = /<div class="span9"><p>(.*)?<\/p>/; + var replacement = '<div class="span9"><h1>$1<\/h1>'; + body.innerHTML = body.innerHTML.replace(pattern, replacement); +} +first_line_as_h1(); + +// コードブロック中に#を書くとh1になる不具合をねじ伏せる +function fix_codeblock_bug() { + var codeblock = document.getElementsByTagName("li"); + for(var i=0; i<codeblock.length; i++) { + codeblock[i].innerHTML = codeblock[i].innerHTML.replace(/<h1/,'<text'); + codeblock[i].innerHTML = codeblock[i].innerHTML.replace(/<\/h1>/,'</text>'); + } +} +fix_codeblock_bug(); diff --git a/markdown2bootstrap.js b/markdown2bootstrap.js index 5d9f328..5246b8e 100755 --- a/markdown2bootstrap.js +++ b/markdown2bootstrap.js @@ -60,7 +60,14 @@ converter.hooks.set("postConversion", function(text) { return "<h" + p2 + ' id="' + nextId + '">' + levelStr; }). - replace(/<pre>/g, '<pre class="prettyprint">'). + replace(/<pre>/g, '<pre class="prettyprint linenums">'). + // + replace(/<code>/g, '<pre class="prettyprint linenums">'). + replace(/<\/code>/g, '</pre>'). + // + replace(/<p>```bash:/g, '<pre class="prettyprint linenums">'). + replace(/<p>```<\/p>/g, '</pre>'). + // replace(/".*mailto%3a(.*)"/, function(match, p1) { return "\"mailto:" + p1 + "\""; }); diff --git a/parts/bottom.html b/parts/bottom.html index 930b4b3..9ce2f76 100644 --- a/parts/bottom.html +++ b/parts/bottom.html @@ -12,5 +12,8 @@ <script src="bootstrap/js/bootstrap.js"></script> <script type="text/javascript">prettyPrint();</script> + <link href="bootstrap/css/qiitanizer.css" rel="stylesheet"> + <script src="bootstrap/js/qiitanizer.js"></script> + </body> </html>