Merge pull request #52 from pxgrid/pre-v7-cleanup

Author: myakura

README.md

@@ -183,7 +183,7 @@ Markdownのリストを`<details>`付きのインタラクティブなファイ
 ```
 
 ```html
-<div class="Free">
+<div class="Tree">
   <h4>ファイルツリー</h4>
   <ul>
     <li class="directory">

example/rendered.html

@@ -13,7 +13,7 @@ <h2>何ができるのか</h2>
 <p>Grid Layout Moduleでは、CSS上でレイアウト情報を定義することができます。<code>display: grid;</code>が指定された親要素にグリッドレイアウト情報を定義し、その子要素では、そのグリッドのどこに配置されるかを定義します。table要素を利用したテーブルレイアウトと似たように思えますが、table要素がHTML側でレイアウト構造を指定することに対し、Grid Layout ModuleではCSS側で、どのようなレイアウト構造にするかを指定します。</p>
 <figure class="ImgBox">
 <h1>ゲーム画面のレイアウト</h1>
-<p><img src="https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/img/img01.png" alt></p>
+<p><img src="https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/img/img01.png" alt=""></p>
 
 </figure>
 <p>広い画面と狭い画面でレイアウトを変更しています。これをGrid Layout Moduleを使い、実現します。</p>
@@ -22,13 +22,14 @@ <h1>ゲーム画面のレイアウト</h1>
 <header class="CG2-livecode__header">
 <div class="CG2-livecode__label">display:gridのHTMLの例</div>
 </header>
-<div class="CG2-livecode__body"><pre><code class="lang-html">&lt;div class=&quot;grid&quot;&gt;
-  &lt;div class=&quot;title&quot;&gt;Title&lt;/div&gt;
-  &lt;div class=&quot;status&quot;&gt;Status&lt;/div&gt;
-  &lt;div class=&quot;memberList&quot;&gt;Member List&lt;/div&gt;
-  &lt;div class=&quot;gameWindow&quot;&gt;Game Window&lt;/div&gt;
-  &lt;div class=&quot;chatWindow&quot;&gt;Chat Window&lt;/div&gt;
-&lt;/div&gt;</code></pre>
+<div class="CG2-livecode__body"><pre><code class="lang-html">&lt;div class="grid"&gt;
+  &lt;div class="title"&gt;Title&lt;/div&gt;
+  &lt;div class="status"&gt;Status&lt;/div&gt;
+  &lt;div class="memberList"&gt;Member List&lt;/div&gt;
+  &lt;div class="gameWindow"&gt;Game Window&lt;/div&gt;
+  &lt;div class="chatWindow"&gt;Chat Window&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
 </div>
 </section>
 <p>次にCSS部分です。<code>display: grid;</code>などを使用して、レイアウト情報を指定します。画面幅が狭くなった時には、メディアクエリでレイアウトを再定義しています。</p>
@@ -40,14 +41,16 @@ <h1>ゲーム画面のレイアウト</h1>
 }
 .chatWindow {
   grid-area: 3 / 2;
-}</code></pre>
+}
+</code></pre>
 <p>たったこれだけで、HTMLの構造からは想像しづらいレイアウトを実現することができます。このデモを新しいウィンドウで開き、ウィンドウサイズを変化させてみると、レイアウトが変更されることを確認できるはずです。</p>
 <div class="Column">
 <h1>コラム：古いシンタックスと最新のシンタックス</h1>
 <p>もしIE10以降やEdgeにも対応したい場合は、Autoprefixerを併用することをおすすめします。この記事の執筆中にAutoprefixerのバージョンが上がり（<a href="https://github.com/postcss/autoprefixer/releases/tag/6.3.0">6.3 “Pro rege et lege”</a>）、最新の仕様に沿った記述をすれば、IE用の記述にも対応ができます。ですが、すべてのGrid Layout Moduleに関するプロパティが古い仕様に対応しているわけではないので注意が必要です。</p>
 <pre><code class="lang-css">.nested-code-block {
   in: the-cg-colum;
-}</code></pre>
+}
+</code></pre>
 
 </div>
 <h2>Grid Layout Moduleに登場する用語</h2>
