diff --git a/docs/src/demos/Extensions/CodeBlock/index.spec.js b/docs/src/demos/Extensions/CodeBlock/index.spec.js index 746605c0..7da58542 100644 --- a/docs/src/demos/Extensions/CodeBlock/index.spec.js +++ b/docs/src/demos/Extensions/CodeBlock/index.spec.js @@ -58,17 +58,6 @@ context('/api/extensions/code-block', () => { .should('not.exist') }) - it('should make a code block from markdown shortcuts', () => { - cy.get('.ProseMirror').then(([{ editor }]) => { - editor.clearContent() - - cy.get('.ProseMirror') - .type('``` Code') - .find('pre>code') - .should('contain', 'Code') - }) - }) - it('should parse the language from a HTML code block', () => { cy.get('.ProseMirror').then(([{ editor }]) => { editor.setContent('
body { display: none; }')
@@ -79,7 +68,29 @@ context('/api/extensions/code-block', () => {
})
})
- it('should make a code block for js', () => {
+ it('should make a code block from backtick markdown shortcuts', () => {
+ cy.get('.ProseMirror').then(([{ editor }]) => {
+ editor.clearContent()
+
+ cy.get('.ProseMirror')
+ .type('``` Code')
+ .find('pre>code')
+ .should('contain', 'Code')
+ })
+ })
+
+ it('should make a code block from tilde markdown shortcuts', () => {
+ cy.get('.ProseMirror').then(([{ editor }]) => {
+ editor.clearContent()
+
+ cy.get('.ProseMirror')
+ .type('~~~ Code')
+ .find('pre>code')
+ .should('contain', 'Code')
+ })
+ })
+
+ it('should make a code block for js with backticks', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
@@ -89,4 +100,15 @@ context('/api/extensions/code-block', () => {
.should('contain', 'Code')
})
})
+
+ it('should make a code block for js with tildes', () => {
+ cy.get('.ProseMirror').then(([{ editor }]) => {
+ editor.clearContent()
+
+ cy.get('.ProseMirror')
+ .type('~~~js Code')
+ .find('pre>code.language-js')
+ .should('contain', 'Code')
+ })
+ })
})
diff --git a/docs/src/docPages/api/extensions/code-block.md b/docs/src/docPages/api/extensions/code-block.md
index 6608c521..a87e56d3 100644
--- a/docs/src/docPages/api/extensions/code-block.md
+++ b/docs/src/docPages/api/extensions/code-block.md
@@ -1,7 +1,7 @@
# CodeBlock
With the CodeBlock extension you can add fenced code blocks to your documents. It’ll wrap the code in `` and `` HTML tags.
-Type three backticks and a space ``` and a code block is instantly added for you.
+Type ``` (three backticks and a space) or ∼∼∼ (three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing ```css . That should add a `language-css` class to the ``-tag.
::: warning Restrictions
The CodeBlock extension doesn’t come with styling and has no syntax highlighting built-in. It’s on our roadmap though.
diff --git a/packages/extension-code-block/index.ts b/packages/extension-code-block/index.ts
index 4119e7ec..9b69b8fb 100644
--- a/packages/extension-code-block/index.ts
+++ b/packages/extension-code-block/index.ts
@@ -13,7 +13,8 @@ declare module '@tiptap/core/src/Editor' {
}
}
-export const inputRegex = /^```(?[a-z]*)? $/
+export const backtickInputRegex = /^```(?[a-z]*)? $/
+export const tildeInputRegex = /^~~~(?[a-z]*)? $/
export default new Node()
.name('code_block')
@@ -62,6 +63,7 @@ export default new Node()
'Shift-Control-\\': () => editor.codeBlock(),
}))
.inputRules(({ type }) => [
- textblockTypeInputRule(inputRegex, type, ({ groups }: any) => groups),
+ textblockTypeInputRule(backtickInputRegex, type, ({ groups }: any) => groups),
+ textblockTypeInputRule(tildeInputRegex, type, ({ groups }: any) => groups),
])
.create()