slate/examples/code-highlighting/value.json

{
  "document": {
    "nodes": [
      {
        "object": "block",
        "type": "paragraph",
        "nodes": [
          {
            "object": "text",
            "leaves": [
              {
                "text":
                  "There are certain behaviors that require rendering dynamic marks on string of text, like rendering code highlighting. For example:"
              }
            ]
          }
        ]
      },
      {
        "object": "block",
        "type": "code",
        "data": {
          "language": "js"
        },
        "nodes": [
          {
            "object": "block",
            "type": "code_line",
            "nodes": [
              {
                "object": "text",
                "leaves": [
                  {
                    "text": "// A simple FizzBuzz implementation."
                  }
                ]
              }
            ]
          },
          {
            "object": "block",
            "type": "code_line",
            "nodes": [
              {
                "object": "text",
                "leaves": [
                  {
                    "text": "for (var i = 1; i <= 100; i++) {"
                  }
                ]
              }
            ]
          },
          {
            "object": "block",
            "type": "code_line",
            "nodes": [
              {
                "object": "text",
                "leaves": [
                  {
                    "text": "  if (i % 15 == 0) {"
                  }
                ]
              }
            ]
          },
          {
            "object": "block",
            "type": "code_line",
            "nodes": [
              {
                "object": "text",
                "leaves": [
                  {
                    "text": "    console.log('Fizz Buzz');"
                  }
                ]
              }
            ]
          },
          {
            "object": "block",
            "type": "code_line",
            "nodes": [
              {
                "object": "text",
                "leaves": [
                  {
                    "text": "  } else if (i % 5 == 0) {"
                  }
                ]
              }
            ]
          },
          {
            "object": "block",
            "type": "code_line",
            "nodes": [
              {
                "object": "text",
                "leaves": [
                  {
                    "text": "    console.log('Buzz');"
                  }
                ]
              }
            ]
          },
          {
            "object": "block",
            "type": "code_line",
            "nodes": [
              {
                "object": "text",
                "leaves": [
                  {
                    "text": "  } else if (i % 3 == 0) {"
                  }
                ]
              }
            ]
          },
          {
            "object": "block",
            "type": "code_line",
            "nodes": [
              {
                "object": "text",
                "leaves": [
                  {
                    "text": "    console.log('Fizz');"
                  }
                ]
              }
            ]
          },
          {
            "object": "block",
            "type": "code_line",
            "nodes": [
              {
                "object": "text",
                "leaves": [
                  {
                    "text": "  } else {"
                  }
                ]
              }
            ]
          },
          {
            "object": "block",
            "type": "code_line",
            "nodes": [
              {
                "object": "text",
                "leaves": [
                  {
                    "text": "    console.log(i);"
                  }
                ]
              }
            ]
          },
          {
            "object": "block",
            "type": "code_line",
            "nodes": [
              {
                "object": "text",
                "leaves": [
                  {
                    "text": "  }"
                  }
                ]
              }
            ]
          },
          {
            "object": "block",
            "type": "code_line",
            "nodes": [
              {
                "object": "text",
                "leaves": [
                  {
                    "text": "}"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "object": "block",
        "type": "paragraph",
        "nodes": [
          {
            "object": "text",
            "leaves": [
              {
                "text": "Try it out for yourself!"
              }
            ]
          }
        ]
      }
    ]
  }
}