CG2-livecodeをdivではなくsectionで出力 (#12)

Author: yomotsu

README.md

@@ -93,7 +93,7 @@ cgmdパターンは、通常のMarkdownの中に混ぜて書くことができ
 ↓
 
 ```html
-<div class="CG2-livecode">
+<section class="CG2-livecode">
   <header class="CG2-livecode__header">
     <div class="CG2-livecode__label">
       DEMOタイトル
@@ -111,7 +111,7 @@ cgmdパターンは、通常のMarkdownの中に混ぜて書くことができ
   <div class="CG2-livecode__body">
     <iframe src="http://example.com/demo.html"></iframe>
   </div>
-</div>
+</section>
 ```
 
 クリックで再生モードにしたい場合。
@@ -194,7 +194,7 @@ p またの名をpugとも言う
 GFMのコードブロックで、Syntaxに続けて`#コードのタイトル`を指定すると、以下が出力されます。
 
 ```html
-<div class="CG2-livecode">
+<section class="CG2-livecode">
   <header class="CG2-livecode__header">
     <div class="CG2-livecode__label">素敵なdiv</div>
   </header>
@@ -203,7 +203,7 @@ GFMのコードブロックで、Syntaxに続けて`#コードのタイトル`
       &lt;div&gt;&lt;/div&gt;
     </code></pre>
   </div>
-</div>
+</section>
 ```
 
 コードのタイトル指定がない場合、通常のMarkdownのコードブロックとして処理されます。

lib/renderer/md/code.js

@@ -5,12 +5,12 @@ var marked = require('marked');
 var origCodeRender = marked.Renderer.prototype.code;
 
 var template = '' +
-  '<div class="CG2-livecode">\n' +
+  '<section class="CG2-livecode">\n' +
     '<header class="CG2-livecode__header">\n' +
       '<div class="CG2-livecode__label">%s</div>\n' +
     '</header>\n' +
     '<div class="CG2-livecode__body">%s</div>\n' +
-  '</div>\n';
+  '</section>\n';
 
 /**
  * `code`ブロックの拡張

lib/transformer/demo.js

@@ -2,15 +2,15 @@
 var util = require('util');
 
 var template = '' +
-  '<div class="CG2-livecode" %s>' +
+  '<section class="CG2-livecode" %s>' +
     '<header class="CG2-livecode__header">' +
       '<div class="CG2-livecode__label">%s</div>' +
       '<div class="CG2-livecode__nav">' +
         '<ul>%s</ul>' +
       '</div>' +
     '</header>' +
     '<div class="CG2-livecode__body">%s</div>' +
-  '</div>';
+  '</section>';
 
 var sourceTemplate = '' +
   '<li>' +

test/cgmd/renderer/md/code.js

@@ -25,14 +25,14 @@ describe('#code', function() {
   it('言語とタイトル指定が正しい場合は拡張したやつ', function() {
     var html = renderer.render('```html#title\nhoge\n```');
     var expect = '' +
-      '<div class="CG2-livecode">\n' +
+      '<section class="CG2-livecode">\n' +
         '<header class="CG2-livecode__header">\n' +
           '<div class="CG2-livecode__label">title</div>\n' +
         '</header>\n' +
         '<div class="CG2-livecode__body">' +
           '<pre><code class="lang-html">hoge\n</code></pre>\n' +
         '</div>\n' +
-      '</div>\n';
+      '</section>\n';
     assert.equal(html, expect);
   });
 });

test/cgmd/transformer/demo.js

@@ -8,19 +8,19 @@ describe('CodeGridMarkdown - Transformer - Demo', function() {
 describe('#demo', function() {
   it('レンダリングされること: クリックして再生', function() {
     var res = Transformer.transform('<div class="Demo">\n<h1>タイトル</h1>\n<iframe data-src="http://example.com" data-deferred="true"></iframe>\n</div>\n');
-    var expect = '<div class="CG2-livecode" data-livecode-deferred=""><header class="CG2-livecode__header"><div class="CG2-livecode__label">タイトル</div><div class="CG2-livecode__nav"><ul><li><a href="http://example.com">新規タブで開く</a></li></ul></div></header><div class="CG2-livecode__body"><iframe data-src="http://example.com" data-deferred="true"></iframe></div></div>\n';
+    var expect = '<section class="CG2-livecode" data-livecode-deferred=""><header class="CG2-livecode__header"><div class="CG2-livecode__label">タイトル</div><div class="CG2-livecode__nav"><ul><li><a href="http://example.com">新規タブで開く</a></li></ul></div></header><div class="CG2-livecode__body"><iframe data-src="http://example.com" data-deferred="true"></iframe></div></section>\n';
     assert.equal(res, expect);
   });
 
   it('レンダリングされること: そのままのデモ', function() {
     var res = Transformer.transform('<div class="Demo">\n<h1>タイトル</h1>\n<iframe src="http://example.com"></iframe>\n</div>\n');
-    var expect = '<div class="CG2-livecode"><header class="CG2-livecode__header"><div class="CG2-livecode__label">タイトル</div><div class="CG2-livecode__nav"><ul><li><a href="http://example.com">新規タブで開く</a></li></ul></div></header><div class="CG2-livecode__body"><iframe src="http://example.com"></iframe></div></div>\n';
+    var expect = '<section class="CG2-livecode"><header class="CG2-livecode__header"><div class="CG2-livecode__label">タイトル</div><div class="CG2-livecode__nav"><ul><li><a href="http://example.com">新規タブで開く</a></li></ul></div></header><div class="CG2-livecode__body"><iframe src="http://example.com"></iframe></div></section>\n';
     assert.equal(res, expect);
   });
 
   it('レンダリングされること: ソースコードあり', function() {
     var res = Transformer.transform('<div class="Demo">\n<h1>タイトル</h1>\n<a href="http://example.com">ソースコード</a>\n<iframe src="http://example.com"></iframe>\n</div>\n');
-    var expect = '<div class="CG2-livecode"><header class="CG2-livecode__header"><div class="CG2-livecode__label">タイトル</div><div class="CG2-livecode__nav"><ul><li><a href="http://example.com">ソースコード</a></li><li><a href="http://example.com">新規タブで開く</a></li></ul></div></header><div class="CG2-livecode__body"><iframe src="http://example.com"></iframe></div></div>\n';
+    var expect = '<section class="CG2-livecode"><header class="CG2-livecode__header"><div class="CG2-livecode__label">タイトル</div><div class="CG2-livecode__nav"><ul><li><a href="http://example.com">ソースコード</a></li><li><a href="http://example.com">新規タブで開く</a></li></ul></div></header><div class="CG2-livecode__body"><iframe src="http://example.com"></iframe></div></section>\n';
     assert.equal(res, expect);
   });
 });