JSON Code Editor

Developer
John W. Long
Size
4,755 Kb
Views
6,072
  1. JSON Code Editor Previews
  2. JSON Code Editor HTML Codes
  3. JSON Code Editor CSS Codes
  4. JSON Code Editor JS Codes

How do I make an json code editor?

What is a json code editor? How do you make a json code editor? This script and codes were developed by John W. Long on 31 January 2023, Tuesday.

JSON Code Editor Previews
IQ Test

JSON Code Editor - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JSON Code Editor</title> <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/codemirror.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/eclipse.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/addon/lint/lint.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <label> <span class="label">JSON definition</span> <textarea id="code"></textarea>
</label> <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/codemirror.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/mode/javascript/javascript.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/addon/selection/active-line.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/addon/lint/lint.js'></script>
<script src='https://rawgithub.com/zaach/jsonlint/79b553fb65c192add9066da64043458981b3972b/lib/jsonlint.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/addon/lint/json-lint.js'></script> <script src="js/index.js"></script>
</body>
</html>

JSON Code Editor - Script Codes CSS Codes

body { font-family: Lato, sans-serif; font-size: 14px; color: #4a4a4a; padding: 50px; -webkit-font-smoothing: antialiased;
}
.label { display: block; margin-bottom: 8px;
}
textarea { border: 1px solid rgba(73, 73, 73, 0.5); border-radius: 3px; font-family: "Source Code Pro", monospace; font-size: 13px; line-height: 20px; padding: 4px;
}
.CodeMirror { border: 1px solid rgba(73, 73, 73, 0.2); border-radius: 3px; color: #4a4a4a; font-family: "Source Code Pro", monospace; font-size: 13px; line-height: 20px; height: 600px;
}
.CodeMirror-gutters { border-right: 0; padding-right: 1px;
}
.CodeMirror-linenumber { font-family: "Source Code Pro", monospace; font-size: 13px; line-height: 20px;
}
.CodeMirror-activeline-gutter { background: rgba(87, 193, 250, 0.15);
}
.cm-s-eclipse .CodeMirror-activeline-background { background: rgba(87, 193, 250, 0.15);
}
.CodeMirror-lint-marker-error { background: url('data:image/svg+xml;utf8,') no-repeat center center; margin-left: 2px; margin-top: -4px;
}
.CodeMirror-lint-tooltip { background: white; font-family: "Source Code Pro", monospace; font-size: 12px; line-height: 16px; padding: 8px; border: none; border-radius: 2px; box-shadow: rgba(74, 74, 74, 0.25) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 1px 6px 0;
}
.CodeMirror-lint-message-error { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; padding-left: 24px;
}
.cm-s-eclipse span.cm-string { color: #1997b5;
}
.cm-s-eclipse span.cm-string.cm-property { color: #53B10b;
}

JSON Code Editor - Script Codes JS Codes

"use strict";
function deleteAt(string, index) { return string.substr(0, index) + string.substr(index + 1);
}
var masters = ["https://loki.gauntlet.cloudbees.com/"];
var jobs = ["cloudbees-cd-analytics/master", "cloudbees-cd-analytics/staging", "prod-deploy/master"];
jobs.pop(); // drop the last one
var json = { "phases": [{ "id": "dev", "name": "Dev", "gates": [{ "id": "dev", "name": "Dev", "master": "https://loki.gauntlet.cloudbees.com/", "job": "cloudbees-cd-analytics/master", "feeds": "staging" }] }, { "id": "staging", "name": "Staging", "gates": [{ "id": "staging", "name": "Staging", "master": "https://loki.gauntlet.cloudbees.com/", "job": "cloudbees-cd-analytics/staging", "feeds": "production" }] }, { "id": "production", "name": "Production", "gates": [{ "id": "production", "name": "Production", "master": "https://loki.gauntlet.cloudbees.com/", "job": "prod-deploy/master" }] }] };
var stringified = JSON.stringify(json, null, 2);
stringified = deleteAt(stringified, 110); // remove a comma
var textarea = document.getElementById('code');
textarea.value = stringified;
var editor = CodeMirror.fromTextArea(textarea, { lineNumbers: true, border: true, theme: "eclipse", mode: "application/json", gutters: ["CodeMirror-lint-markers"], styleActiveLine: true, lint: true
});
// var container = document.createElement("div")
// container.innerText = "Unknown job."
// editor.addLineWidget(9, container)
JSON Code Editor - Script Codes
JSON Code Editor - Script Codes
Home Page Home
Developer John W. Long
Username jlong
Uploaded January 31, 2023
Rating 4
Size 4,755 Kb
Views 6,072
Do you need developer help for JSON Code Editor?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John W. Long (jlong) Script Codes
Name
Simple menu
Animated CSS Ball Loader
Simple menu 1
Animated CSS Flower Spinner
March of the Smilies
Animated CSS Throbber
Sass Radar
Pure CSS Spinners
Donut Graph with D3
Animated CSS Timer Spinner
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!