Antarix/GetSample.html

## GetSample.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){


$.ajax({
  type: "GET",
  url: "http://ip.jsontest.com/?callback=showMyIP",
  success : function (data) {
console.log(data);
                    $(".result").html(syntaxHighlight(JSON.stringify(data,null,2)));
            }
});

    });
});

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

</script>
<style>

.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: #333; }
</style>

</head>
<body>
<div class="container">
<br><br>

<br><br>  <button type="button" class="btn btn-success">GET DATA</button>
<br><br><pre><p class="result"></p></pre>

</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
	$("button").click(function(){


	$.ajax({
	type: "GET",
	url: "http://ip.jsontest.com/?callback=showMyIP",
	success : function (data) {
	console.log(data);
	$(".result").html(syntaxHighlight(JSON.stringify(data,null,2)));
	}
	});

	});
	});

	function syntaxHighlight(json) {
	json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
	return json.replace(/("(\\u[a-zA-Z0-9]{4}\|\\[^u]\|[^\\"])"(\s:)?\|\b(true\|false\|null)\b\|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
	var cls = 'number';
	if (/^"/.test(match)) {
	if (/:$/.test(match)) {
	cls = 'key';
	} else {
	cls = 'string';
	}
	} else if (/true\|false/.test(match)) {
	cls = 'boolean';
	} else if (/null/.test(match)) {
	cls = 'null';
	}
	return '<span class="' + cls + '">' + match + '</span>';
	});
	}

	</script>
	<style>

	.string { color: green; }
	.number { color: darkorange; }
	.boolean { color: blue; }
	.null { color: magenta; }
	.key { color: #333; }
	</style>

	</head>
	<body>
	<div class="container">
	<br><br>

	<br><br> <button type="button" class="btn btn-success">GET DATA</button>
	<br><br><pre><p class="result"></p></pre>

	</div>
	</body>
	</html>