@@ -81,8 +84,10 @@ <h2>Grid Layout Moduleに登場する用語</h2>
 <p>これらのプロパティを駆使して、レイアウト情報を指定します。<code>justify-content</code>や<code>align-content</code>などは、Flexible Boxで解説したものと同じです。</p>
 <h2>まとめ</h2>
 <p>今回はひとまず基本となる概念、グリッドコンテナとグリッドアイテムについて解説しました。次回はさらにグリッドを基本とするレイアウトに必要な概念と、その実装について解説を進めていきます。じっくりお付き合いください。</p>
-<pre><code>ここは何もついてないブロック</code></pre>
-<pre><code class="lang-html">&lt;div&gt;escape?&lt;/div&gt;</code></pre>
+<pre><code>ここは何もついてないブロック
+</code></pre>
+<pre><code class="lang-html">&lt;div&gt;escape?&lt;/div&gt;
+</code></pre>
 <div class="Column">
 <h1>コラム</h1>
 <p>もしIE10</p>
@@ -92,16 +97,17 @@ <h1>コラム</h1>
 </header>
 <div class="CG2-livecode__body"><pre><code class="lang-css">.nested-code-block {
   in: the-cg-colum;
-}</code></pre>
+}
+</code></pre>
 </div>
 </section>
 
 </div>
 <p>このデモが問題</p>
 <section class="CG2-livecode"><header class="CG2-livecode__header"><div class="CG2-livecode__label">display: gridを利用したレイアウト</div><div class="CG2-livecode__nav"><ul><li><a href="https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html">新規タブで開く</a></li></ul></div></header><div class="CG2-livecode__body"><iframe src="https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html"></iframe></div></section>
-<section class="CG2-livecode"><header class="CG2-livecode__header"><div class="CG2-livecode__label">display: gridを利用したレイアウト(遅延開始)</div><div class="CG2-livecode__nav"><ul><li><a href="https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html">新規タブで開く</a></li></ul></div></header><div class="CG2-livecode__body"><iframe src="https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html" data-deferred></iframe></div></section>
+<section class="CG2-livecode"><header class="CG2-livecode__header"><div class="CG2-livecode__label">display: gridを利用したレイアウト(遅延開始)</div><div class="CG2-livecode__nav"><ul><li><a href="https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html">新規タブで開く</a></li></ul></div></header><div class="CG2-livecode__body"><iframe src="https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html" data-deferred=""></iframe></div></section>
 <p>タイトルのないデモ</p>
-<section class="CG2-livecode"><header class="CG2-livecode__header"><div class="CG2-livecode__label"></div><div class="CG2-livecode__nav"><ul><li><a href="https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html">新規タブで開く</a></li></ul></div></header><div class="CG2-livecode__body"><iframe src="https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html" data-deferred></iframe></div></section>
+<section class="CG2-livecode"><header class="CG2-livecode__header"><div class="CG2-livecode__label"></div><div class="CG2-livecode__nav"><ul><li><a href="https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html">新規タブで開く</a></li></ul></div></header><div class="CG2-livecode__body"><iframe src="https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html" data-deferred=""></iframe></div></section>
 <p>見出しのないファイルツリー</p>
 <div class="Tree">
 <ul>
@@ -114,14 +120,14 @@ <h1>コラム</h1>
 <li data-file-type="css" class="file">layout.css</li>
 <li data-file-type="css" class="file">reset.css</li>
 <li data-file-type="css" class="file">space.css</li>
-<li data-file-type class="file">...</li>
+<li data-file-type="" class="file">...</li>
 </ul></details></li>
 <li class="directory"><details open="true"><summary><strong>components/</strong>
 </summary><ul>
 <li class="directory"><details open="true"><summary>layout/
 </summary><ul>
 <li data-file-type="Astro" class="file">PageLayout.Astro</li>
