diff --git a/README.md b/README.md
index c71bde6..824532a 100644
--- a/README.md
+++ b/README.md
@@ -306,6 +306,14 @@ See [`here`](https://github.com/tiavina-mika/mui-tiptap-editor/blob/main/src/dev
   <tr>
     <td>Versions</td>
     <td>Features</td>
+  <tr>
+    <tr>
+    <th><a href="https://github.com/tiavina-mika/mui-tiptap-editor/pull/93">v0.11.0</a></th>
+    <td>
+      <ul>
+        <li>Can use both inline code and code blocks.</li>
+      </ul>
+    </td>
   <tr>
   <tr>
     <th><a href="https://github.com/tiavina-mika/mui-tiptap-editor/pull/91">v0.10.0</a></th>
diff --git a/example/.yarn/install-state.gz b/example/.yarn/install-state.gz
index 10f863a..4f31d93 100644
Binary files a/example/.yarn/install-state.gz and b/example/.yarn/install-state.gz differ
diff --git a/example/package.json b/example/package.json
index fa305cc..254c2e0 100644
--- a/example/package.json
+++ b/example/package.json
@@ -15,7 +15,7 @@
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.3.4",
     "@mui/material": "^5.15.2",
-    "mui-tiptap-editor": "^0.9.29",
+    "mui-tiptap-editor": "^0.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.2",
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 545e1ad..2b7b2da 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,87 +1,90 @@
 
-import { Box, Container, CssBaseline, FormControlLabel, Switch, Tab, Tabs, ThemeProvider, createTheme } from '@mui/material';
+import {
+  Box, Container, CssBaseline, FormControlLabel, Switch, Tab, Tabs, ThemeProvider, createTheme,
+} from '@mui/material';
 import { SyntheticEvent, useEffect, useState } from 'react';
 import { TextEditor, TextEditorReadOnly } from 'mui-tiptap-editor';
-import TiptapParser from "tiptap-parser";
+import TiptapParser from 'tiptap-parser';
 import WithHookForm from './WithHookForm';
 
 const customLabels = {
   editor: {
-    editor: "Editeur",
-    preview: "Aperçu"
+    editor: 'Editeur',
+    preview: 'Aperçu',
   },
   toolbar: {
-    bold: "Gras",
-    italic: "Italique",
-    strike: "Barré",
-    underline: "Souligné",
-    link: "Lien",
-    bulletList: "Liste à puces",
-    orderedList: "Liste ordonnée",
-    alignLeft: "Aligner à gauche",
-    alignCenter: "Aligner au centre",
-    alignRight: "Aligner à droite",
-    alignJustify: "Justifier",
-    blockquote: "Citation",
-    codeBlock: "Code",
-    table: "Table",
-    youtube: "Youtube",
-    undo: "Annuler",
-    redo: "Refaire",
-    mention: "Mention",
-    color: "Couleur du texte",
-    upload: "Ajouter une image"
+    bold: 'Gras',
+    italic: 'Italique',
+    strike: 'Barré',
+    underline: 'Souligné',
+    link: 'Lien',
+    bulletList: 'Liste à puces',
+    orderedList: 'Liste ordonnée',
+    alignLeft: 'Aligner à gauche',
+    alignCenter: 'Aligner au centre',
+    alignRight: 'Aligner à droite',
+    alignJustify: 'Justifier',
+    blockquote: 'Citation',
+    inlineCode: 'Inline code',
+    codeBlock: 'Code',
+    table: 'Table',
+    youtube: 'Youtube',
+    undo: 'Annuler',
+    redo: 'Refaire',
+    mention: 'Mention',
+    color: 'Couleur du texte',
+    upload: 'Ajouter une image',
   },
   headings: {
-    normalText: "Text normal",
-    h1: "En-tête 1",
-    h2: "En-tête 2",
-    h3: "En-tête 3",
-    h4: "En-tête 4",
-    h5: "En-tête 5",
-    h6: "En-tête 6"
+    normalText: 'Text normal',
+    h1: 'En-tête 1',
+    h2: 'En-tête 2',
+    h3: 'En-tête 3',
+    h4: 'En-tête 4',
+    h5: 'En-tête 5',
+    h6: 'En-tête 6',
   },
   table: {
-    table: "Tableau",
-    addColumnBefore: "Ajouter une colonne avant",
-    addColumnAfter: "Ajouter une colonne après",
-    deleteColumn: "Supprimer la colonne",
-    addRowBefore: "Ajouter une ligne avant",
-    addRowAfter: "Ajouter une ligne après",
-    deleteRow: "Supprimer la ligne",
-    mergeCells: "Fusionner les cellules",
-    splitCell: "Diviser la cellule",
-    deleteTable: "Supprimer le tableau",
-    insertTable: "Insérer un tableau",
-    toggleHeaderCell: "Basculer la cellule d'en-tête",
-    toggleHeaderColumn: "Basculer la colonne d'en-tête",
-    toggleHeaderRow: "Basculer la ligne d'en-tête",
-    mergeOrSplit: "Fusionner ou diviser",
-    setCellAttribute: "Définir l'attribut de cellule"
+    table: 'Tableau',
+    addColumnBefore: 'Ajouter une colonne avant',
+    addColumnAfter: 'Ajouter une colonne après',
+    deleteColumn: 'Supprimer la colonne',
+    addRowBefore: 'Ajouter une ligne avant',
+    addRowAfter: 'Ajouter une ligne après',
+    deleteRow: 'Supprimer la ligne',
+    mergeCells: 'Fusionner les cellules',
+    splitCell: 'Diviser la cellule',
+    deleteTable: 'Supprimer le tableau',
+    insertTable: 'Insérer un tableau',
+    toggleHeaderCell: 'Basculer la cellule d\'en-tête',
+    toggleHeaderColumn: 'Basculer la colonne d\'en-tête',
+    toggleHeaderRow: 'Basculer la ligne d\'en-tête',
+    mergeOrSplit: 'Fusionner ou diviser',
+    setCellAttribute: 'Définir l\'attribut de cellule',
   },
   link: {
-    link: "Lien",
-    invalid: "Lien invalid",
+    link: 'Lien',
+    invalid: 'Lien invalid',
   },
   youtube: {
-    link: "Lien",
-    insert: "Insérer la vidéo Youtube",
-    title: "Insérer une vidéo Youtube",
-    invalid: "Lien invalide",
-    enter: "Entrer le lien",
-    height: "Hauteur",
-    width: "Largeur"
+    link: 'Lien',
+    insert: 'Insérer la vidéo Youtube',
+    title: 'Insérer une vidéo Youtube',
+    invalid: 'Lien invalide',
+    enter: 'Entrer le lien',
+    height: 'Hauteur',
+    width: 'Largeur',
   },
   upload: {
-    fileTooLarge: "Fichier trop volumineux",
-    maximumNumberOfFiles: "Nombre maximum de fichiers atteint",
-    enterValidAltText: "Entrez un texte alternatif valide",
-    addAltText: "Ajouter un texte alternatif",
-    invalidMimeType: "Type de fichier invalide",
-    shouldBeAnImage: "Le fichier doit être une image",
-    addLegendText: "Ajouter un texte de légende",
-    enterValidLegendText: "Entrez un texte de légende valide",
-    imageMaxSize: "Taille maximale de l'image"
+    fileTooLarge: 'Fichier trop volumineux',
+    maximumNumberOfFiles: 'Nombre maximum de fichiers atteint',
+    enterValidAltText: 'Entrez un texte alternatif valide',
+    addAltText: 'Ajouter un texte alternatif',
+    invalidMimeType: 'Type de fichier invalide',
+    shouldBeAnImage: 'Le fichier doit être une image',
+    addLegendText: 'Ajouter un texte de légende',
+    enterValidLegendText: 'Entrez un texte de légende valide',
+    imageMaxSize: 'Taille maximale de l\'image',
   },
 };
 
@@ -97,35 +100,35 @@ const tabs = [
   'React Hook Form',
   'Read without editor',
   'Upload image',
-  'Code block'
+  'Code block',
 ];
 
 const mentions = [
-  { label: "Lea Thompson", value: "xxxx1" },
-  { label: "Cyndi Lauper", value: "xxxx2" },
-  { label: "Tom Cruise", value: "xxxx3" },
-  { label: "Madonna", value: "xxxx4" },
-  { label: "Jerry Hall", value: "xxxx5" },
-  { label: "Joan Collins", value: "xxxx6" },
-  { label: "Winona Ryder", value: "xxxx7" },
-  { label: "Christina Applegate", value: "xxxx8" },
-  { label: "Alyssa Milano", value: "xxxx9" },
-  { label: "Molly Ringwald", value: "xxxx10" },
-  { label: "Ally Sheedy", value: "xxxx11" },
-  { label: "Debbie Harry", value: "xxxx12" },
-  { label: "Olivia Newton-John", value: "xxxx13" },
-  { label: "Elton John", value: "xxxx14" },
-  { label: "Michael J. Fox", value: "xxxx15" },
-  { label: "Axl Rose", value: "xxxx16" },
-  { label: "Emilio Estevez", value: "xxxx17" },
-  { label: "Ralph Macchio", value: "xxxx18" },
-  { label: "Rob Lowe", value: "xxxx19" },
-  { label: "Jennifer Grey", value: "xxxx20" },
-  { label: "Mickey Rourke", value: "xxxx21" },
-  { label: "John Cusack", value: "xxxx22" },
-  { label: "Matthew Broderick", value: "xxxx23" },
-  { label: "Justine Bateman", value: "xxxx24" },
-  { label: "Lisa Bonet", value: "xxxx25" }
+  { label: 'Lea Thompson', value: 'xxxx1' },
+  { label: 'Cyndi Lauper', value: 'xxxx2' },
+  { label: 'Tom Cruise', value: 'xxxx3' },
+  { label: 'Madonna', value: 'xxxx4' },
+  { label: 'Jerry Hall', value: 'xxxx5' },
+  { label: 'Joan Collins', value: 'xxxx6' },
+  { label: 'Winona Ryder', value: 'xxxx7' },
+  { label: 'Christina Applegate', value: 'xxxx8' },
+  { label: 'Alyssa Milano', value: 'xxxx9' },
+  { label: 'Molly Ringwald', value: 'xxxx10' },
+  { label: 'Ally Sheedy', value: 'xxxx11' },
+  { label: 'Debbie Harry', value: 'xxxx12' },
+  { label: 'Olivia Newton-John', value: 'xxxx13' },
+  { label: 'Elton John', value: 'xxxx14' },
+  { label: 'Michael J. Fox', value: 'xxxx15' },
+  { label: 'Axl Rose', value: 'xxxx16' },
+  { label: 'Emilio Estevez', value: 'xxxx17' },
+  { label: 'Ralph Macchio', value: 'xxxx18' },
+  { label: 'Rob Lowe', value: 'xxxx19' },
+  { label: 'Jennifer Grey', value: 'xxxx20' },
+  { label: 'Mickey Rourke', value: 'xxxx21' },
+  { label: 'John Cusack', value: 'xxxx22' },
+  { label: 'Matthew Broderick', value: 'xxxx23' },
+  { label: 'Justine Bateman', value: 'xxxx24' },
+  { label: 'Lisa Bonet', value: 'xxxx25' },
 ];
 
 const currentUser = mentions[0];
@@ -134,8 +137,8 @@ const currentUser = mentions[0];
 const getTheme = (mode: 'light' | 'dark') => createTheme({
   palette: {
     mode,
-    },
-  });
+  },
+});
 
 /**
  * mock long promise
@@ -185,145 +188,162 @@ const App = () => {
   // load async default value
   useEffect(() => {
     const fetchData = async () => {
-      await delay(1000)
-      setAsyncDefaultValue('<p>Initial value from API for example</p>')
-    }
+      await delay(1000);
+      setAsyncDefaultValue('<p>Initial value from API for example</p>');
+    };
+
     fetchData();
-  }, [])
+  }, []);
 
   const handleChangeMode = () => {
     setMode(mode === 'light' ? 'dark' : 'light');
-  }
+  };
 
   const handleChange = (_: SyntheticEvent, newValue: number) => {
     setTab(newValue);
   };
 
-    // API call to upload file
-    const uploadFile = async (file: File) => {
-      const formData = new FormData();
-      formData.append("file", file);
-      const response = await fetch("https://api.escuelajs.co/api/v1/files/upload", {
-        method: "POST",
-        body: formData,
-      });
-
-      const data = await response.json();
-      return { id: data.filename, src: data.location };
-    };
+  // API call to upload file
+  const uploadFile = async (file: File) => {
+    const formData = new FormData();
+
+    formData.append('file', file);
+    const response = await fetch('https://api.escuelajs.co/api/v1/files/upload', {
+      method: 'POST',
+      body: formData,
+    });
+
+    const data = await response.json();
+
+    return { id: data.filename, src: data.location };
+  };
 
   return (
     <ThemeProvider theme={getTheme(mode)}>
       <CssBaseline />
-        <Box sx={{ bgcolor: 'background.paper', display: 'flex' }}>
-          {/* -------------------------------------- */}
-          {/* ---------------- tabs ---------------- */}
-          {/* -------------------------------------- */}
-          <Tabs value={tab} onChange={handleChange} aria-label="tabs"sx={{ mb: 2 }}  orientation="vertical" variant="scrollable">
-            {tabs.map((label, index) => (
-              <Tab key={index} label={label} value={index} sx={{ textAlign: 'left', alignItems: 'start' }} />
-            ))}
-          </Tabs>
-
-          {/* --------------------------------------- */}
-          {/* ------------- tabs panels ------------- */}
-          {/* --------------------------------------- */}
-          <Container css={{ marginTop: 10 }}>
-            {/* mode switch */}
-            <div css={{ marginBottom: 18 }}>
-              <FormControlLabel
-                control={
-                  <Switch checked={mode === defaultMode} onChange={handleChangeMode} />
-                }
-                label={mode}
-                css={{ textTransform: 'capitalize' }}
-              />
-            </div>
-            {/* Simple input */}
-            {tab === 0 && <TextEditor placeholder='Type something here...' onChange={v => console.log(v)} />}
-
-            {/* Select toolbar */}
-            {tab === 1 && (
-              <TextEditor
-                placeholder='Type something here...'
-                toolbar={['bold', 'italic', 'underline']}
-              />
-            )}
-            {/* Read only */}
-            {tab === 2 && <TextEditorReadOnly value="<p>Hello word!</p>" />}
-            {/* Custom global styles */}
-            {tab === 3 && (
-              <TextEditor
-                value="<p>Hello word!</p>"
-                rootClassName="root"
-              />
-            )}
-            {/* Each element styles */}
-            {tab === 4 && (
-              <TextEditor
-                value="<p>Hello word!</p>"
-                label="Content"
-                tabClassName="my-tab"
-                labelClassName="my-label"
-                inputClassName="my-input"
-                toolbarClassName="my-toolbar"
-              />
-            )}
-
-            {/* Override labels */}
-            {tab === 5 && (
-              <TextEditor
-                label="Content"
-                labels={customLabels}
-              />
-            )}
-
-            {/* mentions */}
-            {tab === 6 && (
-              <TextEditor
-                label="Content"
-                mentions={mentions}
-                user={currentUser}
-                userPathname="/profile"
-              />
-            )}
-            {/* With default async value */}
-            {tab === 7 && <TextEditor value={asyncDefaultValue} />}
-
-            {/* With React Hook Form */}
-            {tab === 8 && <WithHookForm />}
-
-            {/* Read without editor */}
-            {tab === 9 && (
-              <TiptapParser content={htmlToParse} />
-            )}
-
-
-            {/* Upload image */}
-            {tab === 10 && (
-              <TextEditor
-                content="<img alt='Cute cat' src='https://png.pngtree.com/png-clipart/20230511/ourmid/pngtree-isolated-cat-on-white-background-png-image_7094927.png' />"
-                uploadFileOptions={{
-                  uploadFile,
-                  maxSize: 5,
-                  maxFilesNumber: 2,
-                  allowedMimeTypes: ['image/jpeg', 'image/png', 'image/jpg'],
-                  imageMaxWidth: 900,
-                  imageMaxHeight: 500,
-                }}
-              />
-            )}
-
-            {/* With code */}
-            {tab === 11 && (
-              <TextEditor
-                content={code}
-              />
-            )}
-          </Container>
+      <Box sx={{ bgcolor: 'background.paper', display: 'flex' }}>
+        {/* -------------------------------------- */}
+        {/* ---------------- tabs ---------------- */}
+        {/* -------------------------------------- */}
+        <Tabs
+          aria-label="tabs"
+          orientation="vertical"
+          sx={{ mb: 2 }}
+          value={tab}
+          variant="scrollable"
+          onChange={handleChange}
+        >
+          {tabs.map((label, index) => (
+            <Tab
+              key={index}
+              label={label}
+              sx={{ textAlign: 'left', alignItems: 'start' }}
+              value={index}
+            />
+          ))}
+        </Tabs>
+
+        {/* --------------------------------------- */}
+        {/* ------------- tabs panels ------------- */}
+        {/* --------------------------------------- */}
+        <Container css={{ marginTop: 10 }}>
+          {/* mode switch */}
+          <div css={{ marginBottom: 18 }}>
+            <FormControlLabel
+              css={{ textTransform: 'capitalize' }}
+              label={mode}
+              control={
+                <Switch checked={mode === defaultMode} onChange={handleChangeMode} />
+              }
+            />
+          </div>
+          {/* Simple input */}
+          {tab === 0 && <TextEditor placeholder="Type something here..." onChange={v => console.log(v)} />}
+
+          {/* Select toolbar */}
+          {tab === 1 && (
+            <TextEditor
+              disableTabs={false}
+              placeholder="Type something here..."
+              toolbar={['bold', 'italic', 'underline']}
+              toolbarPosition="top"
+            />
+          )}
+          {/* Read only */}
+          {tab === 2 && <TextEditorReadOnly value="<p>Hello word!</p>" />}
+          {/* Custom global styles */}
+          {tab === 3 && (
+            <TextEditor
+              rootClassName="root"
+              value="<p>Hello word!</p>"
+            />
+          )}
+          {/* Each element styles */}
+          {tab === 4 && (
+            <TextEditor
+              inputClassName="my-input"
+              label="Content"
+              labelClassName="my-label"
+              tabClassName="my-tab"
+              toolbarClassName="my-toolbar"
+              value="<p>Hello word!</p>"
+            />
+          )}
+
+          {/* Override labels */}
+          {tab === 5 && (
+            <TextEditor
+              label="Content"
+              labels={customLabels}
+            />
+          )}
+
+          {/* mentions */}
+          {tab === 6 && (
+            <TextEditor
+              label="Content"
+              mentions={mentions}
+              user={currentUser}
+              userPathname="/profile"
+            />
+          )}
+          {/* With default async value */}
+          {tab === 7 && <TextEditor value={asyncDefaultValue} />}
+
+          {/* With React Hook Form */}
+          {tab === 8 && <WithHookForm />}
+
+          {/* Read without editor */}
+          {tab === 9 && (
+            <TiptapParser content={htmlToParse} />
+          )}
+
+
+          {/* Upload image */}
+          {tab === 10 && (
+            <TextEditor
+              content="<img alt='Cute cat' src='https://png.pngtree.com/png-clipart/20230511/ourmid/pngtree-isolated-cat-on-white-background-png-image_7094927.png' />"
+              uploadFileOptions={{
+                uploadFile,
+                maxSize: 5,
+                maxFilesNumber: 2,
+                allowedMimeTypes: ['image/jpeg', 'image/png', 'image/jpg'],
+                imageMaxWidth: 900,
+                imageMaxHeight: 500,
+              }}
+            />
+          )}
+
+          {/* With code */}
+          {tab === 11 && (
+            <TextEditor
+              content={code}
+            />
+          )}
+        </Container>
       </Box>
     </ThemeProvider>
