diff --git a/cypress/integration/examples/code-highlighting.ts b/cypress/integration/examples/code-highlighting.ts
new file mode 100644
index 000000000..c62231eff
--- /dev/null
+++ b/cypress/integration/examples/code-highlighting.ts
@@ -0,0 +1,35 @@
+describe('code highlighting', () => {
+  const slateEditor = '[data-slate-node="element"]'
+  const leafNode = 'span[data-slate-leaf="true"]'
+
+  beforeEach(() => {
+    cy.visit('examples/code-highlighting')
+  })
+
+  it('highlights HTML tags', () => {
+    cy.get(slateEditor)
+      .find('span')
+      .eq(0)
+      .find(leafNode)
+      .eq(0)
+      .should('contain', '<h1>')
+      .should('have.css', 'color', 'rgb(153, 0, 85)')
+  })
+
+  it('highlights javascript syntax', () => {
+    const JSCode = 'const slateVar = 30;{enter}'
+    cy.get('select').select('JavaScript') // Select the 'JavaScript' option
+
+    cy.get(slateEditor)
+      .type('{movetostart}')
+      .type(JSCode) // Type JavaScript code
+
+    cy.get(slateEditor)
+      .find('span')
+      .eq(0)
+      .find(leafNode)
+      .eq(0)
+      .should('contain', 'const')
+      .should('have.css', 'color', 'rgb(0, 119, 170)')
+  })
+})
diff --git a/cypress/integration/examples/markdownShortcuts.ts b/cypress/integration/examples/markdown-shortcuts.ts
similarity index 100%
rename from cypress/integration/examples/markdownShortcuts.ts
rename to cypress/integration/examples/markdown-shortcuts.ts
diff --git a/cypress/integration/examples/readonly.ts b/cypress/integration/examples/read-only.ts
similarity index 100%
rename from cypress/integration/examples/readonly.ts
rename to cypress/integration/examples/read-only.ts