Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  

[Userscript] Javascript-css beautify

    Quản trị viên

    baivong

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     21.08.15 13:47 

    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.


    Demo


    [Userscript] Javascript-css beautify Z2fhzSR
    File CSS

    [Userscript] Javascript-css beautify Rt0HUaw
    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==
    // @id           javascript-css-beautify@devs.forumvi.com
    // @name         Javascript-css beautify
    // @namespace    http://devs.forumvi.com
    // @description  Beautify and syntax highlighting for source code javascript, json, css. Support to see the source code by holding the right mouse and drag.
    // @version      2.3.6
    // @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.3.0/styles/github-gist.min.css
    // @resource     dark https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/monokai-sublime.min.css
    // @require      https://greasyfork.org/scripts/18531-beautify-js/code/beautify-js.js?version=117786
    // @require      https://greasyfork.org/scripts/18528-beautify-css/code/beautify-css.js?version=117789
    // @require      https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js
    // @noframes
    // @supportURL   https://github.com/baivong/Userscript/issues
    // @run-at       document-idle
    // @grant        GM_addStyle
    // @grant        GM_getResourceText
    // ==/UserScript==

    (function () {

        'use strict';

        var theme = 'light', // light|dark

            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}.hljs{word-wrap:normal!important;white-space:pre!important;padding-left:4em;line-height:100%}.hljs::before{content:attr(data-lines);position:absolute;color:#d2d2d2;text-align:right;width:3.5em;left:-.5em;border-right:1px solid rgba(221, 221, 221, 0.36);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);

        }

    }());
    Chú ý: Bạn có thể chọn giao diện Dark hoặc Light bằng cách sửa tham số theme ở dòng 22.


    Credits


    1. jsBeautifier
    2. highlightJs
    3. Devs forumvi

    Tags: #Userscript #firefox #highlight #beautify #chromium
    You cannot reply to topics in this forum