From 211d25253ec6f5a067affae77308007224b5f33d Mon Sep 17 00:00:00 2001
From: Wu Cheng-Han <jacky_cute0808@hotmail.com>
Date: Fri, 14 Oct 2016 17:35:35 +0800
Subject: [PATCH] Update to support wrap syntax for code block

---
 public/css/markdown.css | 8 ++++++++
 public/docs/features.md | 6 ++++++
 public/js/extra.js      | 6 ++++--
 public/js/syncscroll.js | 3 ++-
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/public/css/markdown.css b/public/css/markdown.css
index 8cb596669..c66ab20db 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 33dcdb861..270bf77ba 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 bf2c7231c..bec7fc782 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 626c790f5..c2de2d0d9 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');
     }