-<li data-file-type class="file">...</li>
+<li data-file-type="" class="file">...</li>
 </ul></details></li>
 <li class="directory"><details><summary><strong>a-lot-of-files/</strong></summary><ul><li class="file">...</li></ul></details></li>
 </ul></details></li>
@@ -143,14 +149,14 @@ <h3>CSSとテンプレートの構成</h3>
 <li data-file-type="css" class="file">layout.css</li>
 <li data-file-type="css" class="file"><strong>reset.css</strong></li>
 <li data-file-type="css" class="file">space.css</li>
-<li data-file-type class="file">...</li>
+<li data-file-type="" class="file">...</li>
 </ul></details></li>
 <li class="directory"><details open="true"><summary><del>components/</del>
 </summary><ul>
 <li class="directory"><details open="true"><summary>layout/
 </summary><ul>
 <li data-file-type="Astro" class="file">PageLayout.Astro</li>
-<li data-file-type class="file">...</li>
+<li data-file-type="" class="file">...</li>
 </ul></details></li>
 </ul></details></li>
 </ul></details></li>

index.d.ts

@@ -4,10 +4,12 @@ export default class CodeGridMarkdown {
 }
 
 /**
+ * Options for CodeGridMarkdown.
+ *
  * Basically the same as MarkedOptions.
- * Except for `renderer`, `headerIds`, `langPrefix` options.
+ * `renderer`, `headerIds`, `langPrefix` are used internally and cannot be overridden.
  *
- * See also https://github.com/DefinitelyTyped/DefinitelyTyped/blob/551eef84346f7141a6f52da938f484f445b5814a/types/marked/index.d.ts#L433
+ * See also https://marked.js.org/using_advanced#options
  */
 export interface CodeGridMarkdownOptions {
   /**
@@ -30,55 +32,21 @@ export interface CodeGridMarkdownOptions {
    */
   headerPrefix?: string;
 
-  /**
-   * A function to highlight code blocks. The function takes three arguments: code, lang, and callback.
-   */
-  highlight?(
-    code: string,
-    lang: string,
-    callback?: (error: any | undefined, code: string) => void,
-  ): string;
-
-  /**
-   * Mangle autolinks (<email@domain.com>).
-   */
-  mangle?: boolean;
-
   /**
    * Conform to obscure parts of markdown.pl as much as possible. Don't fix any of the original markdown bugs or poor behavior.
    */
   pedantic?: boolean;
 
-  /**
-   * Sanitize the output. Ignore any HTML that has been input.
-   */
-  sanitize?: boolean;
-
-  /**
-   * Optionally sanitize found HTML with a sanitizer function.
-   */
-  sanitizer?(html: string): string;
-
   /**
    * Shows an HTML error message when rendering fails.
    */
   silent?: boolean;
 
   /**
-   * Use smarter list behavior than the original markdown. May eventually be default with the old behavior moved into pedantic.
-   */
-  smartLists?: boolean;
-
-  /**
-   * Use "smart" typograhic punctuation for things like quotes and dashes.
+   * Use "smart" typographic punctuation for things like quotes and dashes.
    */
   smartypants?: boolean;
 
-  /**
-   * Enable GFM tables. This option requires the gfm option to be true.
-   */
-  tables?: boolean;
-
   /**
    * Generate closing slash for self-closing tags (<br/> instead of <br>)
    */

package.json

@@ -13,6 +13,9 @@
   "bin": {
     "cgmd": "bin/cgmd.js"
   },
+  "engines": {
+    "node": ">=24.0.0"
+  },
   "dependencies": {
     "cheerio": "^1.2.0",
     "marked": "7.0.5"
@@ -40,9 +43,5 @@
   "bugs": {
     "url": "https://github.com/pxgrid/codegrid-markdown/issues"
   },
-  "homepage": "https://github.com/pxgrid/codegrid-markdown#readme",
-  "directories": {
-    "example": "example",
-    "test": "test"
-  }
+  "homepage": "https://github.com/pxgrid/codegrid-markdown#readme"
 }