Update to support wrap syntax for code block

4 files changed, 20 insertions, 3 deletions

diff --git a/public/css/markdown.css b/public/css/markdown.css
index 8cb59666..c66ab20d 100644
--- a/public/css/markdown.css
+++ b/public/css/markdown.css
@@ -121,3 +121,11 @@
     max-width: 100%;
     height: 100%;
 }
+
+.markdown-body pre > code.wrap {
+    white-space: pre-wrap;       /* Since CSS 2.1 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
\ No newline at end of file
diff --git a/public/docs/features.md b/public/docs/features.md
index 33dcdb86..270bf77b 100644
--- a/public/docs/features.md
+++ b/public/docs/features.md
@@ -171,6 +171,12 @@ var s = "JavaScript syntax highlighting";
 alert(s);
 ```
 
+> Somtimes you have a super long text without breaks. It's time to use `!` to wrap your code.
+
+```!
+When you’re a carpenter making a beautiful chest of drawers, you’re not going to use a piece of plywood on the back.
+```
+
 ### Blockquote Tags:
 > Using the syntax below to specifiy your **name, time and color** to vary the blockquotes.
 > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7]
diff --git a/public/js/extra.js b/public/js/extra.js
index bf2c7231..bec7fc78 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -448,7 +448,8 @@ function finishView(view) {
         .each(function (key, value) {
             var langDiv = $(value).find('code.hljs');
             if (langDiv.length > 0) {
-                var reallang = langDiv[0].className.replace('hljs', '').trim();
+                var reallang = langDiv[0].className.replace(/hljs|wrap/g, '').trim();
+                if (!reallang) return;
                 var codeDiv = $(value).find('.code');
                 var code = "";
                 if (codeDiv.length > 0) code = codeDiv.html();
@@ -897,7 +898,8 @@ md.renderer.rules.fence = function (tokens, idx, options, env, self) {
 
     if (info) {
         langName = info.split(/\s+/g)[0];
-        token.attrJoin('class', options.langPrefix + langName.replace(/\=$|\=\d+$|\=\+$/, ''));
+        if (/\!$/.test(info)) token.attrJoin('class', 'wrap');
+        token.attrJoin('class', options.langPrefix + langName.replace(/\=$|\=\d+$|\=\+$|\!$|\=\!$/, ''));
         token.attrJoin('class', 'hljs');
     }
 
diff --git a/public/js/syncscroll.js b/public/js/syncscroll.js
index 626c790f..c2de2d0d 100644
--- a/public/js/syncscroll.js
+++ b/public/js/syncscroll.js
@@ -61,7 +61,8 @@ md.renderer.rules.fence = function (tokens, idx, options, env, self) {
 
     if (info) {
         langName = info.split(/\s+/g)[0];
-        token.attrJoin('class', options.langPrefix + langName.replace(/\=$|\=\d+$|\=\+$/, ''));
+        if (/\!$/.test(info)) token.attrJoin('class', 'wrap');
+        token.attrJoin('class', options.langPrefix + langName.replace(/\=$|\=\d+$|\=\+$|\!$|\=\!/, ''));
         token.attrJoin('class', 'hljs');
     }