[Userscript] Javascript-css beautify

  Bài viết hay nhất1
Javascript-css beautify chỉ hoạt động với các URL file js/json/css. Tác dụng của nó là định dạng và làm nổi cú pháp trong code, giúp việc đọc code thuận tiện hơn. Có thể cuộn bằng cách giữ chuột phải và kéo.

Demo



File CSS


File Javascript

Cài đặt


Dùng một trong các link sau:

  1. https://greasyfork.org/vi/scripts/16111-javascript-css-beautify
  2. https://openuserjs.org/scripts/baivong/Javascript-css_beautify
  3. https://github.com/baivong/Userscript/raw/master/js-css_beautify/js-css_beautify.user.js

Mã nguồn


Code:
// ==UserScript==
// @name        Javascript-css beautify
// @namespace    http://devs.forumvi.com
// @description  Beautify and syntax highlighting for source code javascript, json, css. Support to view the source code by holding the right mouse and drag.
// @version      2.4.1
// @icon        http://i.imgur.com/kz8nqz1.png
// @author      Zzbaivong
// @license      MIT
// @match        http://*/*
// @match        https://*/*
// @resource    light https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow.min.css
// @resource    dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow-night.min.css
// @require      https://greasyfork.org/scripts/18531-beautify-js/code/beautify-js.js?version=216536
// @require      https://greasyfork.org/scripts/18528-beautify-css/code/beautify-css.js?version=194233
// @require      https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js
// @noframes
// @supportURL  https://github.com/baivong/Userscript/issues
// @run-at      document-idle
// @grant        GM_addStyle
// @grant        GM_getResourceText
// ==/UserScript==

/* global css_beautify, js_beautify, hljs */
(function () {

    'use strict';

    var theme = 'light', // light|dark
        lineColor = {
            light: ['#a7a7a7', '#e8e8e7'],
            dark: ['#4d4d4d', '#3a3a3a']
        },
        bgColor = {
            light: '#ffffff',
            dark: '#1d1f21'
        },

        url = location.pathname,
        doc = document,
        contenttype = doc.contentType;

    function scrollByDragging(container, disableH, disableV) {

        function mouseUp(e) {
            if (e.which !== 3) return;

            window.removeEventListener('mousemove', mouseMove, true);
            container.style.cursor = 'default';
        }

        function mouseDown(e) {
            if (e.which !== 3) return;

            pos = {
                x: e.clientX,
                y: e.clientY
            };

            window.addEventListener('mousemove', mouseMove, true);
            container.style.cursor = 'move';
        }

        function mouseMove(e) {
            if (!disableH) container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
            if (!disableV) container.scrollTop -= (-pos.y + (pos.y = e.clientY));
        }

        var pos = {
            x: 0,
            y: 0
        };

        container.oncontextmenu = function (e) {
            e.preventDefault();
        };

        container.addEventListener('mousedown', mouseDown, false);
        window.addEventListener('mouseup', mouseUp, false);

    }

    if (/^application\/(x-javascript|javascript|json)|text\/css$/.test(contenttype) || (/.+\.(js|json|css)$/.test(url) && !/^application\/(xhtml+xml|xml|rss+xml)|text\/(html|xml)$/.test(contenttype))) {

        var output = doc.getElementsByTagName('pre')[0],
            txt = output.textContent,
            lang = 'javascript',
            lines = 0,
            l = '';

        GM_addStyle(GM_getResourceText(theme) + 'html,body,pre{margin:0;padding:0;background:' + bgColor[theme] + '}.hljs{word-wrap:normal!important;white-space:pre!important;padding-left:4em;line-height:100%}.hljs::before{content:attr(data-lines);position:absolute;color:' + lineColor[theme][0] + ';text-align:right;width:3.5em;left:-.5em;border-right:1px solid ' + lineColor[theme][1] + ';padding-right:.5em}');

        if (contenttype === 'text/css' || /.+\.css$/.test(url)) {
            lang = 'css';
            txt = css_beautify(txt);
        } else {
            txt = js_beautify(txt);
        }

        output.textContent = txt;
        output.setAttribute('class', lang);

        hljs.highlightBlock(output);

        lines = txt.split('\n');
        lines = lines ? lines.length : 0;
        for (var i = 0; i < lines; i++) {
            l += (i + 1) + '\n';
        }

        output.setAttribute('data-lines', l);
        output.style.width = output.scrollWidth + 'px';

        scrollByDragging(doc.body);
        scrollByDragging(doc.documentElement);

    }

}());

Hướng dẫn


Bạn có thể chọn giao diện Dark hoặc Light bằng cách sửa tham số theme ở dòng 28.
Tags: #userscript #highlight #beautify #source-code
  Bài viết hay nhất2
Cập nhật

  1. Viết lại mã nguồn, thay Codemirror bằng highlightjs
  2. Thêm hỗ trợ json
  3. Cập nhật các plugin dùng trong script
  Bài viết hay nhất3
v2.3.9

  • Nâng cấp thư viện phụ thuộc.

v2.4.0

  • Cập nhật giao diện sang Tomorrow.
  • Thêm cấu hình màu số dòng.
  • Nâng cấp thư viện phụ thuộc.

v2.4.1

  • Thêm cấu hình màu nền.
  Bài viết hay nhất4
You cannot reply to topics in this forum