remove syntax stuff

docs/src/_documentation/how_tos/01-customizing-the-toolbar.md

@@ -8,7 +8,7 @@ takes the approach of slotting in HTML.
 
 Heres an example of "slotting" in an embed button.
 
-<%= render Syntax.new("html") do %>
+```html
 <rhino-editor>
   <button
     type="button"
@@ -20,7 +20,7 @@ Heres an example of "slotting" in an embed button.
     Embed
   </button>
 </rhino-editor>
-<% end %>
+```
 
 <rhino-editor>
   <button
@@ -76,9 +76,9 @@ from <https://tabler-icons.io>
 </rhino-editor>
 ) %>
 
-<%= render Syntax.new("html") do %>
+```html
 <%= markdownify(text) %>
-<% end %>
+```
 
 <%= text.html_safe %>
 

docs/src/_documentation/how_tos/03-specifying-accepted-file-types.md

@@ -8,9 +8,9 @@ get forwarded to a hidden `<input type="file">` in the shadow root.
 
 <% text = %(<rhino-editor accept="image/*"></rhino-editor>) %>
 
-<%= render Syntax.new("html") do %>
+```html
 <%= markdownify(text) %>
-<% end %>
+```
 
 <%= text.html_safe %>
 
@@ -36,19 +36,19 @@ function pngOnly (event) {
 document.querySelector("#png-only").addEventListener('rhino-file-accept', pngOnly)
 <% end %>
 
-<%= render Syntax.new("js") do %>
+```js
 <%= text.html_safe %>
-<% end %>
+```
 
 <script type="module">
   <%= text.html_safe %>
 </script>
 
 
 <% text = %(<rhino-editor id="png-only"></rhino-editor>) %>
-<%= render Syntax.new("html") do %>
+```html
 <%= markdownify(text) %>
-<% end %>
+```
 
 <%= text.html_safe %>
 

docs/src/_documentation/how_tos/04-serialize-to-json.md

@@ -8,10 +8,10 @@ instead looking to serialize / deserialize JSON. This
 can be done by rendering the editor with `serializer="json"`
 
 
-<%= render Syntax.new("html") do %>
+```html
 <input id="content" name="content">
 <rhino-editor input="content" serializer="json"></rhino-editor>
-<% end %>
+```
 
 <h2 id="caveats">
   <a href="#caveats">

docs/src/_documentation/how_tos/05-change-the-placeholder.md

@@ -6,7 +6,7 @@ permalink: /how-tos/change-the-placeholder/
 Perhaps you read the [Setup](/tutorials/setup) sections that describe modifying the
 default behavior of the `starterKitOptions`. While you could do the following to modify the placeholder:
 
-<%= render Syntax.new("js") do %>
+```js
 import "rhino-editor/exports/styles/trix.css"
 import { TipTapEditor } from "rhino-editor/exports/elements/tip-tap-editor"
 
@@ -21,12 +21,12 @@ class ExtendedEditor extends TipTapEditor {
     }
   }
 }
-<% end %>
+```
 
 there is actually an easier way if you're only looking to change the placeholder text
 and dont need any additional hooks into the placeholder extension.
 
-<%= render Syntax.new("js") do %>
+```js
 import "rhino-editor/exports/styles/trix.css"
 import { TipTapEditor } from "rhino-editor/exports/elements/tip-tap-editor"
 
@@ -38,4 +38,4 @@ class ExtendedEditor extends TipTapEditor {
     })
   }
 }
-<% end %>
+```

docs/src/_documentation/tutorials/01-getting-started.md

@@ -9,17 +9,17 @@ You can either [install with npm](#install-with-npm) or [install with importmaps
 
 ## Install with npm
 
-<%= render Syntax.new("bash") do %>
+```bash
 npm install rhino-editor
-<% end %>
+```
 
 After installing, we can import it in our project.
 
-<%= render Syntax.new("js") do %>
+```js
 // index.js
 import "rhino-editor"
 import "rhino-editor/exports/styles/trix.css"
-<% end %>
+```
 
 The above will auto-register the `<rhino-editor>` element for you.
 For more ways to initialize the editor, checkout the [Setup](/tutorials/setup) page.
@@ -79,9 +79,9 @@ And you should be ready to go!
 
 To see Rhino Editor appear on your page you can write the following HTML:
 
-<%= render Syntax.new("html") do %>
+```html
 <rhino-editor></rhino-editor>
-<% end %>
+```
 
 And you're on your way! But you're not done yet!
 

docs/src/_documentation/tutorials/02-setup.md

@@ -44,10 +44,10 @@ If you plan to do the same thing across the entire app and may have many instanc
 RhinoEditor running, it may be worth extending
 the RhinoEditor base class and adding your additional functionality.
 
-<%= render Syntax.new("js") do %>
+```js
 import "rhino-editor/exports/styles/trix.css"
 import { TipTapEditor } from "rhino-editor/exports/elements/tip-tap-editor.js"
-<% end %>
+```
 
 You'll notice we don't want to auto-register the
 `<rhino-editor>` component. Instead, we want to extend it,
@@ -73,10 +73,10 @@ Now let's see how we would add extensions:
 <%= File.read("./frontend/javascript/entrypoints/character-counter.js").chomp.html_safe %>
 ```
 
-<%= render Syntax.new("html") do %>
+```html
 <!-- index.html -->
 <extended-rhino-editor></extended-rhino-editor>
-<% end %>
+```
 
 The above will now have a character counter in place for
 the editor! This can be applied to any extensions. You

docs/src/_documentation/tutorials/04-usage-with-rails.md

@@ -18,16 +18,16 @@ the future to make usage easier, but for now we can mimic how Trix handles it.
 
 Let's imagine we had a model like the following:
 
-<%= render Syntax.new("rb") do %>
+```rb
 class Post < ApplicationRecord
   has_rich_text :body
 end
-<% end %>
+```
 
 To achieve the same interaction as `form.rich_text_area :body` from Trix,
 we can do the following:
 
-<%= render Syntax.new("erb") do %>
+```erb
 <%%= form_with model: @post do |form| %>
   <%%= form.hidden_field :body, id: form.field_id(:body), value: form.object.body.try(:to_trix_html) || form.object.body %>
   <rhino-editor
@@ -36,11 +36,11 @@ we can do the following:
     data-direct-upload-url="<%%= rails_direct_uploads_url %>"
   ></rhino-editor>
 <%% end %>
-<% end %>
+```
 
 Which should output HTML that looks something like this:
 
-<%= render Syntax.new("html") do %>
+```html
 <form>
   <input value="" autocomplete="off" type="hidden" name="post[body]" id="post_body">
   <rhino-editor
@@ -49,4 +49,4 @@ Which should output HTML that looks something like this:
     data-direct-upload-url="http://localhost:5100/rails/active_storage/direct_uploads"
   ></rhino-editor>
 </form>
-<% end %>
+```