support graphql syntax highlight

.github/workflows/github-pages.yml

@@ -10,7 +10,7 @@ jobs:
       - name: build
         run: |
           git -c "user.name=bot" -c "user.email=bot@example" subtree add --prefix pages origin gh-pages
-          npx @marp-team/marp-cli README.md -o pages/index.html
+          npx @marp-team/marp-cli README.md --html -o pages/index.html
       - id: git_status
         run: echo "::set-output name=mod::$(git status pages --porcelain)"
       - name: push

README.md

@@ -9,6 +9,13 @@ WebDINO Japan エンジニア
 [渡邉浩平](https://github.com/kou029w)
 ![w:200](https://github.com/kou029w.png)
 
+<!-- @license https://cdn.jsdelivr.net/npm/highlightjs-graphql@1.0.2/LICENSE -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/styles/default.min.css">
+<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/highlight.min.js"></script>
+<script>module={};</script>
+<script src="https://cdn.jsdelivr.net/npm/highlightjs-graphql@1.0.2/graphql.min.js"></script>
+<script>hljs.registerLanguage("graphql", hljsDefineGraphQL);hljs.highlightAll();</script>
+
 ---
 
 ## GraphQL とは
@@ -20,6 +27,7 @@ https://graphql.org
 ### GraphQL とは API のクエリ言語
 
 サーバーへの問い合わせ (GraphQL Query)
+
 ```graphql
 query {
   pokemon(name: "Pikachu") {
@@ -29,6 +37,7 @@ query {
 ```
 
 サーバーからの応答 (JSON)
+
 ```json
 {
   "data": {
@@ -61,6 +70,7 @@ https://graphql-pokemon2.vercel.app
 - [クエリの実行方法](https://graphql.org/learn/execution/)
 
 ### GraphQL 以外の身近な言語の例:
+
 - クエリ言語: SQL
 - スキーマ言語: [JSON Schema](https://json-schema.org/), [XSD](http://www.w3.org/TR/xmlschema11-1/)
 
@@ -163,18 +173,28 @@ type PokemonDimension {
 ---
 
 ```graphql
-"""ポケモンを表します"""
+"""
+ポケモンを表します
+"""
 type Pokemon {
-  """このオブジェクトのID"""
+  """
+  このオブジェクトのID
+  """
   id: ID!
 
-  """このポケモンの名前"""
+  """
+  このポケモンの名前
+  """
   name: String
 
-  """このポケモンの分類"""
+  """
+  このポケモンの分類
+  """
   classification: String
 
-  """このポケモンの高さの最大と最小"""
+  """
+  このポケモンの高さの最大と最小
+  """
   height: PokemonDimension
 }
 ```
@@ -190,7 +210,7 @@ type Pokemon {
 const pokemonQuery = `{ pokemon(name: "Pikachu") { classification } }`;
 
 fetch(`http://example/?${new URLSearchParams({ query: pokemonQuery })}`)
-  .then(r => r.json())
+  .then((r) => r.json())
   .then(({ data }) => console.log(data?.pokemon?.classification));
 // => "Mouse Pokémon"
 ```
@@ -488,13 +508,13 @@ HTTP GETメソッドによる一般的な[HTTP キャッシュ](https://develope
 
 ### JSON Serialization
 
-GraphQL Value	|JSON Value
+| GraphQL Value     | JSON Value    |
----|---
+| ----------------- | ------------- |
-Map	|Object
+| Map               | Object        |
-List	|Array
+| List              | Array         |
-Null	|null
+| Null              | null          |
-String/Enum Value	|String
+| String/Enum Value | String        |
-Boolean	|true or false
+| Boolean           | true or false |
-Int/Float	|Number
+| Int/Float         | Number        |
 
 https://spec.graphql.org/June2018/#sec-JSON-Serialization