优化代码格式化工具

apps/code-beautify/automatic.css

@@ -1,7 +1,4 @@
 @import url("../static/css/syntax-highlighter.css");
-.syntaxhighlighter table td.code .container .line:hover {
-    background-color: #f1f1f1 !important;
-}
 
 #fehelper_tips {
     position: fixed;
@@ -101,20 +98,28 @@ body > * {
     transition: .2s linear;
 }
 
-body.show-tipsbar pre {
+body pre {
     transform: translate3d(0, 37px, 0);
 }
 
-body.show-tipsbar #fehelper_tips {
+body #fehelper_tips {
     transform: none;
 }
-
+body.show-tipsbar .copy{
+    display: none;
+}
 body.show-beautified {
     font-size: 14px;
 }
+body.show-beautified .copy {
+    display: inline-block;
+}
+body.show-beautified .doing {
+    display: none;
+}
 
 body.processing > :not(#fehelper_tips) {
     opacity: .5;
     pointer-events: none;
     cursor: wait;
-}
+}

apps/code-beautify/automatic.js

@@ -1,5 +1,7 @@
 module.exports = (() => {
 
+    let formattedCodes = '';
+
     /**
      * 代码美化
      */
@@ -7,9 +9,10 @@ module.exports = (() => {
 
         let beauty = txtResult => {
 
+            formattedCodes = txtResult;
             txtResult = txtResult.replace(/>/g, '&gt;').replace(/</g, '&lt;');
-            txtResult = '<pre class="brush: ' + fileType.toLowerCase() + ';toolbar:false;">' + txtResult + '</pre>';
-            document.body.innerHTML = txtResult;
+            txtResult = '<pre class="brush: ' + fileType.toLowerCase() + ';toolbar:false">' + txtResult + '</pre>';
+            $('#fehelper_tips').siblings().remove().end().after('<pre id="fehelper_beautified_codes">' + txtResult + '</pre>');
 
             // 代码高亮
             let map = {
@@ -72,9 +75,10 @@ module.exports = (() => {
         $(document.body).addClass('show-tipsbar');
 
         let tipsBar = $('<div id="fehelper_tips">' +
-            '<span class="desc">FeHelper检测到这可能是<i>' + fileType + '</i>代码，是否进行美化处理？</span>' +
+            '<span class="desc">FeHelper检测到这可能是<i>' + fileType + '</i>代码，<span class="ask">是否进行美化处理？</span></span>' +
             '<button class="yes">代码美化</button>' +
             '<button class="no">放弃！</button>' +
+            '<button class="copy hide">复制美化过的代码</button>' +
             '<button class="close"><span></span></button>' +
             '<a class="forbid">彻底关闭这个功能！&gt;&gt;</a>' +
             '</div>').prependTo('body');
@@ -82,7 +86,8 @@ module.exports = (() => {
         tipsBar.find('button.yes').click((evt) => {
             tipsBar.find('button.yes,button.no').hide();
             $('<span class="doing">正在努力，请稍后...</span>').insertBefore(tipsBar.find('button.yes'));
-            format(fileType, source,()=>{
+            format(fileType, source, () => {
+                tipsBar.find('span.ask').text('已为您美化完毕！');
                 $(document.body).removeClass('show-tipsbar').addClass('show-beautified');
             });
         });
@@ -97,6 +102,28 @@ module.exports = (() => {
         tipsBar.find('button.no,button.close').click((evt) => {
             $(document.body).removeClass('show-tipsbar');
         });
+
+        tipsBar.find('button.copy').click((evt) => {
+            _copyToClipboard(formattedCodes);
+        });
+    };
+
+
+    /**
+     * chrome 下复制到剪贴板
+     * @param text
+     */
+    let _copyToClipboard = function (text) {
+        let input = document.createElement('textarea');
+        input.style.position = 'fixed';
+        input.style.opacity = 0;
+        input.value = text;
+        document.body.appendChild(input);
+        input.select();
+        document.execCommand('Copy');
+        document.body.removeChild(input);
+
+        alert('代码复制成功，随处粘贴可用！')
     };
 
     return {

apps/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "WEB前端助手(FeHelper)",
-  "version": "2018.06.1211",
+  "version": "2018.06.2015",
   "manifest_version": 2,
   "default_locale": "zh_CN",
   "description": "FE助手：包括JSON格式化、二维码生成与解码、信息编解码、代码压缩、美化、页面取色、Markdown与HTML互转、网页滚动截屏、正则表达式、时间转换工具、编码规范检测、页面性能检测、Ajax接口调试",

apps/static/css/syntax-highlighter.css

@@ -81,10 +81,10 @@
 .syntaxhighlighter table td.code {
     width: 100% !important;
 }
-.syntaxhighlighter table td.code .container {
+.syntaxhighlighter table td.code .sh-container {
     position: relative !important;
 }
-.syntaxhighlighter table td.code .container textarea {
+.syntaxhighlighter table td.code .sh-container textarea {
     box-sizing: border-box !important;
     position: absolute !important;
     left: 0 !important;
@@ -97,16 +97,11 @@
     overflow: hidden !important;
     white-space: pre !important;
 }
-.syntaxhighlighter table td.gutter .line {
-    text-align: right !important;
-    padding: 0 0.5em 0 1em !important;
-}
+
 .syntaxhighlighter table td.code .line {
     padding: 0 1em !important;
 }
-.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
-    padding-left: 0em !important;
-}
+
 .syntaxhighlighter.show {
     display: block !important;
 }
@@ -225,6 +220,22 @@
     color: black !important;
 }
 
+.syntaxhighlighter div.code .line {
+    list-style: decimal;
+    padding-left: 10px;
+    white-space:normal !important;
+    border-left: 3px solid #6ce26c !important;
+}
+.syntaxhighlighter div.code {
+    word-break: break-all;
+    padding-left: 4px !important;
+}
+.syntaxhighlighter div.code .sh-container .line:hover {
+    background-color: #f1f1f1 !important;
+}
+
+/*===============Theme==============*/
+
 .syntaxhighlighter {
     background-color: white !important;
 }
@@ -243,16 +254,7 @@
 .syntaxhighlighter table caption {
     color: black !important;
 }
-.syntaxhighlighter .gutter {
-    color: #afafaf !important;
-}
-.syntaxhighlighter .gutter .line {
-    border-right: 3px solid #6ce26c !important;
-}
-.syntaxhighlighter .gutter .line.highlighted {
-    background-color: #6ce26c !important;
-    color: white !important;
-}
+
 .syntaxhighlighter.printing .line .content {
     border: none !important;
 }
@@ -325,4 +327,4 @@
 
 .syntaxhighlighter .keyword {
     font-weight: bold !important;
-}
+}