diff --git a/examples/src/example.js b/examples/src/example.js
index 7663933..e9cd815 100644
--- a/examples/src/example.js
+++ b/examples/src/example.js
@@ -39,6 +39,7 @@ const initHTML = `<br/>
 <br/>
 <div><center><img src="${imageList[0]}" onclick="_.sendEvent('ImgClick')" contenteditable="false" height="170px"/></center></div>
 <div>
+<pre type="javascript"><code>const editor = ReactNative;</code><code>console.log(editor);</code></pre>
 <br/>Click the picture to switch<br/><br/>
 </div>
 `;
diff --git a/index.d.ts b/index.d.ts
index 57e2278..f06abb8 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -177,6 +177,8 @@ export class RichEditor extends React.Component<RichEditorProps> {
     insertText: (text: string) => void;
 
     insertHTML: (html: string) => void;
+    
+    preCode: (type: string) => void;
 
     /**
      * 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px, 7 = 48px;
diff --git a/src/RichEditor.js b/src/RichEditor.js
index 1c432ee..57eb129 100755
--- a/src/RichEditor.js
+++ b/src/RichEditor.js
@@ -377,6 +377,10 @@ export default class RichTextEditor extends Component {
         }
     }
 
+    preCode (type){
+        this.sendAction(actions.code, 'result', type);
+    }
+
     setFontSize(size) {
         this.sendAction(actions.fontSize, 'result', size);
     }
diff --git a/src/editor.js b/src/editor.js
index 6f8d73a..c51f4bf 100644
--- a/src/editor.js
+++ b/src/editor.js
@@ -12,7 +12,8 @@ function getContentCSS() {
         .x-todo-box input{position: absolute;}
         blockquote{border-left: 6px solid #ddd;padding: 5px 0 5px 10px;margin: 15px 0 15px 15px;}
         hr{display: block;height: 0; border: 0;border-top: 1px solid #ccc; margin: 15px 0; padding: 0;}
-        pre{padding: 10px 5px 10px 10px;margin: 15px 0;display: block;line-height: 18px;background: #F0F0F0;border-radius: 3px;font-size: 13px; font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace; white-space: pre; word-wrap: normal;overflow-x: auto;}
+        pre{padding: 10px 5px 10px 10px;margin: 15px 0;display: block;line-height: 18px;background: #F0F0F0;border-radius: 6px;font-size: 13px; font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace; word-break: break-all; word-wrap: break-word;overflow-x: auto;}
+        pre code {display: block;font-size: inherit;white-space: pre-wrap;color: inherit;}
     </style>
     `;
 }
@@ -266,7 +267,18 @@ function createHTML(options = {}) {
                 state: function() { return queryCommandState('insertUnorderedList');},
                 result: function() { if (!!checkboxNode(window.getSelection().anchorNode)) return; return exec('insertUnorderedList');}
             },
-            code: { result: function() { return exec(formatBlock, '<pre>'); }},
+            code: { result: function(type) {
+                var flag = exec(formatBlock, '<pre>');
+                var node = anchorNode.nodeName === "PRE" ? anchorNode: anchorNode.parentNode;
+                if (node.nodeName === 'PRE'){
+                    type && node.setAttribute("type", type);
+                    node.innerHTML = "<code type='"+(type || '') +"'>" + node.innerHTML + "</code>";
+                    setTimeout(function (){
+                        setCollapse(node.firstChild);
+                    });
+                }
+                return flag;
+             }},
             line: { result: function() { return exec('insertHorizontalRule'); }},
             redo: { result: function() { return exec('redo'); }},
             undo: { result: function() { return exec('undo'); }},
diff --git a/web/index.html b/web/index.html
index c33076d..74e606d 100644
--- a/web/index.html
+++ b/web/index.html
@@ -86,6 +86,7 @@
     const HTML = createHTML({
         cssText: 'html {overflow-y: auto;}',
         pasteAsPlainText: false,
+        useContainer: false,
     });
     window.actions = actions;
     const initHTML = `