-  )
-}
+  );
+};
 
-export default App
+export default App;
diff --git a/example/yarn.lock b/example/yarn.lock
index 9713004..eea792b 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -2143,7 +2143,7 @@ __metadata:
     eslint-plugin-react-hooks: "npm:^4.6.2"
     eslint-plugin-react-refresh: "npm:^0.4.12"
     globals: "npm:^15.11.0"
-    mui-tiptap-editor: "npm:^0.9.29"
+    mui-tiptap-editor: "npm:^0.11.0"
     prettier: "npm:^3.3.3"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
@@ -4688,12 +4688,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mui-tiptap-editor@npm:^0.9.29":
-  version: 0.9.29
-  resolution: "mui-tiptap-editor@npm:0.9.29"
+"mui-tiptap-editor@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "mui-tiptap-editor@npm:0.11.0"
   dependencies:
     "@emotion/css": "npm:^11.13.4"
     "@tiptap/extension-bubble-menu": "npm:^2.9.1"
+    "@tiptap/extension-code": "npm:^2.9.1"
     "@tiptap/extension-code-block-lowlight": "npm:^2.9.1"
     "@tiptap/extension-color": "npm:^2.9.1"
     "@tiptap/extension-gapcursor": "npm:^2.9.1"
@@ -4722,7 +4723,7 @@ __metadata:
     "@mui/material": ^5.15.2
     react: ^16.8.0 || ^17.0.2 || ^18.2.0
     react-dom: ^16.8.0 || ^17.0.2 || ^18.2.0
-  checksum: 10c0/819f0acb7a3bb7483348b0d43b2a004bbe68728573d9639f1e94dd6024bb3c854281b69baf9e2f47249ea08d1ffcd86d8b26100250c114cbee5ec6e84855c3c5
+  checksum: 10c0/d6a4f7c53c0821066264ecdbdeb4709a4efe393390ba33c389a7d0ac1d3f5feca9a99c0217eefd1bd9e1f0425620b58cae36ce030e8f96ba088a9262af0a0610
   languageName: node
   linkType: hard
 
diff --git a/src/components/TextEditor.tsx b/src/components/TextEditor.tsx
index cf0da00..2c5c666 100644
--- a/src/components/TextEditor.tsx
+++ b/src/components/TextEditor.tsx
@@ -191,7 +191,7 @@ const TextEditor = ({
                   </BubbleMenu>
                 )}
                 {/* editor field */}
-                <EditorContent editor={editor} />
+                <EditorContent className="stretchSelf" editor={editor} />
                 {/* top or bottom toolbar */}
                 {editor && (
                   <Toolbar