Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature suggestion: Nicer fonts and click to select #155

VarunAgw opened this issue Feb 12, 2020 · 0 comments

Feature suggestion: Nicer fonts and click to select #155

VarunAgw opened this issue Feb 12, 2020 · 0 comments


Copy link

@VarunAgw VarunAgw commented Feb 12, 2020

It's not the most beautiful or efficient code snippet written but that's what I currently use with TamperMonkey to improve JSON Formatter.

The main features are "click to select a field "and better fonts. If you like them, feel free to integrate them (after the rewrite obviously) in the extension, otherwise just close the ticket.

$("#jfContent, #formattedJson").ready(function () {
    setTimeout(function () {
        if (2 == $("#jfContent, #formattedJson").length) {
            $('span').css('font-family', 'Microsoft YaHei,Tahoma');
            $('span').css('font-size', '15px');

            $('.k').css('color', 'brown');

            $('.nl,.bl,.n,.b').css('font-weight', "normal");
            $('.nl').css('color', 'gray');
            $('.bl').css('color', 'black');
            $('.n').css('color', 'darkorange');
            $('.b').css('color', 'blue');

            $("#formattedJson").html($("#formattedJson").html().replaceAll('>"<', '><span style="color:white; font-size: 1px;">"</span><'));
            $("#formattedJson").html($("#formattedJson").html().replaceAll('>":&nbsp;<', '><span style="color:white; font-size: 1px;">"</span>:&nbsp;<'));
            $("#formattedJson").html($("#formattedJson").html().replaceAll('>[<', '>[ <'));
            $("#formattedJson").html($("#formattedJson").html().replaceAll('>{<', '>{ <'));
            $(".kvov .objProp > .s,.nl,.bl,.n").css("cursor", "pointer");

            function addLink() {
                if (window.getSelection().anchorNode == $('.e').first()[0]) {
                    var selection = window.getSelection();
                    var newdiv = document.createElement('pre');
           = 'absolute';
           = '-99999px';

                    newdiv.innerText = JSON.stringify(window.json, null, 2);

                    window.setTimeout(function () {
                    }, 100);

            document.addEventListener('copy', addLink);

            $('span.k').each(function () {
                //var depth = $(this).parents(".blockInner").length;
                //$(this).prev().text("\t".repeat(depth) + '"');

            $('.b').each(function () {
                //var depth = $(this).parents(".blockInner").length;
                //$(this).prev().text("\t".repeat(depth) + '"');
            var popup = $('<div class="popup" style="display: none; position:absolute;padding:.5em;border-radius:.5em;box-shadow:0 0 1em gray;background:white;z-index:1;white-space:nowrap;color:black;"><span class="info-key" style="font-weight:bold;">type</span>: <span class="info-val" style="color:dodgerblue;">string</span></div>');

            $(".kvov .objProp > .s,.nl,.bl,.n").click(function (e) {
                var selection = window.getSelection();
                var range = document.createRange();

                $('.popup').css('display', 'block');

            $(document).click(function (e) {
                $('.popup').css('display', 'none');
}, 100);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
1 participant
You can’t perform that action at this time.