├── .gitignore ├── Procfile ├── static ├── css │ ├── mainbg.jpg │ ├── sortbg.jpg │ ├── others │ │ ├── themes │ │ │ ├── ambiance-mobile.css │ │ │ ├── juejin.css │ │ │ ├── neat.css │ │ │ ├── ssms.css │ │ │ ├── elegant.css │ │ │ ├── neo.css │ │ │ ├── eclipse.css │ │ │ ├── bespin.css │ │ │ ├── isotope.css │ │ │ ├── hopscotch.css │ │ │ ├── railscasts.css │ │ │ ├── colorforth.css │ │ │ ├── cobalt.css │ │ │ ├── idea.css │ │ │ ├── night.css │ │ │ ├── rubyblue.css │ │ │ ├── tomorrow-night-bright.css │ │ │ ├── midnight.css │ │ │ ├── blackboard.css │ │ │ ├── the-matrix.css │ │ │ ├── lucario.css │ │ │ ├── yeti.css │ │ │ ├── gruvbox-dark.css │ │ │ ├── abcdef.css │ │ │ ├── zenburn.css │ │ │ ├── 3024-day.css │ │ │ ├── seti.css │ │ │ ├── panda-syntax.css │ │ │ ├── dracula.css │ │ │ ├── 3024-night.css │ │ │ ├── paraiso-dark.css │ │ │ ├── paraiso-light.css │ │ │ ├── mbo.css │ │ │ ├── nord.css │ │ │ ├── vibrant-ink.css │ │ │ ├── base16-light.css │ │ │ ├── twilight.css │ │ │ ├── monokai.css │ │ │ └── erlang-dark.css │ │ └── highlightjs.css │ └── api.css ├── images │ ├── og.png │ ├── c_icon.png │ ├── cpp_icon.png │ ├── favicon.ico │ ├── java_icon.png │ ├── Github_icon.png │ ├── python_icon.png │ ├── Wikipedia_icon.png │ └── javascript_icon.png ├── js │ ├── others │ │ ├── mode │ │ │ ├── tiddlywiki │ │ │ │ └── tiddlywiki.css │ │ │ ├── d │ │ │ │ └── test.js │ │ │ ├── css │ │ │ │ ├── gss_test.js │ │ │ │ └── less_test.js │ │ │ ├── tiki │ │ │ │ ├── tiki.css │ │ │ │ └── index.html │ │ │ ├── ruby │ │ │ │ └── test.js │ │ │ ├── rust │ │ │ │ ├── test.js │ │ │ │ └── index.html │ │ │ ├── diff │ │ │ │ └── diff.js │ │ │ ├── mbox │ │ │ │ └── index.html │ │ │ ├── cypher │ │ │ │ ├── test.js │ │ │ │ └── index.html │ │ │ ├── asciiarmor │ │ │ │ └── index.html │ │ │ ├── spreadsheet │ │ │ │ └── index.html │ │ │ ├── http │ │ │ │ └── index.html │ │ │ ├── haskell-literate │ │ │ │ └── haskell-literate.js │ │ │ ├── oz │ │ │ │ └── index.html │ │ │ ├── solr │ │ │ │ └── index.html │ │ │ ├── z80 │ │ │ │ └── index.html │ │ │ ├── ecl │ │ │ │ └── index.html │ │ │ ├── twig │ │ │ │ └── index.html │ │ │ ├── vb │ │ │ │ └── index.html │ │ │ ├── pascal │ │ │ │ └── index.html │ │ │ ├── pig │ │ │ │ └── index.html │ │ │ ├── vbscript │ │ │ │ └── index.html │ │ │ ├── turtle │ │ │ │ └── index.html │ │ │ ├── gherkin │ │ │ │ └── index.html │ │ │ ├── properties │ │ │ │ └── index.html │ │ │ ├── perl │ │ │ │ └── index.html │ │ │ ├── htmlembedded │ │ │ │ ├── htmlembedded.js │ │ │ │ └── index.html │ │ │ ├── javascript │ │ │ │ └── typescript.html │ │ │ ├── elm │ │ │ │ └── index.html │ │ │ ├── sass │ │ │ │ └── index.html │ │ │ ├── dart │ │ │ │ └── index.html │ │ │ ├── idl │ │ │ │ └── index.html │ │ │ ├── xml │ │ │ │ └── test.js │ │ │ ├── jinja2 │ │ │ │ └── index.html │ │ │ ├── sparql │ │ │ │ └── index.html │ │ │ ├── shell │ │ │ │ └── index.html │ │ │ ├── tornado │ │ │ │ └── index.html │ │ │ ├── swift │ │ │ │ └── index.html │ │ │ ├── wast │ │ │ │ └── index.html │ │ │ ├── forth │ │ │ │ └── index.html │ │ │ ├── nsis │ │ │ │ └── index.html │ │ │ ├── gas │ │ │ │ └── index.html │ │ │ ├── toml │ │ │ │ └── index.html │ │ │ ├── pegjs │ │ │ │ └── index.html │ │ │ ├── sas │ │ │ │ └── index.html │ │ │ ├── smalltalk │ │ │ │ └── index.html │ │ │ ├── soy │ │ │ │ └── index.html │ │ │ ├── octave │ │ │ │ └── index.html │ │ │ ├── php │ │ │ │ └── index.html │ │ │ ├── modelica │ │ │ │ └── index.html │ │ │ ├── vue │ │ │ │ └── index.html │ │ │ ├── factor │ │ │ │ └── index.html │ │ │ ├── django │ │ │ │ └── index.html │ │ │ └── apl │ │ │ │ └── index.html │ │ └── fullscreen.js │ ├── base.js │ ├── index.js │ └── sorts │ │ ├── bubblesort.js │ │ └── insertionsort.js └── manifest.json ├── requirements.txt ├── templates └── sorts │ ├── customsort.html │ ├── shellsort.html │ ├── gnomesort.html │ ├── heapsort.html │ ├── bogosort.html │ ├── pancakesort.html │ ├── mergesort.html │ ├── selectionsort.html │ ├── bitonicsort.html │ ├── insertionsort.html │ ├── quicksort.html │ ├── oddevensort.html │ ├── bubblesort.html │ ├── shakersort.html │ ├── radixsort.html │ └── combsort.html ├── snippet.py ├── LICENSE ├── README.md └── app.py /.gitignore: -------------------------------------------------------------------------------- 1 | __pycache__/ 2 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: gunicorn app:app 2 | -------------------------------------------------------------------------------- /static/css/mainbg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Myphz/sortvisualizer/HEAD/static/css/mainbg.jpg -------------------------------------------------------------------------------- /static/css/sortbg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Myphz/sortvisualizer/HEAD/static/css/sortbg.jpg -------------------------------------------------------------------------------- /static/images/og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Myphz/sortvisualizer/HEAD/static/images/og.png -------------------------------------------------------------------------------- /static/images/c_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Myphz/sortvisualizer/HEAD/static/images/c_icon.png -------------------------------------------------------------------------------- /static/images/cpp_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Myphz/sortvisualizer/HEAD/static/images/cpp_icon.png -------------------------------------------------------------------------------- /static/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Myphz/sortvisualizer/HEAD/static/images/favicon.ico -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | Flask 2 | Flask-Limiter 3 | gunicorn 4 | selenium 5 | python-telegram-bot 6 | requests 7 | 8 | -------------------------------------------------------------------------------- /static/images/java_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Myphz/sortvisualizer/HEAD/static/images/java_icon.png -------------------------------------------------------------------------------- /static/images/Github_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Myphz/sortvisualizer/HEAD/static/images/Github_icon.png -------------------------------------------------------------------------------- /static/images/python_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Myphz/sortvisualizer/HEAD/static/images/python_icon.png -------------------------------------------------------------------------------- /static/images/Wikipedia_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Myphz/sortvisualizer/HEAD/static/images/Wikipedia_icon.png -------------------------------------------------------------------------------- /static/images/javascript_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Myphz/sortvisualizer/HEAD/static/images/javascript_icon.png -------------------------------------------------------------------------------- /static/css/others/themes/ambiance-mobile.css: -------------------------------------------------------------------------------- 1 | .cm-s-ambiance.CodeMirror { 2 | -webkit-box-shadow: none; 3 | -moz-box-shadow: none; 4 | box-shadow: none; 5 | } 6 | -------------------------------------------------------------------------------- /static/js/others/mode/tiddlywiki/tiddlywiki.css: -------------------------------------------------------------------------------- 1 | span.cm-underlined { 2 | text-decoration: underline; 3 | } 4 | span.cm-strikethrough { 5 | text-decoration: line-through; 6 | } 7 | span.cm-brace { 8 | color: #170; 9 | font-weight: bold; 10 | } 11 | span.cm-table { 12 | color: blue; 13 | font-weight: bold; 14 | } 15 | -------------------------------------------------------------------------------- /static/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "version": "0.01", 4 | "icons": [ 5 | { 6 | "src": "/static/images/favicon.ico", 7 | "sizes": "48x48" 8 | } 9 | ], 10 | "short_name": "Sort Visualizer", 11 | "name": "Sort Visualizer", 12 | "start_url": "https://sortvisualizer.com", 13 | "display": "standalone" 14 | } 15 | -------------------------------------------------------------------------------- /static/css/api.css: -------------------------------------------------------------------------------- 1 | #api-description-box { 2 | margin: auto; 3 | font-size: 25px; 4 | max-width: 850px; 5 | position: relative; 6 | } 7 | 8 | .description-content { 9 | font-size: 22px; 10 | } 11 | 12 | .api-subtitle { 13 | font-family: 'Electrolize', sans-serif; 14 | font-size: 24px; 15 | font-weight: bold; 16 | } 17 | -------------------------------------------------------------------------------- /static/js/base.js: -------------------------------------------------------------------------------- 1 | AOS.init({ 2 | duration: 1000, 3 | once: true 4 | }); 5 | 6 | const byId = id => { 7 | return document.getElementById(id); 8 | } 9 | 10 | window.onclick = function(event) { 11 | if (event.target.matches(".open")) { 12 | byId("sidenav").classList.toggle("show"); 13 | } else if (!(event.target.matches(".no-remove"))) { 14 | byId("sidenav").classList.remove("show") 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /static/js/others/mode/d/test.js: -------------------------------------------------------------------------------- 1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others 2 | // Distributed under an MIT license: https://codemirror.net/LICENSE 3 | 4 | (function() { 5 | var mode = CodeMirror.getMode({indentUnit: 2}, "d"); 6 | function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1)); } 7 | 8 | MT("nested_comments", 9 | "[comment /+]","[comment comment]","[comment +/]","[variable void] [variable main](){}"); 10 | 11 | })(); 12 | -------------------------------------------------------------------------------- /static/js/others/mode/css/gss_test.js: -------------------------------------------------------------------------------- 1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others 2 | // Distributed under an MIT license: https://codemirror.net/LICENSE 3 | 4 | (function() { 5 | "use strict"; 6 | 7 | var mode = CodeMirror.getMode({indentUnit: 2}, "text/x-gss"); 8 | function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1), "gss"); } 9 | 10 | MT("atComponent", 11 | "[def @component] {", 12 | "[tag foo] {", 13 | " [property color]: [keyword black];", 14 | "}", 15 | "}"); 16 | 17 | })(); 18 | -------------------------------------------------------------------------------- /static/js/others/mode/tiki/tiki.css: -------------------------------------------------------------------------------- 1 | .cm-tw-syntaxerror { 2 | color: #FFF; 3 | background-color: #900; 4 | } 5 | 6 | .cm-tw-deleted { 7 | text-decoration: line-through; 8 | } 9 | 10 | .cm-tw-header5 { 11 | font-weight: bold; 12 | } 13 | .cm-tw-listitem:first-child { /*Added first child to fix duplicate padding when highlighting*/ 14 | padding-left: 10px; 15 | } 16 | 17 | .cm-tw-box { 18 | border-top-width: 0px !important; 19 | border-style: solid; 20 | border-width: 1px; 21 | border-color: inherit; 22 | } 23 | 24 | .cm-tw-underline { 25 | text-decoration: underline; 26 | } -------------------------------------------------------------------------------- /static/css/others/themes/juejin.css: -------------------------------------------------------------------------------- 1 | .cm-s-juejin.CodeMirror { 2 | background: #f8f9fa; 3 | } 4 | .cm-s-juejin .cm-header, 5 | .cm-s-juejin .cm-def { 6 | color: #1ba2f0; 7 | } 8 | .cm-s-juejin .cm-comment { 9 | color: #009e9d; 10 | } 11 | .cm-s-juejin .cm-quote, 12 | .cm-s-juejin .cm-link, 13 | .cm-s-juejin .cm-strong, 14 | .cm-s-juejin .cm-attribute { 15 | color: #fd7741; 16 | } 17 | .cm-s-juejin .cm-url, 18 | .cm-s-juejin .cm-keyword, 19 | .cm-s-juejin .cm-builtin { 20 | color: #bb51b8; 21 | } 22 | .cm-s-juejin .cm-hr { 23 | color: #909090; 24 | } 25 | .cm-s-juejin .cm-tag { 26 | color: #107000; 27 | } 28 | .cm-s-juejin .cm-variable-2 { 29 | color: #0050a0; 30 | } 31 | -------------------------------------------------------------------------------- /static/css/others/themes/neat.css: -------------------------------------------------------------------------------- 1 | .cm-s-neat span.cm-comment { color: #a86; } 2 | .cm-s-neat span.cm-keyword { line-height: 1em; font-weight: bold; color: blue; } 3 | .cm-s-neat span.cm-string { color: #a22; } 4 | .cm-s-neat span.cm-builtin { line-height: 1em; font-weight: bold; color: #077; } 5 | .cm-s-neat span.cm-special { line-height: 1em; font-weight: bold; color: #0aa; } 6 | .cm-s-neat span.cm-variable { color: black; } 7 | .cm-s-neat span.cm-number, .cm-s-neat span.cm-atom { color: #3a3; } 8 | .cm-s-neat span.cm-meta { color: #555; } 9 | .cm-s-neat span.cm-link { color: #3a3; } 10 | 11 | .cm-s-neat .CodeMirror-activeline-background { background: #e8f2ff; } 12 | .cm-s-neat .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; } 13 | -------------------------------------------------------------------------------- /static/css/others/highlightjs.css: -------------------------------------------------------------------------------- 1 | .hljs{display:block;overflow-x:auto;padding:.5em;background:#f0f0f0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#bc6060}.hljs-literal{color:#78a960}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700} 2 | -------------------------------------------------------------------------------- /static/css/others/themes/ssms.css: -------------------------------------------------------------------------------- 1 | .cm-s-ssms span.cm-keyword { color: blue; } 2 | .cm-s-ssms span.cm-comment { color: darkgreen; } 3 | .cm-s-ssms span.cm-string { color: red; } 4 | .cm-s-ssms span.cm-def { color: black; } 5 | .cm-s-ssms span.cm-variable { color: black; } 6 | .cm-s-ssms span.cm-variable-2 { color: black; } 7 | .cm-s-ssms span.cm-atom { color: darkgray; } 8 | .cm-s-ssms .CodeMirror-linenumber { color: teal; } 9 | .cm-s-ssms .CodeMirror-activeline-background { background: #ffffff; } 10 | .cm-s-ssms span.cm-string-2 { color: #FF00FF; } 11 | .cm-s-ssms span.cm-operator, 12 | .cm-s-ssms span.cm-bracket, 13 | .cm-s-ssms span.cm-punctuation { color: darkgray; } 14 | .cm-s-ssms .CodeMirror-gutters { border-right: 3px solid #ffee62; background-color: #ffffff; } 15 | .cm-s-ssms div.CodeMirror-selected { background: #ADD6FF; } 16 | 17 | -------------------------------------------------------------------------------- /static/css/others/themes/elegant.css: -------------------------------------------------------------------------------- 1 | .cm-s-elegant span.cm-number, .cm-s-elegant span.cm-string, .cm-s-elegant span.cm-atom { color: #762; } 2 | .cm-s-elegant span.cm-comment { color: #262; font-style: italic; line-height: 1em; } 3 | .cm-s-elegant span.cm-meta { color: #555; font-style: italic; line-height: 1em; } 4 | .cm-s-elegant span.cm-variable { color: black; } 5 | .cm-s-elegant span.cm-variable-2 { color: #b11; } 6 | .cm-s-elegant span.cm-qualifier { color: #555; } 7 | .cm-s-elegant span.cm-keyword { color: #730; } 8 | .cm-s-elegant span.cm-builtin { color: #30a; } 9 | .cm-s-elegant span.cm-link { color: #762; } 10 | .cm-s-elegant span.cm-error { background-color: #fdd; } 11 | 12 | .cm-s-elegant .CodeMirror-activeline-background { background: #e8f2ff; } 13 | .cm-s-elegant .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; } 14 | -------------------------------------------------------------------------------- /templates/sorts/customsort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_custom.html" %} 2 | 3 | {% block title %} 4 | Custom Sort 5 | {% endblock %} 6 | 7 | {% block info %} 8 |

9 | Implement and visualize your sort algorithm using the JavaScript programming language. 10 |

11 |

12 | Write an asyncronous function that takes an Array of DOM element objects as a parameter and type the entry point of the algorithm in the appropriate text field below. 13 |

14 |

15 | Sort the elements in-place, in ascending order using the documented APIs for the visualization. 16 |

17 |

18 | When you're done, you can contribute to this project by submitting your code to us. We'll review it and implement it! 19 | You can add notes and suggestions in the code as comments. 20 |

21 | {% endblock %} 22 | -------------------------------------------------------------------------------- /static/js/others/mode/ruby/test.js: -------------------------------------------------------------------------------- 1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others 2 | // Distributed under an MIT license: https://codemirror.net/LICENSE 3 | 4 | (function() { 5 | var mode = CodeMirror.getMode({indentUnit: 2}, "ruby"); 6 | function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1)); } 7 | 8 | MT("divide_equal_operator", 9 | "[variable bar] [operator /=] [variable foo]"); 10 | 11 | MT("divide_equal_operator_no_spacing", 12 | "[variable foo][operator /=][number 42]"); 13 | 14 | MT("complex_regexp", 15 | "[keyword if] [variable cr] [operator =~] [string-2 /(?: \\( #{][tag RE_NOT][string-2 }\\( | #{][tag RE_NOT_PAR_OR][string-2 }* #{][tag RE_OPA_OR][string-2 } )/][variable x]") 16 | 17 | MT("indented_heredoc", 18 | "[keyword def] [def x]", 19 | " [variable y] [operator =] [string <<-FOO]", 20 | "[string bar]", 21 | "[string FOO]", 22 | "[keyword end]") 23 | })(); 24 | -------------------------------------------------------------------------------- /snippet.py: -------------------------------------------------------------------------------- 1 | from selenium import webdriver 2 | import base64 3 | import os 4 | from time import sleep 5 | 6 | def get_img(msg): 7 | chrome_options = webdriver.ChromeOptions() 8 | 9 | chrome_options.binary_location = os.environ.get("GOOGLE_CHROME_BIN") 10 | chrome_options.add_argument('--disable-dev-shm-usage') 11 | chrome_options.add_argument('--no-sandbox') 12 | chrome_options.add_argument("--headless") 13 | chrome_options.add_argument('window-size=2560x10000') 14 | driver = webdriver.Chrome(executable_path=os.environ.get("CHROMEDRIVER_PATH"), chrome_options=chrome_options) 15 | 16 | driver.maximize_window() 17 | 18 | base64_string = base64.b64encode(msg.encode("ascii")) 19 | base64_string = base64_string.decode("ascii").replace("+", "%2B") 20 | 21 | driver.get(f"https://ray.so/?code={base64_string}&background=true&darkMode=true&colors=breeze&padding=64&title=Code&language=javascript") 22 | 23 | driver.execute_script("document.querySelector('section.controls').remove();") 24 | 25 | ret = driver.find_element_by_class_name("drag-control-points").screenshot_as_png 26 | driver.quit() 27 | return ret 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Daniel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /templates/sorts/shellsort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Shell Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Shell Sort is one of the oldest sorting algorithms and it's an extension of the Insertion Sort. This algorithm is fast and easy to implement, but it's hard to measure its performances. 14 |

15 |

16 | Unlike Insertion Sort, Shell Sort starts by comparing the elements distant from each other by a certain gap that gets progressively decreased. By starting with the most distant elements, it can optimize performances 17 | as it's not limited by just comparing two adjacent elements. 18 |

19 | {% endblock %} 20 | 21 | {% block medio %} 22 | O(n1.25)
O(n × log n) 23 | {% endblock %} 24 | 25 | {% block peggiore %} 26 | O(n2) 27 | {% endblock %} 28 | 29 | {% block migliore %} 30 | O(n × log n) 31 | {% endblock %} 32 | 33 | {% block memoria %} 34 | O(1) 35 | {% endblock %} 36 | -------------------------------------------------------------------------------- /static/css/others/themes/neo.css: -------------------------------------------------------------------------------- 1 | /* neo theme for codemirror */ 2 | 3 | /* Color scheme */ 4 | 5 | .cm-s-neo.CodeMirror { 6 | background-color:#ffffff; 7 | color:#2e383c; 8 | line-height:1.4375; 9 | } 10 | .cm-s-neo .cm-comment { color:#75787b; } 11 | .cm-s-neo .cm-keyword, .cm-s-neo .cm-property { color:#1d75b3; } 12 | .cm-s-neo .cm-atom,.cm-s-neo .cm-number { color:#75438a; } 13 | .cm-s-neo .cm-node,.cm-s-neo .cm-tag { color:#9c3328; } 14 | .cm-s-neo .cm-string { color:#b35e14; } 15 | .cm-s-neo .cm-variable,.cm-s-neo .cm-qualifier { color:#047d65; } 16 | 17 | 18 | /* Editor styling */ 19 | 20 | .cm-s-neo pre { 21 | padding:0; 22 | } 23 | 24 | .cm-s-neo .CodeMirror-gutters { 25 | border:none; 26 | border-right:10px solid transparent; 27 | background-color:transparent; 28 | } 29 | 30 | .cm-s-neo .CodeMirror-linenumber { 31 | padding:0; 32 | color:#e0e2e5; 33 | } 34 | 35 | .cm-s-neo .CodeMirror-guttermarker { color: #1d75b3; } 36 | .cm-s-neo .CodeMirror-guttermarker-subtle { color: #e0e2e5; } 37 | 38 | .cm-s-neo .CodeMirror-cursor { 39 | width: auto; 40 | border: 0; 41 | background: rgba(155,157,162,0.37); 42 | z-index: 1; 43 | } 44 | -------------------------------------------------------------------------------- /static/js/others/mode/rust/test.js: -------------------------------------------------------------------------------- 1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others 2 | // Distributed under an MIT license: https://codemirror.net/LICENSE 3 | 4 | (function() { 5 | var mode = CodeMirror.getMode({indentUnit: 4}, "rust"); 6 | function MT(name) {test.mode(name, mode, Array.prototype.slice.call(arguments, 1));} 7 | 8 | MT('integer_test', 9 | '[number 123i32]', 10 | '[number 123u32]', 11 | '[number 123_u32]', 12 | '[number 0xff_u8]', 13 | '[number 0o70_i16]', 14 | '[number 0b1111_1111_1001_0000_i32]', 15 | '[number 0usize]'); 16 | 17 | MT('float_test', 18 | '[number 123.0f64]', 19 | '[number 0.1f64]', 20 | '[number 0.1f32]', 21 | '[number 12E+99_f64]'); 22 | 23 | MT('string-literals-test', 24 | '[string "foo"]', 25 | '[string r"foo"]', 26 | '[string "\\"foo\\""]', 27 | '[string r#""foo""#]', 28 | '[string "foo #\\"# bar"]', 29 | 30 | '[string b"foo"]', 31 | '[string br"foo"]', 32 | '[string b"\\"foo\\""]', 33 | '[string br#""foo""#]', 34 | '[string br##"foo #" bar"##]', 35 | 36 | "[string-2 'h']", 37 | "[string-2 b'h']"); 38 | 39 | })(); 40 | -------------------------------------------------------------------------------- /templates/sorts/gnomesort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Gnome Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Gnome Sort is a sorting algorithm really similar to Insertion sort. Gnome Sort is based on dividing the data structure in two sublists: a sorted one, and an unsorted one. 14 | For every cycle, the algorithm picks an element of the unsorted sublist and moves it with sequential swaps to the right position in the sorted sublist. 15 |

16 |

17 | The main difference from the Insertion Sort is that the implementation doesn't require nested loops. Like the Insertion Sort, this algorithm is more efficient on small data structures almost sorted. 18 |

19 | {% endblock %} 20 | 21 | {% block medio %} 22 | O(n2) 23 | {% endblock %} 24 | 25 | {% block peggiore %} 26 | O(n2) 27 | {% endblock %} 28 | 29 | {% block migliore %} 30 | O(n) 31 | {% endblock %} 32 | 33 | {% block memoria %} 34 | O(1) 35 | {% endblock %} 36 | -------------------------------------------------------------------------------- /templates/sorts/heapsort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Heap Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Heap Sort is an in-place iterative sorting algorithm based on auxiliary data structures called heap. 14 | It's less efficient than algorithm with the same time complexity and it's not suitable for data structures with few elements. 15 |

16 |

17 | The heap is a data structure representable as a binary tree, where each node has a value bigger or equal to its children. Consequently, the root will hold the maximum value. 18 |

19 |

20 | The data structure gets ordered to form the heap initially, and then it gets progressively reordered with an algorithm similar to Selection Sort, starting from the bigger elements. 21 |

22 | {% endblock %} 23 | 24 | {% block medio %} 25 | O(n × log n) 26 | {% endblock %} 27 | 28 | {% block peggiore %} 29 | O(n × log n) 30 | {% endblock %} 31 | 32 | {% block migliore %} 33 | O(n × log n) 34 | {% endblock %} 35 | 36 | {% block memoria %} 37 | O(1) 38 | {% endblock %} 39 | -------------------------------------------------------------------------------- /templates/sorts/bogosort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Bogo Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Bogo Sort (also called Stupid Sort) is an iterative sorting algorithm particularly inefficient. It's based on randomly shufflying the elements of the data structure and then checking if they are correctly sorted. 14 | If not, repeat the process. 15 |

16 |

17 | It is a probabilistic algorithm. 18 | The amount of possible permutations of a data structure of n elements is n!, so it will take on average n! shuffles to reach the solution. 19 | Each shuffle takes n operations, so the total average number of operations is n × n! 20 |

21 |

22 | Since its performances depend entirely on probability, the worst case complexity is not measurable. 23 |

24 | {% endblock %} 25 | 26 | {% block medio %} 27 | O(n × n!) 28 | {% endblock %} 29 | 30 | {% block peggiore %} 31 | ∞ 32 | {% endblock %} 33 | 34 | {% block migliore %} 35 | O(n) 36 | {% endblock %} 37 | 38 | {% block memoria %} 39 | O(1) 40 | {% endblock %} 41 | -------------------------------------------------------------------------------- /templates/sorts/pancakesort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Pancake Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Pancake Sort is a sorting algorithm which derives from the pancake problem. The algorithm just executes the flip operation recursively until the data structure is sorted. 14 | It's similar to Selection Sort, without using swaps to sort the structure, but just flips. 15 |

16 |

17 | The data structure gets divided in two parts, a sorted one and one still to sort. For each flip, the maximum elements of the unsorted sublist gets put at the end of the data structure by 18 | flipping the unsorted part and the sorted sublist gets incremented by one. This procedure gets executed until the unsorted part is made up of just one element. 19 |

20 | {% endblock %} 21 | 22 | {% block medio %} 23 | O(n2) 24 | {% endblock %} 25 | 26 | {% block peggiore %} 27 | O(n2) 28 | {% endblock %} 29 | 30 | {% block migliore %} 31 | O(n2) 32 | {% endblock %} 33 | 34 | {% block memoria %} 35 | O(1) 36 | {% endblock %} 37 | -------------------------------------------------------------------------------- /static/css/others/themes/eclipse.css: -------------------------------------------------------------------------------- 1 | .cm-s-eclipse span.cm-meta { color: #FF1717; } 2 | .cm-s-eclipse span.cm-keyword { line-height: 1em; font-weight: bold; color: #7F0055; } 3 | .cm-s-eclipse span.cm-atom { color: #219; } 4 | .cm-s-eclipse span.cm-number { color: #164; } 5 | .cm-s-eclipse span.cm-def { color: #00f; } 6 | .cm-s-eclipse span.cm-variable { color: black; } 7 | .cm-s-eclipse span.cm-variable-2 { color: #0000C0; } 8 | .cm-s-eclipse span.cm-variable-3, .cm-s-eclipse span.cm-type { color: #0000C0; } 9 | .cm-s-eclipse span.cm-property { color: black; } 10 | .cm-s-eclipse span.cm-operator { color: black; } 11 | .cm-s-eclipse span.cm-comment { color: #3F7F5F; } 12 | .cm-s-eclipse span.cm-string { color: #2A00FF; } 13 | .cm-s-eclipse span.cm-string-2 { color: #f50; } 14 | .cm-s-eclipse span.cm-qualifier { color: #555; } 15 | .cm-s-eclipse span.cm-builtin { color: #30a; } 16 | .cm-s-eclipse span.cm-bracket { color: #cc7; } 17 | .cm-s-eclipse span.cm-tag { color: #170; } 18 | .cm-s-eclipse span.cm-attribute { color: #00c; } 19 | .cm-s-eclipse span.cm-link { color: #219; } 20 | .cm-s-eclipse span.cm-error { color: #f00; } 21 | 22 | .cm-s-eclipse .CodeMirror-activeline-background { background: #e8f2ff; } 23 | .cm-s-eclipse .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; } 24 | -------------------------------------------------------------------------------- /templates/sorts/mergesort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Merge Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Merge Sort is a sorting algorithm based on the Divide et Impera technique, like Quick Sort. 14 | It can be implemented iteratively or recursively, using the Top-Down and Bottom-Up algorithms respectively. 15 | We represented the first one. 16 |

17 |

18 | The algorithm divides the data structure recursively until the subsequences contain only one element. 19 | At this point, the subsequences get merged and ordered sequentially. 20 | To do so, the algorithm progressively builds the sorted sublist by adding each time the minimum element of the next two unsorted subsequences until there is only one sublist remaining. 21 | This will be the sorted data structure. 22 |

23 | {% endblock %} 24 | 25 | {% block medio %} 26 | O(n × log n) 27 | {% endblock %} 28 | 29 | {% block peggiore %} 30 | O(n × log n) 31 | {% endblock %} 32 | 33 | {% block migliore %} 34 | O(n × log n) 35 | {% endblock %} 36 | 37 | {% block memoria %} 38 | O(n) 39 | {% endblock %} 40 | -------------------------------------------------------------------------------- /templates/sorts/selectionsort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Selection Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Selection Sort is an iterative and in-place sorting algorithm that divides the data structure in two sublists: the ordered one, and the unordered one. 14 | The algorithm loops for all the elements of the data structure and for every cycle picks the smallest element of the unordered sublist and adds it to the sorted sublist, progressively filling it. 15 |

16 |

17 | It's a really simple and intuitive algorithm that does not require additional memory, but it's not really efficient on big data structures due to its quadratic time complexity. 18 |

19 |

20 | This algorithm has been upgraded and enhanced in several variants such as Heap Sort. 21 |

22 | {% endblock %} 23 | 24 | {% block medio %} 25 | O(n2) 26 | {% endblock %} 27 | 28 | {% block peggiore %} 29 | O(n2) 30 | {% endblock %} 31 | 32 | {% block migliore %} 33 | O(n2) 34 | {% endblock %} 35 | 36 | {% block memoria %} 37 | O(1) 38 | {% endblock %} 39 | -------------------------------------------------------------------------------- /templates/sorts/bitonicsort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Bitonic Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Bitonic Sort is a sorting algorithm based on comparisons. It exploits binary sequences, so it can be applied only on data structures with number of elements equal to a power of 2. 14 |

15 |

16 | The algorithm is made up of two parts. Initially, the data structure gets converted to a binary sequence, creating groups of ascending and descending elements linked together. 17 | Next, the groups get merged with an algorithm similar to Merge Sort until the data structure is sorted. 18 |

19 |

20 | It can be implemented in numerous variants, iteratively or recursively, with different visualizations. This visualization shows an iterative version. 21 |

22 | {% endblock %} 23 | 24 | {% block medio %} 25 | O(log2 n) 26 | {% endblock %} 27 | 28 | {% block peggiore %} 29 | O(log2 n) 30 | {% endblock %} 31 | 32 | {% block migliore %} 33 | O(log2 n) 34 | {% endblock %} 35 | 36 | {% block memoria %} 37 | O(n × log2 n) 38 | {% endblock %} 39 | -------------------------------------------------------------------------------- /templates/sorts/insertionsort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Insertion Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Insertion sort is a simple sorting algorithm that builds the final sorted array one item at a time. 14 | It's less performant than advanced sorting algorithms, but it can still have some advantages: it's really easy to implement and it's efficient on small data structures almost sorted. 15 |

16 |

17 | The algorithm divides the data structure in two sublists: a sorted one, and one still to sort. Initially, the sorted sublist is made up of just one element and it gets progressively filled. 18 | For every iteration, the algorithm picks an element on the unsorted sublist and inserts it at the right place in the sorted sublist. 19 | It's available in several variants such as Gnome Sort. 20 |

21 | {% endblock %} 22 | 23 | {% block medio %} 24 | O(n2) 25 | {% endblock %} 26 | 27 | {% block peggiore %} 28 | O(n2) 29 | {% endblock %} 30 | 31 | {% block migliore %} 32 | O(n) 33 | {% endblock %} 34 | 35 | {% block memoria %} 36 | O(1) 37 | {% endblock %} 38 | -------------------------------------------------------------------------------- /static/js/others/mode/diff/diff.js: -------------------------------------------------------------------------------- 1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others 2 | // Distributed under an MIT license: https://codemirror.net/LICENSE 3 | 4 | (function(mod) { 5 | if (typeof exports == "object" && typeof module == "object") // CommonJS 6 | mod(require("../../lib/codemirror")); 7 | else if (typeof define == "function" && define.amd) // AMD 8 | define(["../../lib/codemirror"], mod); 9 | else // Plain browser env 10 | mod(CodeMirror); 11 | })(function(CodeMirror) { 12 | "use strict"; 13 | 14 | CodeMirror.defineMode("diff", function() { 15 | 16 | var TOKEN_NAMES = { 17 | '+': 'positive', 18 | '-': 'negative', 19 | '@': 'meta' 20 | }; 21 | 22 | return { 23 | token: function(stream) { 24 | var tw_pos = stream.string.search(/[\t ]+?$/); 25 | 26 | if (!stream.sol() || tw_pos === 0) { 27 | stream.skipToEnd(); 28 | return ("error " + ( 29 | TOKEN_NAMES[stream.string.charAt(0)] || '')).replace(/ $/, ''); 30 | } 31 | 32 | var token_name = TOKEN_NAMES[stream.peek()] || stream.skipToEnd(); 33 | 34 | if (tw_pos === -1) { 35 | stream.skipToEnd(); 36 | } else { 37 | stream.pos = tw_pos; 38 | } 39 | 40 | return token_name; 41 | } 42 | }; 43 | }); 44 | 45 | CodeMirror.defineMIME("text/x-diff", "diff"); 46 | 47 | }); 48 | -------------------------------------------------------------------------------- /templates/sorts/quicksort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Quick Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Quick Sort is a sorting algorithm based on splitting the data structure in smaller partitions and sort them recursively until the data structure is sorted. 14 |

15 |

16 | This division in partitions is done based on an element, called pivot: 17 | all the elements bigger than the pivot get placed on the right side of the structure, the smaller ones to the left, creating two partitions. 18 | Next, this procedure gets applied recursively to the two partitions and so on. 19 |

20 |

21 | This partition technique based on the pivot is called Divide and conquer. 22 | It's a performant strategy also used by other sorting algorithms, such as Merge Sort. 23 |

24 | {% endblock %} 25 | 26 | {% block medio %} 27 | O(n × log n) 28 | {% endblock %} 29 | 30 | {% block peggiore %} 31 | O(n2) 32 | {% endblock %} 33 | 34 | {% block migliore %} 35 | O(n × log n) 36 | {% endblock %} 37 | 38 | {% block memoria %} 39 | O(n) 40 | {% endblock %} 41 | -------------------------------------------------------------------------------- /templates/sorts/oddevensort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Odd Even Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Odd Even Sort (also known as Brick Sort) is a sorting in-place algorithm based on comparisons. It splits the data structure in pairs made up of elements with even indeces and 14 | odd indeces respectively. 15 |

16 |

17 | It compares adjacent pairs and swaps them if they are in the wrong order with an algorithm similar to Bubble Sort. 18 | This procedure continues for every pair, alternating between odd/even and even/odd pairs until the structure is sorted. 19 |

20 |

21 | This algorithm can get executed on paraller processors, but it's not widely used. It can be performant if the data structure is almost sorted, but it's really slow 22 | if there are small elements near the end of the data structure since they will require many iterations to get moved in the right place. 23 |

24 | {% endblock %} 25 | 26 | {% block medio %} 27 | O(n2) 28 | {% endblock %} 29 | 30 | {% block peggiore %} 31 | O(n2) 32 | {% endblock %} 33 | 34 | {% block migliore %} 35 | O(n) 36 | {% endblock %} 37 | 38 | {% block memoria %} 39 | O(1) 40 | {% endblock %} 41 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Welcome to Sort Visualizer! 2 | 3 | https://www.sortvisualizer.com 4 | **Sort Visualizer** is a web application designed to better understand sorting algorithms by displaying and visualizing them. 5 | In the website you can find information and implementations in multiple programming languages of more than 15 sorting algorithms, categorized by their time and space complexity. 6 | 7 | ## The sorting algorithms currently available are: 8 | 9 | - Quick Sort 10 | - Merge Sort 11 | - Heap Sort 12 | - Bubble Sort 13 | - Selection Sort 14 | - Insertion Sort 15 | - Gnome Sort 16 | - Shaker Sort 17 | - Odd Even Sort 18 | - Pancake Sort 19 | - Bitonic Sort 20 | - Radix Sort 21 | - Shell Sort 22 | - Comb Sort 23 | - Bogo Sort 24 | 25 | ## Custom Sort 26 | 27 | It's also possible to design and visualize _your own sorting algorithm_, using the [documented APIs](https://www.sortvisualizer.com/docs). Have fun messing around and trying new stuff! 28 | 29 | ## Running locally 30 | 31 | To run the project locally, install Python 3 on your machine, clone the repository, install all the dependencies and run the `app.py` file. 32 | 33 | ```console 34 | git clone https://github.com/Myphz/sortvisualizer 35 | cd sortvisualizer 36 | pip install -r requirements.txt 37 | python app.py 38 | ``` 39 | 40 | ## Notes 41 | 42 | This website has been made using purely vanilla JS, HTML, CSS and Flask. 43 | Feedback and contributions are appreciated! 44 | Consider adding a :star: to this repository to support the project! 45 | -------------------------------------------------------------------------------- /static/js/others/mode/mbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: mbox mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

mbox mode

27 |
38 | 41 | 42 |

MIME types defined: application/mbox.

43 | 44 |
45 | -------------------------------------------------------------------------------- /templates/sorts/bubblesort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Bubble Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Bubble Sort is an iterative sorting algorithm that imitates the movement of bubbles in sparkling water. 14 | The bubbles represents the elements of the data structure. 15 |

16 |

17 | The bigger bubbles reach the top faster than smaller bubbles, and this algorithm works in the same way. It iterates through the data structure and for each cycle compares the current element with the next one, 18 | swapping them if they are in the wrong order. 19 |

20 |

21 | It's a simple algorithm to implement, but not much efficient: on average, quadratic sorting algorithms with the same time complexity such as Selection Sort or Insertion Sort perform better.
22 | It has several variants to improve its performances, such as Shaker Sort, Odd Even Sort and Comb Sort. 23 |

24 | {% endblock %} 25 | 26 | {% block medio %} 27 | O(n2) 28 | {% endblock %} 29 | 30 | {% block peggiore %} 31 | O(n2) 32 | {% endblock %} 33 | 34 | {% block migliore %} 35 | O(n) 36 | {% endblock %} 37 | 38 | {% block memoria %} 39 | O(1) 40 | {% endblock %} 41 | -------------------------------------------------------------------------------- /static/js/others/mode/cypher/test.js: -------------------------------------------------------------------------------- 1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others 2 | // Distributed under an MIT license: https://codemirror.net/LICENSE 3 | 4 | (function() { 5 | var mode = CodeMirror.getMode({tabSize: 4, indentUnit: 2}, "cypher"); 6 | function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1)); } 7 | 8 | MT("unbalancedDoubledQuotedString", 9 | "[string \"a'b\"][variable c]"); 10 | 11 | MT("unbalancedSingleQuotedString", 12 | "[string 'a\"b'][variable c]"); 13 | 14 | MT("doubleQuotedString", 15 | "[string \"a\"][variable b]"); 16 | 17 | MT("singleQuotedString", 18 | "[string 'a'][variable b]"); 19 | 20 | MT("single attribute (with content)", 21 | "[node {][atom a:][string 'a'][node }]"); 22 | 23 | MT("multiple attribute, singleQuotedString (with content)", 24 | "[node {][atom a:][string 'a'][node ,][atom b:][string 'b'][node }]"); 25 | 26 | MT("multiple attribute, doubleQuotedString (with content)", 27 | "[node {][atom a:][string \"a\"][node ,][atom b:][string \"b\"][node }]"); 28 | 29 | MT("single attribute (without content)", 30 | "[node {][atom a:][string 'a'][node }]"); 31 | 32 | MT("multiple attribute, singleQuotedString (without content)", 33 | "[node {][atom a:][string ''][node ,][atom b:][string ''][node }]"); 34 | 35 | MT("multiple attribute, doubleQuotedString (without content)", 36 | "[node {][atom a:][string \"\"][node ,][atom b:][string \"\"][node }]"); 37 | })(); 38 | -------------------------------------------------------------------------------- /templates/sorts/shakersort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Shaker Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Shaker Sort, also called Cocktail Shaker Sort, is an extension of the Bubble Sort. 14 | Unlike the Bubble Sort, which puts the bigger element to the end of the non-ordered sublist at each cycle, 15 | the Shaker Sort alternates between bringing the bigger element of the unsorted sublist to the end of the ordered part 16 | and leading the smaller elements of the unsorted sublist at the beginning of the sorted sublist. 17 |

18 |

19 | Shaker Sort alternates two Bubble Sorts, the first one that sorts the structure 20 | starting from the largest element ordering the elements down to the smallest, 21 | and the second one, that starts from the smallest element and sorts the elements up to the largest. 22 |

23 |

24 | Although this algorithm is an extension of the Bubble Sort and at first glance it might seem much more efficient, 25 | the performance increase is minimal and the complexity is the same. 26 |

27 | {% endblock %} 28 | 29 | {% block medio %} 30 | O(n2) 31 | {% endblock %} 32 | 33 | {% block peggiore %} 34 | O(n2) 35 | {% endblock %} 36 | 37 | {% block migliore %} 38 | O(n) 39 | {% endblock %} 40 | 41 | {% block memoria %} 42 | O(1) 43 | {% endblock %} 44 | -------------------------------------------------------------------------------- /static/js/others/mode/asciiarmor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: ASCII Armor (PGP) mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

ASCII Armor (PGP) mode

27 |
36 | 37 | 42 | 43 |

MIME types 44 | defined: application/pgp, application/pgp-encrypted, application/pgp-keys, application/pgp-signature

45 | 46 |
47 | -------------------------------------------------------------------------------- /static/css/others/themes/bespin.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: Bespin 4 | Author: Mozilla / Jan T. Sott 5 | 6 | CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror) 7 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) 8 | 9 | */ 10 | 11 | .cm-s-bespin.CodeMirror {background: #28211c; color: #9d9b97;} 12 | .cm-s-bespin div.CodeMirror-selected {background: #36312e !important;} 13 | .cm-s-bespin .CodeMirror-gutters {background: #28211c; border-right: 0px;} 14 | .cm-s-bespin .CodeMirror-linenumber {color: #666666;} 15 | .cm-s-bespin .CodeMirror-cursor {border-left: 1px solid #797977 !important;} 16 | 17 | .cm-s-bespin span.cm-comment {color: #937121;} 18 | .cm-s-bespin span.cm-atom {color: #9b859d;} 19 | .cm-s-bespin span.cm-number {color: #9b859d;} 20 | 21 | .cm-s-bespin span.cm-property, .cm-s-bespin span.cm-attribute {color: #54be0d;} 22 | .cm-s-bespin span.cm-keyword {color: #cf6a4c;} 23 | .cm-s-bespin span.cm-string {color: #f9ee98;} 24 | 25 | .cm-s-bespin span.cm-variable {color: #54be0d;} 26 | .cm-s-bespin span.cm-variable-2 {color: #5ea6ea;} 27 | .cm-s-bespin span.cm-def {color: #cf7d34;} 28 | .cm-s-bespin span.cm-error {background: #cf6a4c; color: #797977;} 29 | .cm-s-bespin span.cm-bracket {color: #9d9b97;} 30 | .cm-s-bespin span.cm-tag {color: #cf6a4c;} 31 | .cm-s-bespin span.cm-link {color: #9b859d;} 32 | 33 | .cm-s-bespin .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;} 34 | .cm-s-bespin .CodeMirror-activeline-background { background: #404040; } 35 | -------------------------------------------------------------------------------- /static/js/others/mode/spreadsheet/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Spreadsheet mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 26 |
27 |

Spreadsheet mode

28 |
29 | 30 | 37 | 38 |

MIME types defined: text/x-spreadsheet.

39 | 40 |

The Spreadsheet Mode

41 |

Created by Robert Plummer

42 |
43 | -------------------------------------------------------------------------------- /static/js/others/mode/http/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: HTTP mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

HTTP mode

27 | 28 | 29 |
39 | 40 | 43 | 44 |

MIME types defined: message/http.

45 |
46 | -------------------------------------------------------------------------------- /static/css/others/themes/isotope.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: Isotope 4 | Author: David Desandro / Jan T. Sott 5 | 6 | CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror) 7 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) 8 | 9 | */ 10 | 11 | .cm-s-isotope.CodeMirror {background: #000000; color: #e0e0e0;} 12 | .cm-s-isotope div.CodeMirror-selected {background: #404040 !important;} 13 | .cm-s-isotope .CodeMirror-gutters {background: #000000; border-right: 0px;} 14 | .cm-s-isotope .CodeMirror-linenumber {color: #808080;} 15 | .cm-s-isotope .CodeMirror-cursor {border-left: 1px solid #c0c0c0 !important;} 16 | 17 | .cm-s-isotope span.cm-comment {color: #3300ff;} 18 | .cm-s-isotope span.cm-atom {color: #cc00ff;} 19 | .cm-s-isotope span.cm-number {color: #cc00ff;} 20 | 21 | .cm-s-isotope span.cm-property, .cm-s-isotope span.cm-attribute {color: #33ff00;} 22 | .cm-s-isotope span.cm-keyword {color: #ff0000;} 23 | .cm-s-isotope span.cm-string {color: #ff0099;} 24 | 25 | .cm-s-isotope span.cm-variable {color: #33ff00;} 26 | .cm-s-isotope span.cm-variable-2 {color: #0066ff;} 27 | .cm-s-isotope span.cm-def {color: #ff9900;} 28 | .cm-s-isotope span.cm-error {background: #ff0000; color: #c0c0c0;} 29 | .cm-s-isotope span.cm-bracket {color: #e0e0e0;} 30 | .cm-s-isotope span.cm-tag {color: #ff0000;} 31 | .cm-s-isotope span.cm-link {color: #cc00ff;} 32 | 33 | .cm-s-isotope .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;} 34 | .cm-s-isotope .CodeMirror-activeline-background { background: #202020; } 35 | -------------------------------------------------------------------------------- /static/js/others/mode/haskell-literate/haskell-literate.js: -------------------------------------------------------------------------------- 1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others 2 | // Distributed under an MIT license: https://codemirror.net/LICENSE 3 | 4 | (function (mod) { 5 | if (typeof exports == "object" && typeof module == "object") // CommonJS 6 | mod(require("../../lib/codemirror"), require("../haskell/haskell")) 7 | else if (typeof define == "function" && define.amd) // AMD 8 | define(["../../lib/codemirror", "../haskell/haskell"], mod) 9 | else // Plain browser env 10 | mod(CodeMirror) 11 | })(function (CodeMirror) { 12 | "use strict" 13 | 14 | CodeMirror.defineMode("haskell-literate", function (config, parserConfig) { 15 | var baseMode = CodeMirror.getMode(config, (parserConfig && parserConfig.base) || "haskell") 16 | 17 | return { 18 | startState: function () { 19 | return { 20 | inCode: false, 21 | baseState: CodeMirror.startState(baseMode) 22 | } 23 | }, 24 | token: function (stream, state) { 25 | if (stream.sol()) { 26 | if (state.inCode = stream.eat(">")) 27 | return "meta" 28 | } 29 | if (state.inCode) { 30 | return baseMode.token(stream, state.baseState) 31 | } else { 32 | stream.skipToEnd() 33 | return "comment" 34 | } 35 | }, 36 | innerMode: function (state) { 37 | return state.inCode ? {state: state.baseState, mode: baseMode} : null 38 | } 39 | } 40 | }, "haskell") 41 | 42 | CodeMirror.defineMIME("text/x-literate-haskell", "haskell-literate") 43 | }); 44 | -------------------------------------------------------------------------------- /static/css/others/themes/hopscotch.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: Hopscotch 4 | Author: Jan T. Sott 5 | 6 | CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror) 7 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) 8 | 9 | */ 10 | 11 | .cm-s-hopscotch.CodeMirror {background: #322931; color: #d5d3d5;} 12 | .cm-s-hopscotch div.CodeMirror-selected {background: #433b42 !important;} 13 | .cm-s-hopscotch .CodeMirror-gutters {background: #322931; border-right: 0px;} 14 | .cm-s-hopscotch .CodeMirror-linenumber {color: #797379;} 15 | .cm-s-hopscotch .CodeMirror-cursor {border-left: 1px solid #989498 !important;} 16 | 17 | .cm-s-hopscotch span.cm-comment {color: #b33508;} 18 | .cm-s-hopscotch span.cm-atom {color: #c85e7c;} 19 | .cm-s-hopscotch span.cm-number {color: #c85e7c;} 20 | 21 | .cm-s-hopscotch span.cm-property, .cm-s-hopscotch span.cm-attribute {color: #8fc13e;} 22 | .cm-s-hopscotch span.cm-keyword {color: #dd464c;} 23 | .cm-s-hopscotch span.cm-string {color: #fdcc59;} 24 | 25 | .cm-s-hopscotch span.cm-variable {color: #8fc13e;} 26 | .cm-s-hopscotch span.cm-variable-2 {color: #1290bf;} 27 | .cm-s-hopscotch span.cm-def {color: #fd8b19;} 28 | .cm-s-hopscotch span.cm-error {background: #dd464c; color: #989498;} 29 | .cm-s-hopscotch span.cm-bracket {color: #d5d3d5;} 30 | .cm-s-hopscotch span.cm-tag {color: #dd464c;} 31 | .cm-s-hopscotch span.cm-link {color: #c85e7c;} 32 | 33 | .cm-s-hopscotch .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;} 34 | .cm-s-hopscotch .CodeMirror-activeline-background { background: #302020; } 35 | -------------------------------------------------------------------------------- /static/js/others/mode/oz/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Oz mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 14 | 26 | 27 |
28 |

Oz mode

29 | 50 |

MIME type defined: text/x-oz.

51 | 52 | 59 |
60 | -------------------------------------------------------------------------------- /static/js/others/mode/solr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Solr mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 33 | 34 |
35 |

Solr mode

36 | 37 |
38 | 47 |
48 | 49 | 55 | 56 |

MIME types defined: text/x-solr.

57 |
58 | -------------------------------------------------------------------------------- /templates/sorts/radixsort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Radix Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Radix Sort is a sorting algorithm that doesn't use comparisons. 14 | Its complexity depends, in addition to the number of elements, by the values b and d, representing the radix of the numbers and the maximum number of digits of the elements respectively. 15 |

16 |

17 | Radix Sort works by splitting the elements into buckets, according to their radix, starting from the least significant digit (LSD) or from the most significant digit (MSD) of the number. 18 | If the number has more than one significant digit, this process is repeated to account all the digits of the number. 19 |

20 |

21 | It's a particular sorting algorithm really different from the others as it is not based on comparisons, but on the digits of the number instead, so it's only applicable on whole numbers or strings. 22 |

23 |

24 | It can be faster than other logarithmic sorting algorithms on big data structures as it can even perform in linear time in special cases, but it's not widely used due to its limitations. 25 |

26 | {% endblock %} 27 | 28 | {% block medio %} 29 | O(d × (n + b)) 30 | {% endblock %} 31 | 32 | {% block peggiore %} 33 | O(d × (n + b)) 34 | {% endblock %} 35 | 36 | {% block migliore %} 37 | O(d × (n + b)) 38 | {% endblock %} 39 | 40 | {% block memoria %} 41 | O(n + 2^d) 42 | {% endblock %} 43 | -------------------------------------------------------------------------------- /static/js/others/mode/z80/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Z80 assembly mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

Z80 assembly mode

27 | 28 | 29 |
45 | 46 | 51 | 52 |

MIME types defined: text/x-z80, text/x-ez80.

53 |
54 | -------------------------------------------------------------------------------- /static/js/others/mode/ecl/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: ECL mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

ECL mode

27 |
45 | 48 | 49 |

Based on CodeMirror's clike mode. For more information see HPCC Systems web site.

50 |

MIME types defined: text/x-ecl.

51 | 52 |
53 | -------------------------------------------------------------------------------- /static/css/others/themes/railscasts.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: Railscasts 4 | Author: Ryan Bates (http://railscasts.com) 5 | 6 | CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror) 7 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) 8 | 9 | */ 10 | 11 | .cm-s-railscasts.CodeMirror {background: #2b2b2b; color: #f4f1ed;} 12 | .cm-s-railscasts div.CodeMirror-selected {background: #272935 !important;} 13 | .cm-s-railscasts .CodeMirror-gutters {background: #2b2b2b; border-right: 0px;} 14 | .cm-s-railscasts .CodeMirror-linenumber {color: #5a647e;} 15 | .cm-s-railscasts .CodeMirror-cursor {border-left: 1px solid #d4cfc9 !important;} 16 | 17 | .cm-s-railscasts span.cm-comment {color: #bc9458;} 18 | .cm-s-railscasts span.cm-atom {color: #b6b3eb;} 19 | .cm-s-railscasts span.cm-number {color: #b6b3eb;} 20 | 21 | .cm-s-railscasts span.cm-property, .cm-s-railscasts span.cm-attribute {color: #a5c261;} 22 | .cm-s-railscasts span.cm-keyword {color: #da4939;} 23 | .cm-s-railscasts span.cm-string {color: #ffc66d;} 24 | 25 | .cm-s-railscasts span.cm-variable {color: #a5c261;} 26 | .cm-s-railscasts span.cm-variable-2 {color: #6d9cbe;} 27 | .cm-s-railscasts span.cm-def {color: #cc7833;} 28 | .cm-s-railscasts span.cm-error {background: #da4939; color: #d4cfc9;} 29 | .cm-s-railscasts span.cm-bracket {color: #f4f1ed;} 30 | .cm-s-railscasts span.cm-tag {color: #da4939;} 31 | .cm-s-railscasts span.cm-link {color: #b6b3eb;} 32 | 33 | .cm-s-railscasts .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;} 34 | .cm-s-railscasts .CodeMirror-activeline-background { background: #303040; } 35 | -------------------------------------------------------------------------------- /static/js/others/fullscreen.js: -------------------------------------------------------------------------------- 1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others 2 | // Distributed under an MIT license: https://codemirror.net/LICENSE 3 | 4 | (function(mod) { 5 | if (typeof exports == "object" && typeof module == "object") // CommonJS 6 | mod(require("../../lib/codemirror")); 7 | else if (typeof define == "function" && define.amd) // AMD 8 | define(["../../lib/codemirror"], mod); 9 | else // Plain browser env 10 | mod(CodeMirror); 11 | })(function(CodeMirror) { 12 | "use strict"; 13 | 14 | CodeMirror.defineOption("fullScreen", false, function(cm, val, old) { 15 | if (old == CodeMirror.Init) old = false; 16 | if (!old == !val) return; 17 | if (val) setFullscreen(cm); 18 | else setNormal(cm); 19 | }); 20 | 21 | function setFullscreen(cm) { 22 | var wrap = cm.getWrapperElement(); 23 | cm.state.fullScreenRestore = {scrollTop: window.pageYOffset, scrollLeft: window.pageXOffset, 24 | width: wrap.style.width, height: wrap.style.height}; 25 | wrap.style.width = ""; 26 | wrap.style.height = "auto"; 27 | wrap.className += " CodeMirror-fullscreen"; 28 | document.documentElement.style.overflow = "hidden"; 29 | cm.refresh(); 30 | } 31 | 32 | function setNormal(cm) { 33 | var wrap = cm.getWrapperElement(); 34 | wrap.className = wrap.className.replace(/\s*CodeMirror-fullscreen\b/, ""); 35 | document.documentElement.style.overflow = ""; 36 | var info = cm.state.fullScreenRestore; 37 | wrap.style.width = info.width; wrap.style.height = info.height; 38 | window.scrollTo(info.scrollLeft, info.scrollTop); 39 | cm.refresh(); 40 | } 41 | }); 42 | -------------------------------------------------------------------------------- /static/js/others/mode/twig/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Twig mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 26 | 27 |
28 |

Twig mode

29 |
42 | 47 |
48 | -------------------------------------------------------------------------------- /static/js/index.js: -------------------------------------------------------------------------------- 1 | const minDelay = 700; 2 | const maxDelay = 900; 3 | 4 | const minLetters = 10; 5 | const maxLetters = 18; 6 | 7 | const delay = 75; 8 | 9 | const startAscii = 65; 10 | const endAscii = 91; 11 | 12 | const title = { 13 | "first-header": "SORT", 14 | "second-header": "VISUALIZER" 15 | }; 16 | 17 | byId("header").onclick = headerAnimation; 18 | headerAnimation(); 19 | 20 | function oneHeaderAnimation(whichId) { 21 | byId(whichId).innerHTML.split("").forEach( (item, i) => { 22 | letterAnimation(whichId, item, i); 23 | } 24 | )} 25 | 26 | function headerAnimation() { 27 | oneHeaderAnimation('first-header'); 28 | oneHeaderAnimation('second-header'); 29 | } 30 | 31 | async function letterAnimation(child, letter, i) { 32 | await sleep(Math.floor(Math.random() * minDelay) + maxDelay - minDelay); 33 | let rand = Math.floor(Math.random() * minLetters) + maxLetters - minLetters; 34 | let target = []; 35 | 36 | for (let k = 0; k < rand; k++) target.push(randomLetter()); 37 | 38 | target.push(title[child][i]); 39 | 40 | for (let j = 0; j < target.length; j++) { 41 | changeLetter(child, target[j], i); 42 | await sleep(delay); 43 | } 44 | } 45 | 46 | function randomLetter() { 47 | return String.fromCharCode(startAscii + Math.floor(Math.random() * (endAscii - startAscii))); 48 | } 49 | 50 | function changeLetter(child, repl, i) { 51 | child = byId(child); 52 | let temp = child.innerHTML; 53 | child.innerHTML = temp.substr(0, i) + repl + temp.substr(i+1); 54 | } 55 | 56 | function sleep(delay) { 57 | return new Promise(resolve => { 58 | setTimeout(resolve, delay); 59 | }); 60 | } 61 | -------------------------------------------------------------------------------- /static/js/others/mode/vb/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: VB.NET mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 30 | 31 |
32 |

VB.NET mode

33 |
34 | 46 |
47 |

MIME type defined: text/x-vb.

48 | 49 |
50 | -------------------------------------------------------------------------------- /static/js/others/mode/pascal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Pascal mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

Pascal mode

27 | 28 | 29 |
52 | 53 | 59 | 60 |

MIME types defined: text/x-pascal.

61 |
62 | -------------------------------------------------------------------------------- /static/js/others/mode/pig/index.html: -------------------------------------------------------------------------------- 1 | 2 | CodeMirror: Pig Latin mode 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 23 | 24 |
25 |

Pig Latin mode

26 |
38 | 39 | 46 | 47 |

48 | Simple mode that handles Pig Latin language. 49 |

50 | 51 |

MIME type defined: text/x-pig 52 | (PIG code) 53 |

54 | -------------------------------------------------------------------------------- /static/js/others/mode/vbscript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: VBScript mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

VBScript mode

27 | 28 | 29 |
46 | 47 | 53 | 54 |

MIME types defined: text/vbscript.

55 |
56 | -------------------------------------------------------------------------------- /static/js/others/mode/turtle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Turtle mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 26 |
27 |

Turtle mode

28 |
42 | 48 | 49 |

MIME types defined: text/turtle.

50 | 51 |
52 | -------------------------------------------------------------------------------- /templates/sorts/combsort.html: -------------------------------------------------------------------------------- 1 | {% extends "parents/base_sort.html" %} 2 | 3 | {% block js %} 4 | 5 | {% endblock %} 6 | 7 | {% block title %} 8 | Comb Sort 9 | {% endblock %} 10 | 11 | {% block info %} 12 |

13 | Comb Sort is a sorting algorithm really similar to Bubble Sort. It highly improves its performances by removing the "turtles", that is the small elements placed near the end of the data structure that slows down 14 | a lot the performances of Bubble Sort. 15 |

16 |

17 | Bubble Sort is based on comparing adjacent elements, so with a distance of 1. Comb Sort increases this distance using a shrink factor k (usually with a value of 1.3). 18 | Initially, the distance has a value of n. For each iteration, a Bubble Sort gets executed using the new distance value instead of 1. The distance gets progressively divided by the shrink factor k. 19 |

20 |

21 | This procedure gets executed until the distance reaches the value of 1. At this point, the algorithm is a regular Bubble Sort, but the majority of the "turtles" already got removed. 22 |

23 |

24 | Its average time complexity depends, in addition to the number of elements of the data structure, by a value p, representing the number of divisions carried out. 25 |

26 | {% endblock %} 27 | 28 | {% block medio %} 29 | Ω(n2 / 2p) 30 | {% endblock %} 31 | 32 | {% block peggiore %} 33 | O(n2) 34 | {% endblock %} 35 | 36 | {% block migliore %} 37 | Θ(n × log n) 38 | {% endblock %} 39 | 40 | {% block memoria %} 41 | O(1) 42 | {% endblock %} 43 | -------------------------------------------------------------------------------- /static/js/others/mode/gherkin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Gherkin mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

Gherkin mode

27 |
42 | 45 | 46 |

MIME types defined: text/x-feature.

47 | 48 |
49 | -------------------------------------------------------------------------------- /static/js/others/mode/properties/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Properties files mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

Properties files mode

27 |
46 | 49 | 50 |

MIME types defined: text/x-properties, 51 | text/x-ini.

52 | 53 |
54 | -------------------------------------------------------------------------------- /static/css/others/themes/colorforth.css: -------------------------------------------------------------------------------- 1 | .cm-s-colorforth.CodeMirror { background: #000000; color: #f8f8f8; } 2 | .cm-s-colorforth .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; } 3 | .cm-s-colorforth .CodeMirror-guttermarker { color: #FFBD40; } 4 | .cm-s-colorforth .CodeMirror-guttermarker-subtle { color: #78846f; } 5 | .cm-s-colorforth .CodeMirror-linenumber { color: #bababa; } 6 | .cm-s-colorforth .CodeMirror-cursor { border-left: 1px solid white; } 7 | 8 | .cm-s-colorforth span.cm-comment { color: #ededed; } 9 | .cm-s-colorforth span.cm-def { color: #ff1c1c; font-weight:bold; } 10 | .cm-s-colorforth span.cm-keyword { color: #ffd900; } 11 | .cm-s-colorforth span.cm-builtin { color: #00d95a; } 12 | .cm-s-colorforth span.cm-variable { color: #73ff00; } 13 | .cm-s-colorforth span.cm-string { color: #007bff; } 14 | .cm-s-colorforth span.cm-number { color: #00c4ff; } 15 | .cm-s-colorforth span.cm-atom { color: #606060; } 16 | 17 | .cm-s-colorforth span.cm-variable-2 { color: #EEE; } 18 | .cm-s-colorforth span.cm-variable-3, .cm-s-colorforth span.cm-type { color: #DDD; } 19 | .cm-s-colorforth span.cm-property {} 20 | .cm-s-colorforth span.cm-operator {} 21 | 22 | .cm-s-colorforth span.cm-meta { color: yellow; } 23 | .cm-s-colorforth span.cm-qualifier { color: #FFF700; } 24 | .cm-s-colorforth span.cm-bracket { color: #cc7; } 25 | .cm-s-colorforth span.cm-tag { color: #FFBD40; } 26 | .cm-s-colorforth span.cm-attribute { color: #FFF700; } 27 | .cm-s-colorforth span.cm-error { color: #f00; } 28 | 29 | .cm-s-colorforth div.CodeMirror-selected { background: #333d53; } 30 | 31 | .cm-s-colorforth span.cm-compilation { background: rgba(255, 255, 255, 0.12); } 32 | 33 | .cm-s-colorforth .CodeMirror-activeline-background { background: #253540; } 34 | -------------------------------------------------------------------------------- /static/js/others/mode/rust/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Rust mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 26 |
27 |

Rust mode

28 | 29 | 30 |
53 | 54 | 62 | 63 |

MIME types defined: text/x-rustsrc.

64 |
65 | -------------------------------------------------------------------------------- /static/css/others/themes/cobalt.css: -------------------------------------------------------------------------------- 1 | .cm-s-cobalt.CodeMirror { background: #002240; color: white; } 2 | .cm-s-cobalt div.CodeMirror-selected { background: #b36539; } 3 | .cm-s-cobalt .CodeMirror-line::selection, .cm-s-cobalt .CodeMirror-line > span::selection, .cm-s-cobalt .CodeMirror-line > span > span::selection { background: rgba(179, 101, 57, .99); } 4 | .cm-s-cobalt .CodeMirror-line::-moz-selection, .cm-s-cobalt .CodeMirror-line > span::-moz-selection, .cm-s-cobalt .CodeMirror-line > span > span::-moz-selection { background: rgba(179, 101, 57, .99); } 5 | .cm-s-cobalt .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; } 6 | .cm-s-cobalt .CodeMirror-guttermarker { color: #ffee80; } 7 | .cm-s-cobalt .CodeMirror-guttermarker-subtle { color: #d0d0d0; } 8 | .cm-s-cobalt .CodeMirror-linenumber { color: #d0d0d0; } 9 | .cm-s-cobalt .CodeMirror-cursor { border-left: 1px solid white; } 10 | 11 | .cm-s-cobalt span.cm-comment { color: #08f; } 12 | .cm-s-cobalt span.cm-atom { color: #845dc4; } 13 | .cm-s-cobalt span.cm-number, .cm-s-cobalt span.cm-attribute { color: #ff80e1; } 14 | .cm-s-cobalt span.cm-keyword { color: #ffee80; } 15 | .cm-s-cobalt span.cm-string { color: #3ad900; } 16 | .cm-s-cobalt span.cm-meta { color: #ff9d00; } 17 | .cm-s-cobalt span.cm-variable-2, .cm-s-cobalt span.cm-tag { color: #9effff; } 18 | .cm-s-cobalt span.cm-variable-3, .cm-s-cobalt span.cm-def, .cm-s-cobalt .cm-type { color: white; } 19 | .cm-s-cobalt span.cm-bracket { color: #d8d8d8; } 20 | .cm-s-cobalt span.cm-builtin, .cm-s-cobalt span.cm-special { color: #ff9e59; } 21 | .cm-s-cobalt span.cm-link { color: #845dc4; } 22 | .cm-s-cobalt span.cm-error { color: #9d1e15; } 23 | 24 | .cm-s-cobalt .CodeMirror-activeline-background { background: #002D57; } 25 | .cm-s-cobalt .CodeMirror-matchingbracket { outline:1px solid grey;color:white !important; } 26 | -------------------------------------------------------------------------------- /static/css/others/themes/idea.css: -------------------------------------------------------------------------------- 1 | /** 2 | Name: IDEA default theme 3 | From IntelliJ IDEA by JetBrains 4 | */ 5 | 6 | .cm-s-idea span.cm-meta { color: #808000; } 7 | .cm-s-idea span.cm-number { color: #0000FF; } 8 | .cm-s-idea span.cm-keyword { line-height: 1em; font-weight: bold; color: #000080; } 9 | .cm-s-idea span.cm-atom { font-weight: bold; color: #000080; } 10 | .cm-s-idea span.cm-def { color: #000000; } 11 | .cm-s-idea span.cm-variable { color: black; } 12 | .cm-s-idea span.cm-variable-2 { color: black; } 13 | .cm-s-idea span.cm-variable-3, .cm-s-idea span.cm-type { color: black; } 14 | .cm-s-idea span.cm-property { color: black; } 15 | .cm-s-idea span.cm-operator { color: black; } 16 | .cm-s-idea span.cm-comment { color: #808080; } 17 | .cm-s-idea span.cm-string { color: #008000; } 18 | .cm-s-idea span.cm-string-2 { color: #008000; } 19 | .cm-s-idea span.cm-qualifier { color: #555; } 20 | .cm-s-idea span.cm-error { color: #FF0000; } 21 | .cm-s-idea span.cm-attribute { color: #0000FF; } 22 | .cm-s-idea span.cm-tag { color: #000080; } 23 | .cm-s-idea span.cm-link { color: #0000FF; } 24 | .cm-s-idea .CodeMirror-activeline-background { background: #FFFAE3; } 25 | 26 | .cm-s-idea span.cm-builtin { color: #30a; } 27 | .cm-s-idea span.cm-bracket { color: #cc7; } 28 | .cm-s-idea { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;} 29 | 30 | 31 | .cm-s-idea .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; } 32 | 33 | .CodeMirror-hints.idea { 34 | font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; 35 | color: #616569; 36 | background-color: #ebf3fd !important; 37 | } 38 | 39 | .CodeMirror-hints.idea .CodeMirror-hint-active { 40 | background-color: #a2b8c9 !important; 41 | color: #5c6065 !important; 42 | } -------------------------------------------------------------------------------- /static/css/others/themes/night.css: -------------------------------------------------------------------------------- 1 | /* Loosely based on the Midnight Textmate theme */ 2 | 3 | .cm-s-night.CodeMirror { background: #0a001f; color: #f8f8f8; } 4 | .cm-s-night div.CodeMirror-selected { background: #447; } 5 | .cm-s-night .CodeMirror-line::selection, .cm-s-night .CodeMirror-line > span::selection, .cm-s-night .CodeMirror-line > span > span::selection { background: rgba(68, 68, 119, .99); } 6 | .cm-s-night .CodeMirror-line::-moz-selection, .cm-s-night .CodeMirror-line > span::-moz-selection, .cm-s-night .CodeMirror-line > span > span::-moz-selection { background: rgba(68, 68, 119, .99); } 7 | .cm-s-night .CodeMirror-gutters { background: #0a001f; border-right: 1px solid #aaa; } 8 | .cm-s-night .CodeMirror-guttermarker { color: white; } 9 | .cm-s-night .CodeMirror-guttermarker-subtle { color: #bbb; } 10 | .cm-s-night .CodeMirror-linenumber { color: #f8f8f8; } 11 | .cm-s-night .CodeMirror-cursor { border-left: 1px solid white; } 12 | 13 | .cm-s-night span.cm-comment { color: #8900d1; } 14 | .cm-s-night span.cm-atom { color: #845dc4; } 15 | .cm-s-night span.cm-number, .cm-s-night span.cm-attribute { color: #ffd500; } 16 | .cm-s-night span.cm-keyword { color: #599eff; } 17 | .cm-s-night span.cm-string { color: #37f14a; } 18 | .cm-s-night span.cm-meta { color: #7678e2; } 19 | .cm-s-night span.cm-variable-2, .cm-s-night span.cm-tag { color: #99b2ff; } 20 | .cm-s-night span.cm-variable-3, .cm-s-night span.cm-def, .cm-s-night span.cm-type { color: white; } 21 | .cm-s-night span.cm-bracket { color: #8da6ce; } 22 | .cm-s-night span.cm-builtin, .cm-s-night span.cm-special { color: #ff9e59; } 23 | .cm-s-night span.cm-link { color: #845dc4; } 24 | .cm-s-night span.cm-error { color: #9d1e15; } 25 | 26 | .cm-s-night .CodeMirror-activeline-background { background: #1C005A; } 27 | .cm-s-night .CodeMirror-matchingbracket { outline:1px solid grey; color:white !important; } 28 | -------------------------------------------------------------------------------- /static/js/others/mode/perl/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Perl mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

Perl mode

27 | 28 | 29 |
67 | 68 | 73 | 74 |

MIME types defined: text/x-perl.

75 |
76 | -------------------------------------------------------------------------------- /static/js/others/mode/htmlembedded/htmlembedded.js: -------------------------------------------------------------------------------- 1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others 2 | // Distributed under an MIT license: https://codemirror.net/LICENSE 3 | 4 | (function(mod) { 5 | if (typeof exports == "object" && typeof module == "object") // CommonJS 6 | mod(require("../../lib/codemirror"), require("../htmlmixed/htmlmixed"), 7 | require("../../addon/mode/multiplex")); 8 | else if (typeof define == "function" && define.amd) // AMD 9 | define(["../../lib/codemirror", "../htmlmixed/htmlmixed", 10 | "../../addon/mode/multiplex"], mod); 11 | else // Plain browser env 12 | mod(CodeMirror); 13 | })(function(CodeMirror) { 14 | "use strict"; 15 | 16 | CodeMirror.defineMode("htmlembedded", function(config, parserConfig) { 17 | var closeComment = parserConfig.closeComment || "--%>" 18 | return CodeMirror.multiplexingMode(CodeMirror.getMode(config, "htmlmixed"), { 19 | open: parserConfig.openComment || "<%--", 20 | close: closeComment, 21 | delimStyle: "comment", 22 | mode: {token: function(stream) { 23 | stream.skipTo(closeComment) || stream.skipToEnd() 24 | return "comment" 25 | }} 26 | }, { 27 | open: parserConfig.open || parserConfig.scriptStartRegex || "<%", 28 | close: parserConfig.close || parserConfig.scriptEndRegex || "%>", 29 | mode: CodeMirror.getMode(config, parserConfig.scriptingModeSpec) 30 | }); 31 | }, "htmlmixed"); 32 | 33 | CodeMirror.defineMIME("application/x-ejs", {name: "htmlembedded", scriptingModeSpec:"javascript"}); 34 | CodeMirror.defineMIME("application/x-aspx", {name: "htmlembedded", scriptingModeSpec:"text/x-csharp"}); 35 | CodeMirror.defineMIME("application/x-jsp", {name: "htmlembedded", scriptingModeSpec:"text/x-java"}); 36 | CodeMirror.defineMIME("application/x-erb", {name: "htmlembedded", scriptingModeSpec:"ruby"}); 37 | }); 38 | -------------------------------------------------------------------------------- /static/css/others/themes/rubyblue.css: -------------------------------------------------------------------------------- 1 | .cm-s-rubyblue.CodeMirror { background: #112435; color: white; } 2 | .cm-s-rubyblue div.CodeMirror-selected { background: #38566F; } 3 | .cm-s-rubyblue .CodeMirror-line::selection, .cm-s-rubyblue .CodeMirror-line > span::selection, .cm-s-rubyblue .CodeMirror-line > span > span::selection { background: rgba(56, 86, 111, 0.99); } 4 | .cm-s-rubyblue .CodeMirror-line::-moz-selection, .cm-s-rubyblue .CodeMirror-line > span::-moz-selection, .cm-s-rubyblue .CodeMirror-line > span > span::-moz-selection { background: rgba(56, 86, 111, 0.99); } 5 | .cm-s-rubyblue .CodeMirror-gutters { background: #1F4661; border-right: 7px solid #3E7087; } 6 | .cm-s-rubyblue .CodeMirror-guttermarker { color: white; } 7 | .cm-s-rubyblue .CodeMirror-guttermarker-subtle { color: #3E7087; } 8 | .cm-s-rubyblue .CodeMirror-linenumber { color: white; } 9 | .cm-s-rubyblue .CodeMirror-cursor { border-left: 1px solid white; } 10 | 11 | .cm-s-rubyblue span.cm-comment { color: #999; font-style:italic; line-height: 1em; } 12 | .cm-s-rubyblue span.cm-atom { color: #F4C20B; } 13 | .cm-s-rubyblue span.cm-number, .cm-s-rubyblue span.cm-attribute { color: #82C6E0; } 14 | .cm-s-rubyblue span.cm-keyword { color: #F0F; } 15 | .cm-s-rubyblue span.cm-string { color: #F08047; } 16 | .cm-s-rubyblue span.cm-meta { color: #F0F; } 17 | .cm-s-rubyblue span.cm-variable-2, .cm-s-rubyblue span.cm-tag { color: #7BD827; } 18 | .cm-s-rubyblue span.cm-variable-3, .cm-s-rubyblue span.cm-def, .cm-s-rubyblue span.cm-type { color: white; } 19 | .cm-s-rubyblue span.cm-bracket { color: #F0F; } 20 | .cm-s-rubyblue span.cm-link { color: #F4C20B; } 21 | .cm-s-rubyblue span.CodeMirror-matchingbracket { color:#F0F !important; } 22 | .cm-s-rubyblue span.cm-builtin, .cm-s-rubyblue span.cm-special { color: #FF9D00; } 23 | .cm-s-rubyblue span.cm-error { color: #AF2018; } 24 | 25 | .cm-s-rubyblue .CodeMirror-activeline-background { background: #173047; } 26 | -------------------------------------------------------------------------------- /static/js/others/mode/javascript/typescript.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: TypeScript mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 26 |
27 |

TypeScript mode

28 | 29 | 30 |
52 | 53 | 60 | 61 |

This is a specialization of the JavaScript mode.

62 |
63 | -------------------------------------------------------------------------------- /static/js/others/mode/elm/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Elm mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

Elm mode

27 | 28 |
52 | 53 | 59 | 60 |

MIME types defined: text/x-elm.

61 |
62 | -------------------------------------------------------------------------------- /static/css/others/themes/tomorrow-night-bright.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: Tomorrow Night - Bright 4 | Author: Chris Kempson 5 | 6 | Port done by Gerard Braad 7 | 8 | */ 9 | 10 | .cm-s-tomorrow-night-bright.CodeMirror { background: #000000; color: #eaeaea; } 11 | .cm-s-tomorrow-night-bright div.CodeMirror-selected { background: #424242; } 12 | .cm-s-tomorrow-night-bright .CodeMirror-gutters { background: #000000; border-right: 0px; } 13 | .cm-s-tomorrow-night-bright .CodeMirror-guttermarker { color: #e78c45; } 14 | .cm-s-tomorrow-night-bright .CodeMirror-guttermarker-subtle { color: #777; } 15 | .cm-s-tomorrow-night-bright .CodeMirror-linenumber { color: #424242; } 16 | .cm-s-tomorrow-night-bright .CodeMirror-cursor { border-left: 1px solid #6A6A6A; } 17 | 18 | .cm-s-tomorrow-night-bright span.cm-comment { color: #d27b53; } 19 | .cm-s-tomorrow-night-bright span.cm-atom { color: #a16a94; } 20 | .cm-s-tomorrow-night-bright span.cm-number { color: #a16a94; } 21 | 22 | .cm-s-tomorrow-night-bright span.cm-property, .cm-s-tomorrow-night-bright span.cm-attribute { color: #99cc99; } 23 | .cm-s-tomorrow-night-bright span.cm-keyword { color: #d54e53; } 24 | .cm-s-tomorrow-night-bright span.cm-string { color: #e7c547; } 25 | 26 | .cm-s-tomorrow-night-bright span.cm-variable { color: #b9ca4a; } 27 | .cm-s-tomorrow-night-bright span.cm-variable-2 { color: #7aa6da; } 28 | .cm-s-tomorrow-night-bright span.cm-def { color: #e78c45; } 29 | .cm-s-tomorrow-night-bright span.cm-bracket { color: #eaeaea; } 30 | .cm-s-tomorrow-night-bright span.cm-tag { color: #d54e53; } 31 | .cm-s-tomorrow-night-bright span.cm-link { color: #a16a94; } 32 | .cm-s-tomorrow-night-bright span.cm-error { background: #d54e53; color: #6A6A6A; } 33 | 34 | .cm-s-tomorrow-night-bright .CodeMirror-activeline-background { background: #2a2a2a; } 35 | .cm-s-tomorrow-night-bright .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } 36 | -------------------------------------------------------------------------------- /static/js/others/mode/sass/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Sass mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 26 | 27 |
28 |

Sass mode

29 |
59 | 66 | 67 |

MIME types defined: text/x-sass.

68 |
69 | -------------------------------------------------------------------------------- /static/js/others/mode/dart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Dart mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

Dart mode

27 |
28 | 62 |
63 | 64 | 70 | 71 |
72 | -------------------------------------------------------------------------------- /static/js/others/mode/idl/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: IDL mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 26 |
27 |

IDL mode

28 | 29 |
53 | 63 | 64 |

MIME types defined: text/x-idl.

65 |
66 | -------------------------------------------------------------------------------- /static/js/others/mode/xml/test.js: -------------------------------------------------------------------------------- 1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others 2 | // Distributed under an MIT license: https://codemirror.net/LICENSE 3 | 4 | (function() { 5 | var mode = CodeMirror.getMode({indentUnit: 2}, "xml"), mname = "xml"; 6 | function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1), mname); } 7 | 8 | MT("matching", 9 | "[tag&bracket <][tag top][tag&bracket >]", 10 | " text", 11 | " [tag&bracket <][tag inner][tag&bracket />]", 12 | "[tag&bracket ]"); 13 | 14 | MT("nonmatching", 15 | "[tag&bracket <][tag top][tag&bracket >]", 16 | " [tag&bracket <][tag inner][tag&bracket />]", 17 | " [tag&bracket ]"); 18 | 19 | MT("doctype", 20 | "[meta ]", 21 | "[tag&bracket <][tag top][tag&bracket />]"); 22 | 23 | MT("cdata", 24 | "[tag&bracket <][tag top][tag&bracket >]", 25 | " [atom ]", 27 | "[tag&bracket ]"); 28 | 29 | // HTML tests 30 | mode = CodeMirror.getMode({indentUnit: 2}, "text/html"); 31 | 32 | MT("selfclose", 33 | "[tag&bracket <][tag html][tag&bracket >]", 34 | " [tag&bracket <][tag link] [attribute rel]=[string stylesheet] [attribute href]=[string \"/foobar\"][tag&bracket >]", 35 | "[tag&bracket ]"); 36 | 37 | MT("list", 38 | "[tag&bracket <][tag ol][tag&bracket >]", 39 | " [tag&bracket <][tag li][tag&bracket >]one", 40 | " [tag&bracket <][tag li][tag&bracket >]two", 41 | "[tag&bracket ]"); 42 | 43 | MT("valueless", 44 | "[tag&bracket <][tag input] [attribute type]=[string checkbox] [attribute checked][tag&bracket />]"); 45 | 46 | MT("pThenArticle", 47 | "[tag&bracket <][tag p][tag&bracket >]", 48 | " foo", 49 | "[tag&bracket <][tag article][tag&bracket >]bar"); 50 | 51 | })(); 52 | -------------------------------------------------------------------------------- /static/js/others/mode/jinja2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Jinja2 mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

Jinja2 mode

27 |
49 | 54 |
55 | -------------------------------------------------------------------------------- /static/css/others/themes/midnight.css: -------------------------------------------------------------------------------- 1 | /* Based on the theme at http://bonsaiden.github.com/JavaScript-Garden */ 2 | 3 | /**/ 4 | .cm-s-midnight .CodeMirror-activeline-background { background: #253540; } 5 | 6 | .cm-s-midnight.CodeMirror { 7 | background: #0F192A; 8 | color: #D1EDFF; 9 | } 10 | 11 | .cm-s-midnight div.CodeMirror-selected { background: #314D67; } 12 | .cm-s-midnight .CodeMirror-line::selection, .cm-s-midnight .CodeMirror-line > span::selection, .cm-s-midnight .CodeMirror-line > span > span::selection { background: rgba(49, 77, 103, .99); } 13 | .cm-s-midnight .CodeMirror-line::-moz-selection, .cm-s-midnight .CodeMirror-line > span::-moz-selection, .cm-s-midnight .CodeMirror-line > span > span::-moz-selection { background: rgba(49, 77, 103, .99); } 14 | .cm-s-midnight .CodeMirror-gutters { background: #0F192A; border-right: 1px solid; } 15 | .cm-s-midnight .CodeMirror-guttermarker { color: white; } 16 | .cm-s-midnight .CodeMirror-guttermarker-subtle { color: #d0d0d0; } 17 | .cm-s-midnight .CodeMirror-linenumber { color: #D0D0D0; } 18 | .cm-s-midnight .CodeMirror-cursor { border-left: 1px solid #F8F8F0; } 19 | 20 | .cm-s-midnight span.cm-comment { color: #428BDD; } 21 | .cm-s-midnight span.cm-atom { color: #AE81FF; } 22 | .cm-s-midnight span.cm-number { color: #D1EDFF; } 23 | 24 | .cm-s-midnight span.cm-property, .cm-s-midnight span.cm-attribute { color: #A6E22E; } 25 | .cm-s-midnight span.cm-keyword { color: #E83737; } 26 | .cm-s-midnight span.cm-string { color: #1DC116; } 27 | 28 | .cm-s-midnight span.cm-variable { color: #FFAA3E; } 29 | .cm-s-midnight span.cm-variable-2 { color: #FFAA3E; } 30 | .cm-s-midnight span.cm-def { color: #4DD; } 31 | .cm-s-midnight span.cm-bracket { color: #D1EDFF; } 32 | .cm-s-midnight span.cm-tag { color: #449; } 33 | .cm-s-midnight span.cm-link { color: #AE81FF; } 34 | .cm-s-midnight span.cm-error { background: #F92672; color: #F8F8F0; } 35 | 36 | .cm-s-midnight .CodeMirror-matchingbracket { 37 | text-decoration: underline; 38 | color: white !important; 39 | } 40 | -------------------------------------------------------------------------------- /static/js/others/mode/sparql/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: SPARQL mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 26 |
27 |

SPARQL mode

28 |
52 | 58 | 59 |

MIME types defined: application/sparql-query.

60 | 61 |
62 | -------------------------------------------------------------------------------- /static/css/others/themes/blackboard.css: -------------------------------------------------------------------------------- 1 | /* Port of TextMate's Blackboard theme */ 2 | 3 | .cm-s-blackboard.CodeMirror { background: #0C1021; color: #F8F8F8; } 4 | .cm-s-blackboard div.CodeMirror-selected { background: #253B76; } 5 | .cm-s-blackboard .CodeMirror-line::selection, .cm-s-blackboard .CodeMirror-line > span::selection, .cm-s-blackboard .CodeMirror-line > span > span::selection { background: rgba(37, 59, 118, .99); } 6 | .cm-s-blackboard .CodeMirror-line::-moz-selection, .cm-s-blackboard .CodeMirror-line > span::-moz-selection, .cm-s-blackboard .CodeMirror-line > span > span::-moz-selection { background: rgba(37, 59, 118, .99); } 7 | .cm-s-blackboard .CodeMirror-gutters { background: #0C1021; border-right: 0; } 8 | .cm-s-blackboard .CodeMirror-guttermarker { color: #FBDE2D; } 9 | .cm-s-blackboard .CodeMirror-guttermarker-subtle { color: #888; } 10 | .cm-s-blackboard .CodeMirror-linenumber { color: #888; } 11 | .cm-s-blackboard .CodeMirror-cursor { border-left: 1px solid #A7A7A7; } 12 | 13 | .cm-s-blackboard .cm-keyword { color: #FBDE2D; } 14 | .cm-s-blackboard .cm-atom { color: #D8FA3C; } 15 | .cm-s-blackboard .cm-number { color: #D8FA3C; } 16 | .cm-s-blackboard .cm-def { color: #8DA6CE; } 17 | .cm-s-blackboard .cm-variable { color: #FF6400; } 18 | .cm-s-blackboard .cm-operator { color: #FBDE2D; } 19 | .cm-s-blackboard .cm-comment { color: #AEAEAE; } 20 | .cm-s-blackboard .cm-string { color: #61CE3C; } 21 | .cm-s-blackboard .cm-string-2 { color: #61CE3C; } 22 | .cm-s-blackboard .cm-meta { color: #D8FA3C; } 23 | .cm-s-blackboard .cm-builtin { color: #8DA6CE; } 24 | .cm-s-blackboard .cm-tag { color: #8DA6CE; } 25 | .cm-s-blackboard .cm-attribute { color: #8DA6CE; } 26 | .cm-s-blackboard .cm-header { color: #FF6400; } 27 | .cm-s-blackboard .cm-hr { color: #AEAEAE; } 28 | .cm-s-blackboard .cm-link { color: #8DA6CE; } 29 | .cm-s-blackboard .cm-error { background: #9D1E15; color: #F8F8F8; } 30 | 31 | .cm-s-blackboard .CodeMirror-activeline-background { background: #3C3636; } 32 | .cm-s-blackboard .CodeMirror-matchingbracket { outline:1px solid grey;color:white !important; } 33 | -------------------------------------------------------------------------------- /static/css/others/themes/the-matrix.css: -------------------------------------------------------------------------------- 1 | .cm-s-the-matrix.CodeMirror { background: #000000; color: #00FF00; } 2 | .cm-s-the-matrix div.CodeMirror-selected { background: #2D2D2D; } 3 | .cm-s-the-matrix .CodeMirror-line::selection, .cm-s-the-matrix .CodeMirror-line > span::selection, .cm-s-the-matrix .CodeMirror-line > span > span::selection { background: rgba(45, 45, 45, 0.99); } 4 | .cm-s-the-matrix .CodeMirror-line::-moz-selection, .cm-s-the-matrix .CodeMirror-line > span::-moz-selection, .cm-s-the-matrix .CodeMirror-line > span > span::-moz-selection { background: rgba(45, 45, 45, 0.99); } 5 | .cm-s-the-matrix .CodeMirror-gutters { background: #060; border-right: 2px solid #00FF00; } 6 | .cm-s-the-matrix .CodeMirror-guttermarker { color: #0f0; } 7 | .cm-s-the-matrix .CodeMirror-guttermarker-subtle { color: white; } 8 | .cm-s-the-matrix .CodeMirror-linenumber { color: #FFFFFF; } 9 | .cm-s-the-matrix .CodeMirror-cursor { border-left: 1px solid #00FF00; } 10 | 11 | .cm-s-the-matrix span.cm-keyword { color: #008803; font-weight: bold; } 12 | .cm-s-the-matrix span.cm-atom { color: #3FF; } 13 | .cm-s-the-matrix span.cm-number { color: #FFB94F; } 14 | .cm-s-the-matrix span.cm-def { color: #99C; } 15 | .cm-s-the-matrix span.cm-variable { color: #F6C; } 16 | .cm-s-the-matrix span.cm-variable-2 { color: #C6F; } 17 | .cm-s-the-matrix span.cm-variable-3, .cm-s-the-matrix span.cm-type { color: #96F; } 18 | .cm-s-the-matrix span.cm-property { color: #62FFA0; } 19 | .cm-s-the-matrix span.cm-operator { color: #999; } 20 | .cm-s-the-matrix span.cm-comment { color: #CCCCCC; } 21 | .cm-s-the-matrix span.cm-string { color: #39C; } 22 | .cm-s-the-matrix span.cm-meta { color: #C9F; } 23 | .cm-s-the-matrix span.cm-qualifier { color: #FFF700; } 24 | .cm-s-the-matrix span.cm-builtin { color: #30a; } 25 | .cm-s-the-matrix span.cm-bracket { color: #cc7; } 26 | .cm-s-the-matrix span.cm-tag { color: #FFBD40; } 27 | .cm-s-the-matrix span.cm-attribute { color: #FFF700; } 28 | .cm-s-the-matrix span.cm-error { color: #FF0000; } 29 | 30 | .cm-s-the-matrix .CodeMirror-activeline-background { background: #040; } 31 | -------------------------------------------------------------------------------- /static/css/others/themes/lucario.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: lucario 3 | Author: Raphael Amorim 4 | 5 | Original Lucario color scheme (https://github.com/raphamorim/lucario) 6 | */ 7 | 8 | .cm-s-lucario.CodeMirror, .cm-s-lucario .CodeMirror-gutters { 9 | background-color: #2b3e50 !important; 10 | color: #f8f8f2 !important; 11 | border: none; 12 | } 13 | .cm-s-lucario .CodeMirror-gutters { color: #2b3e50; } 14 | .cm-s-lucario .CodeMirror-cursor { border-left: solid thin #E6C845; } 15 | .cm-s-lucario .CodeMirror-linenumber { color: #f8f8f2; } 16 | .cm-s-lucario .CodeMirror-selected { background: #243443; } 17 | .cm-s-lucario .CodeMirror-line::selection, .cm-s-lucario .CodeMirror-line > span::selection, .cm-s-lucario .CodeMirror-line > span > span::selection { background: #243443; } 18 | .cm-s-lucario .CodeMirror-line::-moz-selection, .cm-s-lucario .CodeMirror-line > span::-moz-selection, .cm-s-lucario .CodeMirror-line > span > span::-moz-selection { background: #243443; } 19 | .cm-s-lucario span.cm-comment { color: #5c98cd; } 20 | .cm-s-lucario span.cm-string, .cm-s-lucario span.cm-string-2 { color: #E6DB74; } 21 | .cm-s-lucario span.cm-number { color: #ca94ff; } 22 | .cm-s-lucario span.cm-variable { color: #f8f8f2; } 23 | .cm-s-lucario span.cm-variable-2 { color: #f8f8f2; } 24 | .cm-s-lucario span.cm-def { color: #72C05D; } 25 | .cm-s-lucario span.cm-operator { color: #66D9EF; } 26 | .cm-s-lucario span.cm-keyword { color: #ff6541; } 27 | .cm-s-lucario span.cm-atom { color: #bd93f9; } 28 | .cm-s-lucario span.cm-meta { color: #f8f8f2; } 29 | .cm-s-lucario span.cm-tag { color: #ff6541; } 30 | .cm-s-lucario span.cm-attribute { color: #66D9EF; } 31 | .cm-s-lucario span.cm-qualifier { color: #72C05D; } 32 | .cm-s-lucario span.cm-property { color: #f8f8f2; } 33 | .cm-s-lucario span.cm-builtin { color: #72C05D; } 34 | .cm-s-lucario span.cm-variable-3, .cm-s-lucario span.cm-type { color: #ffb86c; } 35 | 36 | .cm-s-lucario .CodeMirror-activeline-background { background: #243443; } 37 | .cm-s-lucario .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } 38 | -------------------------------------------------------------------------------- /static/css/others/themes/yeti.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: yeti 4 | Author: Michael Kaminsky (http://github.com/mkaminsky11) 5 | 6 | Original yeti color scheme by Jesse Weed (https://github.com/jesseweed/yeti-syntax) 7 | 8 | */ 9 | 10 | 11 | .cm-s-yeti.CodeMirror { 12 | background-color: #ECEAE8 !important; 13 | color: #d1c9c0 !important; 14 | border: none; 15 | } 16 | 17 | .cm-s-yeti .CodeMirror-gutters { 18 | color: #adaba6; 19 | background-color: #E5E1DB; 20 | border: none; 21 | } 22 | .cm-s-yeti .CodeMirror-cursor { border-left: solid thin #d1c9c0; } 23 | .cm-s-yeti .CodeMirror-linenumber { color: #adaba6; } 24 | .cm-s-yeti.CodeMirror-focused div.CodeMirror-selected { background: #DCD8D2; } 25 | .cm-s-yeti .CodeMirror-line::selection, .cm-s-yeti .CodeMirror-line > span::selection, .cm-s-yeti .CodeMirror-line > span > span::selection { background: #DCD8D2; } 26 | .cm-s-yeti .CodeMirror-line::-moz-selection, .cm-s-yeti .CodeMirror-line > span::-moz-selection, .cm-s-yeti .CodeMirror-line > span > span::-moz-selection { background: #DCD8D2; } 27 | .cm-s-yeti span.cm-comment { color: #d4c8be; } 28 | .cm-s-yeti span.cm-string, .cm-s-yeti span.cm-string-2 { color: #96c0d8; } 29 | .cm-s-yeti span.cm-number { color: #a074c4; } 30 | .cm-s-yeti span.cm-variable { color: #55b5db; } 31 | .cm-s-yeti span.cm-variable-2 { color: #a074c4; } 32 | .cm-s-yeti span.cm-def { color: #55b5db; } 33 | .cm-s-yeti span.cm-operator { color: #9fb96e; } 34 | .cm-s-yeti span.cm-keyword { color: #9fb96e; } 35 | .cm-s-yeti span.cm-atom { color: #a074c4; } 36 | .cm-s-yeti span.cm-meta { color: #96c0d8; } 37 | .cm-s-yeti span.cm-tag { color: #96c0d8; } 38 | .cm-s-yeti span.cm-attribute { color: #9fb96e; } 39 | .cm-s-yeti span.cm-qualifier { color: #96c0d8; } 40 | .cm-s-yeti span.cm-property { color: #a074c4; } 41 | .cm-s-yeti span.cm-builtin { color: #a074c4; } 42 | .cm-s-yeti span.cm-variable-3, .cm-s-yeti span.cm-type { color: #96c0d8; } 43 | .cm-s-yeti .CodeMirror-activeline-background { background: #E7E4E0; } 44 | .cm-s-yeti .CodeMirror-matchingbracket { text-decoration: underline; } 45 | -------------------------------------------------------------------------------- /static/js/others/mode/shell/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Shell mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 14 | 27 | 28 |
29 |

Shell mode

30 | 31 | 32 | 56 | 57 | 64 | 65 |

MIME types defined: text/x-sh, application/x-sh.

66 |
67 | -------------------------------------------------------------------------------- /static/js/others/mode/tornado/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Tornado template mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 27 | 28 |
29 |

Tornado template mode

30 |
50 | 51 | 59 | 60 |

Mode for HTML with embedded Tornado template markup.

61 | 62 |

MIME types defined: text/x-tornado

63 |
64 | -------------------------------------------------------------------------------- /static/css/others/themes/gruvbox-dark.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: gruvbox-dark 4 | Author: kRkk (https://github.com/krkk) 5 | 6 | Original gruvbox color scheme by Pavel Pertsev (https://github.com/morhetz/gruvbox) 7 | 8 | */ 9 | 10 | .cm-s-gruvbox-dark.CodeMirror, .cm-s-gruvbox-dark .CodeMirror-gutters { background-color: #282828; color: #bdae93; } 11 | .cm-s-gruvbox-dark .CodeMirror-gutters {background: #282828; border-right: 0px;} 12 | .cm-s-gruvbox-dark .CodeMirror-linenumber {color: #7c6f64;} 13 | .cm-s-gruvbox-dark .CodeMirror-cursor { border-left: 1px solid #ebdbb2; } 14 | .cm-s-gruvbox-dark.cm-fat-cursor .CodeMirror-cursor { background-color: #8e8d8875 !important; } 15 | .cm-s-gruvbox-dark .cm-animate-fat-cursor { background-color: #8e8d8875 !important; } 16 | .cm-s-gruvbox-dark div.CodeMirror-selected { background: #928374; } 17 | .cm-s-gruvbox-dark span.cm-meta { color: #83a598; } 18 | 19 | .cm-s-gruvbox-dark span.cm-comment { color: #928374; } 20 | .cm-s-gruvbox-dark span.cm-number, span.cm-atom { color: #d3869b; } 21 | .cm-s-gruvbox-dark span.cm-keyword { color: #f84934; } 22 | 23 | .cm-s-gruvbox-dark span.cm-variable { color: #ebdbb2; } 24 | .cm-s-gruvbox-dark span.cm-variable-2 { color: #ebdbb2; } 25 | .cm-s-gruvbox-dark span.cm-variable-3, .cm-s-gruvbox-dark span.cm-type { color: #fabd2f; } 26 | .cm-s-gruvbox-dark span.cm-operator { color: #ebdbb2; } 27 | .cm-s-gruvbox-dark span.cm-callee { color: #ebdbb2; } 28 | .cm-s-gruvbox-dark span.cm-def { color: #ebdbb2; } 29 | .cm-s-gruvbox-dark span.cm-property { color: #ebdbb2; } 30 | .cm-s-gruvbox-dark span.cm-string { color: #b8bb26; } 31 | .cm-s-gruvbox-dark span.cm-string-2 { color: #8ec07c; } 32 | .cm-s-gruvbox-dark span.cm-qualifier { color: #8ec07c; } 33 | .cm-s-gruvbox-dark span.cm-attribute { color: #8ec07c; } 34 | 35 | .cm-s-gruvbox-dark .CodeMirror-activeline-background { background: #3c3836; } 36 | .cm-s-gruvbox-dark .CodeMirror-matchingbracket { background: #928374; color:#282828 !important; } 37 | 38 | .cm-s-gruvbox-dark span.cm-builtin { color: #fe8019; } 39 | .cm-s-gruvbox-dark span.cm-tag { color: #fe8019; } 40 | -------------------------------------------------------------------------------- /static/js/others/mode/swift/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Swift mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 14 | 27 | 28 |
29 |

Swift mode

30 |
58 | 59 | 66 | 67 |

A simple mode for Swift

68 | 69 |

MIME types defined: text/x-swift (Swift code)

70 |
71 | -------------------------------------------------------------------------------- /static/css/others/themes/abcdef.css: -------------------------------------------------------------------------------- 1 | .cm-s-abcdef.CodeMirror { background: #0f0f0f; color: #defdef; } 2 | .cm-s-abcdef div.CodeMirror-selected { background: #515151; } 3 | .cm-s-abcdef .CodeMirror-line::selection, .cm-s-abcdef .CodeMirror-line > span::selection, .cm-s-abcdef .CodeMirror-line > span > span::selection { background: rgba(56, 56, 56, 0.99); } 4 | .cm-s-abcdef .CodeMirror-line::-moz-selection, .cm-s-abcdef .CodeMirror-line > span::-moz-selection, .cm-s-abcdef .CodeMirror-line > span > span::-moz-selection { background: rgba(56, 56, 56, 0.99); } 5 | .cm-s-abcdef .CodeMirror-gutters { background: #555; border-right: 2px solid #314151; } 6 | .cm-s-abcdef .CodeMirror-guttermarker { color: #222; } 7 | .cm-s-abcdef .CodeMirror-guttermarker-subtle { color: azure; } 8 | .cm-s-abcdef .CodeMirror-linenumber { color: #FFFFFF; } 9 | .cm-s-abcdef .CodeMirror-cursor { border-left: 1px solid #00FF00; } 10 | 11 | .cm-s-abcdef span.cm-keyword { color: darkgoldenrod; font-weight: bold; } 12 | .cm-s-abcdef span.cm-atom { color: #77F; } 13 | .cm-s-abcdef span.cm-number { color: violet; } 14 | .cm-s-abcdef span.cm-def { color: #fffabc; } 15 | .cm-s-abcdef span.cm-variable { color: #abcdef; } 16 | .cm-s-abcdef span.cm-variable-2 { color: #cacbcc; } 17 | .cm-s-abcdef span.cm-variable-3, .cm-s-abcdef span.cm-type { color: #def; } 18 | .cm-s-abcdef span.cm-property { color: #fedcba; } 19 | .cm-s-abcdef span.cm-operator { color: #ff0; } 20 | .cm-s-abcdef span.cm-comment { color: #7a7b7c; font-style: italic;} 21 | .cm-s-abcdef span.cm-string { color: #2b4; } 22 | .cm-s-abcdef span.cm-meta { color: #C9F; } 23 | .cm-s-abcdef span.cm-qualifier { color: #FFF700; } 24 | .cm-s-abcdef span.cm-builtin { color: #30aabc; } 25 | .cm-s-abcdef span.cm-bracket { color: #8a8a8a; } 26 | .cm-s-abcdef span.cm-tag { color: #FFDD44; } 27 | .cm-s-abcdef span.cm-attribute { color: #DDFF00; } 28 | .cm-s-abcdef span.cm-error { color: #FF0000; } 29 | .cm-s-abcdef span.cm-header { color: aquamarine; font-weight: bold; } 30 | .cm-s-abcdef span.cm-link { color: blueviolet; } 31 | 32 | .cm-s-abcdef .CodeMirror-activeline-background { background: #314151; } 33 | -------------------------------------------------------------------------------- /static/js/sorts/bubblesort.js: -------------------------------------------------------------------------------- 1 | async function run() { 2 | runBtn(bubbleSort, elements); 3 | } 4 | 5 | async function bubbleSort(array) { 6 | for (let i = 1; i < array.length; i++) { 7 | for (let j = 0; j < array.length-i; j++) { 8 | if (!running) return; 9 | if (compare(j, j+1)) { 10 | await swap(j, j+1); 11 | } 12 | } 13 | } 14 | } 15 | 16 | var codes = { 17 | "C": ` 18 | void bubble_sort(long arr[], long n) { 19 | long c, d, t; 20 | 21 | for (c = 0 ; c < n - 1; c++) { 22 | for (d = 0 ; d < n - c - 1; d++) { 23 | if (arr[d] > arr[d+1]) { 24 | t = arr[d]; 25 | arr[d] = arr[d+1]; 26 | arr[d+1] = t; 27 | } 28 | } 29 | } 30 | }`, 31 | "C++": ` 32 | void swap(int *xp, int *yp) { 33 | int temp = *xp; 34 | *xp = *yp; 35 | *yp = temp; 36 | } 37 | 38 | 39 | void bubbleSort(int arr[], int n) { 40 | int i, j; 41 | for (i = 0; i < n-1; i++) 42 | for (j = 0; j < n-i-1; j++) 43 | if (arr[j] > arr[j+1]) 44 | swap(&arr[j], &arr[j+1]); 45 | }`, 46 | "Java": ` 47 | static void bubbleSort(int[] arr) { 48 | int n = arr.length; 49 | int temp = 0; 50 | for(int i=0; i < n; i++){ 51 | for(int j=1; j < (n-i); j++){ 52 | if(arr[j-1] > arr[j]){ 53 | temp = arr[j-1]; 54 | arr[j-1] = arr[j]; 55 | arr[j] = temp; 56 | } 57 | } 58 | } 59 | }`, 60 | "JavaScript": ` 61 | function bubbleSort(arr) { 62 | for(var i = 0; i < arr.length; i++) { 63 | for(var j = 0; j < ( arr.length - i -1 ); j++) { 64 | if(arr[j] > arr[j+1]) { 65 | var temp = arr[j] 66 | arr[j] = arr[j + 1] 67 | arr[j+1] = temp 68 | } 69 | } 70 | } 71 | }`, 72 | "Python": ` 73 | def bubbleSort(arr): 74 | n = len(arr) 75 | for i in range(n-1): 76 | for j in range(0, n-i-1): 77 | if arr[j] > arr[j+1]: 78 | arr[j], arr[j+1] = arr[j+1], arr[j]` 79 | } 80 | -------------------------------------------------------------------------------- /static/js/others/mode/wast/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: WebAssembly mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 17 | 32 | 33 |
34 |

WebAssembly mode

35 | 36 | 37 |
62 | 63 | 71 | 72 |

MIME types defined: text/webassembly.

73 |
74 | -------------------------------------------------------------------------------- /app.py: -------------------------------------------------------------------------------- 1 | from flask import Flask, redirect, url_for, render_template, request, send_from_directory, session 2 | from flask_limiter import Limiter 3 | from flask_limiter.util import get_remote_address 4 | from telegram import Bot 5 | from snippet import get_img 6 | import os 7 | import requests 8 | 9 | app = Flask(__name__) 10 | app.secret_key = 'KEQING' 11 | 12 | limiter = Limiter(get_remote_address, app=app) 13 | 14 | TELEGRAM_KEY = os.environ.get("TELEGRAM_KEY") 15 | CHAT_ID = -1001520685235 16 | 17 | bot = None 18 | try: 19 | bot = Bot(TELEGRAM_KEY) 20 | except Exception as e: 21 | print("Telegram bot couldn't start", e) 22 | 23 | @app.route("/") 24 | def home(): 25 | return render_template("index.html") 26 | 27 | sorts = [ 28 | "quicksort", "bubblesort", "selectionsort", "insertionsort", "radixsort", "heapsort", "gnomesort", "mergesort", 29 | "bogosort", "shellsort", "shakersort", "bitonicsort", "oddevensort", "combsort", "pancakesort", "customsort" 30 | ] 31 | 32 | for sort in sorts: 33 | fname = sort[:-4] + "_" + sort[-4:] 34 | 35 | fun = f""" 36 | @app.route("/{sort}/", methods=["GET"]) 37 | def {fname}(): 38 | return render_template("sorts/{sort}.html", audio=session.get("audio", True))""" 39 | 40 | exec(fun) 41 | 42 | @app.route("/submit/", methods=["POST"]) 43 | @limiter.limit("5/hour") 44 | def submit(): 45 | code = request.json["code"] 46 | 47 | image = get_img(code) 48 | req = requests.post('https://hastebin.com/documents', data=code) 49 | 50 | if bot: bot.send_document(chat_id=CHAT_ID, document=image, filename="New Submission", caption=f'https://hastebin.com/{req.json()["key"]}') 51 | 52 | return "", 204 53 | 54 | @app.route("/docs/") 55 | def api(): 56 | return render_template("api.html") 57 | 58 | @app.route("/audio/", methods=["PUT"]) 59 | def change_audio(): 60 | session["audio"] = not session.get("audio", True) 61 | return "", 204 62 | 63 | @app.route('/sitemap.xml') 64 | def static_from_root(): 65 | return send_from_directory(app.static_folder, request.path[1:]) 66 | 67 | 68 | if __name__ == "__main__": 69 | app.run() 70 | -------------------------------------------------------------------------------- /static/js/others/mode/forth/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Forth mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 18 | 31 | 32 |
33 | 34 |

Forth mode

35 | 36 |
57 |
58 | 59 | 70 | 71 |

Simple mode that handle Forth-Syntax (Forth on Wikipedia).

72 | 73 |

MIME types defined: text/x-forth.

74 | 75 |
76 | -------------------------------------------------------------------------------- /static/js/others/mode/nsis/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: NSIS mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 28 | 29 |
30 |

NSIS mode

31 | 32 | 33 | 68 | 69 | 78 | 79 |

MIME types defined: text/x-nsis.

80 |
-------------------------------------------------------------------------------- /static/js/others/mode/css/less_test.js: -------------------------------------------------------------------------------- 1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others 2 | // Distributed under an MIT license: https://codemirror.net/LICENSE 3 | 4 | (function() { 5 | "use strict"; 6 | 7 | var mode = CodeMirror.getMode({indentUnit: 2}, "text/x-less"); 8 | function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1), "less"); } 9 | 10 | MT("variable", 11 | "[variable-2 @base]: [atom #f04615];", 12 | "[qualifier .class] {", 13 | " [property width]: [variable&callee percentage]([number 0.5]); [comment // returns `50%`]", 14 | " [property color]: [variable&callee saturate]([variable-2 @base], [number 5%]);", 15 | "}"); 16 | 17 | MT("amp", 18 | "[qualifier .child], [qualifier .sibling] {", 19 | " [qualifier .parent] [atom &] {", 20 | " [property color]: [keyword black];", 21 | " }", 22 | " [atom &] + [atom &] {", 23 | " [property color]: [keyword red];", 24 | " }", 25 | "}"); 26 | 27 | MT("mixin", 28 | "[qualifier .mixin] ([variable dark]; [variable-2 @color]) {", 29 | " [property color]: [variable&callee darken]([variable-2 @color], [number 10%]);", 30 | "}", 31 | "[qualifier .mixin] ([variable light]; [variable-2 @color]) {", 32 | " [property color]: [variable&callee lighten]([variable-2 @color], [number 10%]);", 33 | "}", 34 | "[qualifier .mixin] ([variable-2 @_]; [variable-2 @color]) {", 35 | " [property display]: [atom block];", 36 | "}", 37 | "[variable-2 @switch]: [variable light];", 38 | "[qualifier .class] {", 39 | " [qualifier .mixin]([variable-2 @switch]; [atom #888]);", 40 | "}"); 41 | 42 | MT("nest", 43 | "[qualifier .one] {", 44 | " [def @media] ([property width]: [number 400px]) {", 45 | " [property font-size]: [number 1.2em];", 46 | " [def @media] [attribute print] [keyword and] [property color] {", 47 | " [property color]: [keyword blue];", 48 | " }", 49 | " }", 50 | "}"); 51 | 52 | 53 | MT("interpolation", ".@{[variable foo]} { [property font-weight]: [atom bold]; }"); 54 | })(); 55 | -------------------------------------------------------------------------------- /static/css/others/themes/zenburn.css: -------------------------------------------------------------------------------- 1 | /** 2 | * " 3 | * Using Zenburn color palette from the Emacs Zenburn Theme 4 | * https://github.com/bbatsov/zenburn-emacs/blob/master/zenburn-theme.el 5 | * 6 | * Also using parts of https://github.com/xavi/coderay-lighttable-theme 7 | * " 8 | * From: https://github.com/wisenomad/zenburn-lighttable-theme/blob/master/zenburn.css 9 | */ 10 | 11 | .cm-s-zenburn .CodeMirror-gutters { background: #3f3f3f !important; } 12 | .cm-s-zenburn .CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded { color: #999; } 13 | .cm-s-zenburn .CodeMirror-cursor { border-left: 1px solid white; } 14 | .cm-s-zenburn.CodeMirror { background-color: #3f3f3f; color: #dcdccc; } 15 | .cm-s-zenburn span.cm-builtin { color: #dcdccc; font-weight: bold; } 16 | .cm-s-zenburn span.cm-comment { color: #7f9f7f; } 17 | .cm-s-zenburn span.cm-keyword { color: #f0dfaf; font-weight: bold; } 18 | .cm-s-zenburn span.cm-atom { color: #bfebbf; } 19 | .cm-s-zenburn span.cm-def { color: #dcdccc; } 20 | .cm-s-zenburn span.cm-variable { color: #dfaf8f; } 21 | .cm-s-zenburn span.cm-variable-2 { color: #dcdccc; } 22 | .cm-s-zenburn span.cm-string { color: #cc9393; } 23 | .cm-s-zenburn span.cm-string-2 { color: #cc9393; } 24 | .cm-s-zenburn span.cm-number { color: #dcdccc; } 25 | .cm-s-zenburn span.cm-tag { color: #93e0e3; } 26 | .cm-s-zenburn span.cm-property { color: #dfaf8f; } 27 | .cm-s-zenburn span.cm-attribute { color: #dfaf8f; } 28 | .cm-s-zenburn span.cm-qualifier { color: #7cb8bb; } 29 | .cm-s-zenburn span.cm-meta { color: #f0dfaf; } 30 | .cm-s-zenburn span.cm-header { color: #f0efd0; } 31 | .cm-s-zenburn span.cm-operator { color: #f0efd0; } 32 | .cm-s-zenburn span.CodeMirror-matchingbracket { box-sizing: border-box; background: transparent; border-bottom: 1px solid; } 33 | .cm-s-zenburn span.CodeMirror-nonmatchingbracket { border-bottom: 1px solid; background: none; } 34 | .cm-s-zenburn .CodeMirror-activeline { background: #000000; } 35 | .cm-s-zenburn .CodeMirror-activeline-background { background: #000000; } 36 | .cm-s-zenburn div.CodeMirror-selected { background: #545454; } 37 | .cm-s-zenburn .CodeMirror-focused div.CodeMirror-selected { background: #4f4f4f; } 38 | -------------------------------------------------------------------------------- /static/js/others/mode/gas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Gas mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

Gas mode

27 |
28 | 50 |
51 | 52 | 58 | 59 |

Handles AT&T assembler syntax (more specifically this handles 60 | the GNU Assembler (gas) syntax.) 61 | It takes a single optional configuration parameter: 62 | architecture, which can be one of "ARM", 63 | "ARMv6" or "x86". 64 | Including the parameter adds syntax for the registers and special 65 | directives for the supplied architecture. 66 | 67 |

MIME types defined: text/x-gas

68 |
69 | -------------------------------------------------------------------------------- /static/js/others/mode/tiki/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Tiki wiki mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 26 |
27 |

Tiki wiki mode

28 | 29 | 30 |
87 | 88 | 94 | 95 |
96 | -------------------------------------------------------------------------------- /static/css/others/themes/3024-day.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: 3024 day 4 | Author: Jan T. Sott (http://github.com/idleberg) 5 | 6 | CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror) 7 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) 8 | 9 | */ 10 | 11 | .cm-s-3024-day.CodeMirror { background: #f7f7f7; color: #3a3432; } 12 | .cm-s-3024-day div.CodeMirror-selected { background: #d6d5d4; } 13 | 14 | .cm-s-3024-day .CodeMirror-line::selection, .cm-s-3024-day .CodeMirror-line > span::selection, .cm-s-3024-day .CodeMirror-line > span > span::selection { background: #d6d5d4; } 15 | .cm-s-3024-day .CodeMirror-line::-moz-selection, .cm-s-3024-day .CodeMirror-line > span::-moz-selection, .cm-s-3024-day .CodeMirror-line > span > span::selection { background: #d9d9d9; } 16 | 17 | .cm-s-3024-day .CodeMirror-gutters { background: #f7f7f7; border-right: 0px; } 18 | .cm-s-3024-day .CodeMirror-guttermarker { color: #db2d20; } 19 | .cm-s-3024-day .CodeMirror-guttermarker-subtle { color: #807d7c; } 20 | .cm-s-3024-day .CodeMirror-linenumber { color: #807d7c; } 21 | 22 | .cm-s-3024-day .CodeMirror-cursor { border-left: 1px solid #5c5855; } 23 | 24 | .cm-s-3024-day span.cm-comment { color: #cdab53; } 25 | .cm-s-3024-day span.cm-atom { color: #a16a94; } 26 | .cm-s-3024-day span.cm-number { color: #a16a94; } 27 | 28 | .cm-s-3024-day span.cm-property, .cm-s-3024-day span.cm-attribute { color: #01a252; } 29 | .cm-s-3024-day span.cm-keyword { color: #db2d20; } 30 | .cm-s-3024-day span.cm-string { color: #fded02; } 31 | 32 | .cm-s-3024-day span.cm-variable { color: #01a252; } 33 | .cm-s-3024-day span.cm-variable-2 { color: #01a0e4; } 34 | .cm-s-3024-day span.cm-def { color: #e8bbd0; } 35 | .cm-s-3024-day span.cm-bracket { color: #3a3432; } 36 | .cm-s-3024-day span.cm-tag { color: #db2d20; } 37 | .cm-s-3024-day span.cm-link { color: #a16a94; } 38 | .cm-s-3024-day span.cm-error { background: #db2d20; color: #5c5855; } 39 | 40 | .cm-s-3024-day .CodeMirror-activeline-background { background: #e8f2ff; } 41 | .cm-s-3024-day .CodeMirror-matchingbracket { text-decoration: underline; color: #a16a94 !important; } 42 | -------------------------------------------------------------------------------- /static/js/others/mode/toml/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: TOML Mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 |
26 |

TOML Mode

27 |
64 | 70 |

The TOML Mode

71 |

Created by Forbes Lindesay.

72 |

MIME type defined: text/x-toml.

73 |
74 | -------------------------------------------------------------------------------- /static/js/others/mode/pegjs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror: PEG.js Mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 28 | 29 |
30 |

PEG.js Mode

31 |
56 | 62 |

The PEG.js Mode

63 |

Created by Forbes Lindesay.

64 |
65 | 66 | 67 | -------------------------------------------------------------------------------- /static/css/others/themes/seti.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: seti 4 | Author: Michael Kaminsky (http://github.com/mkaminsky11) 5 | 6 | Original seti color scheme by Jesse Weed (https://github.com/jesseweed/seti-syntax) 7 | 8 | */ 9 | 10 | 11 | .cm-s-seti.CodeMirror { 12 | background-color: #151718 !important; 13 | color: #CFD2D1 !important; 14 | border: none; 15 | } 16 | .cm-s-seti .CodeMirror-gutters { 17 | color: #404b53; 18 | background-color: #0E1112; 19 | border: none; 20 | } 21 | .cm-s-seti .CodeMirror-cursor { border-left: solid thin #f8f8f0; } 22 | .cm-s-seti .CodeMirror-linenumber { color: #6D8A88; } 23 | .cm-s-seti.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); } 24 | .cm-s-seti .CodeMirror-line::selection, .cm-s-seti .CodeMirror-line > span::selection, .cm-s-seti .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); } 25 | .cm-s-seti .CodeMirror-line::-moz-selection, .cm-s-seti .CodeMirror-line > span::-moz-selection, .cm-s-seti .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); } 26 | .cm-s-seti span.cm-comment { color: #41535b; } 27 | .cm-s-seti span.cm-string, .cm-s-seti span.cm-string-2 { color: #55b5db; } 28 | .cm-s-seti span.cm-number { color: #cd3f45; } 29 | .cm-s-seti span.cm-variable { color: #55b5db; } 30 | .cm-s-seti span.cm-variable-2 { color: #a074c4; } 31 | .cm-s-seti span.cm-def { color: #55b5db; } 32 | .cm-s-seti span.cm-keyword { color: #ff79c6; } 33 | .cm-s-seti span.cm-operator { color: #9fca56; } 34 | .cm-s-seti span.cm-keyword { color: #e6cd69; } 35 | .cm-s-seti span.cm-atom { color: #cd3f45; } 36 | .cm-s-seti span.cm-meta { color: #55b5db; } 37 | .cm-s-seti span.cm-tag { color: #55b5db; } 38 | .cm-s-seti span.cm-attribute { color: #9fca56; } 39 | .cm-s-seti span.cm-qualifier { color: #9fca56; } 40 | .cm-s-seti span.cm-property { color: #a074c4; } 41 | .cm-s-seti span.cm-variable-3, .cm-s-seti span.cm-type { color: #9fca56; } 42 | .cm-s-seti span.cm-builtin { color: #9fca56; } 43 | .cm-s-seti .CodeMirror-activeline-background { background: #101213; } 44 | .cm-s-seti .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } 45 | -------------------------------------------------------------------------------- /static/css/others/themes/panda-syntax.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Panda Syntax 3 | Author: Siamak Mokhtari (http://github.com/siamak/) 4 | CodeMirror template by Siamak Mokhtari (https://github.com/siamak/atom-panda-syntax) 5 | */ 6 | .cm-s-panda-syntax { 7 | background: #292A2B; 8 | color: #E6E6E6; 9 | line-height: 1.5; 10 | font-family: 'Operator Mono', 'Source Code Pro', Menlo, Monaco, Consolas, Courier New, monospace; 11 | } 12 | .cm-s-panda-syntax .CodeMirror-cursor { border-color: #ff2c6d; } 13 | .cm-s-panda-syntax .CodeMirror-activeline-background { 14 | background: rgba(99, 123, 156, 0.1); 15 | } 16 | .cm-s-panda-syntax .CodeMirror-selected { 17 | background: #FFF; 18 | } 19 | .cm-s-panda-syntax .cm-comment { 20 | font-style: italic; 21 | color: #676B79; 22 | } 23 | .cm-s-panda-syntax .cm-operator { 24 | color: #f3f3f3; 25 | } 26 | .cm-s-panda-syntax .cm-string { 27 | color: #19F9D8; 28 | } 29 | .cm-s-panda-syntax .cm-string-2 { 30 | color: #FFB86C; 31 | } 32 | 33 | .cm-s-panda-syntax .cm-tag { 34 | color: #ff2c6d; 35 | } 36 | .cm-s-panda-syntax .cm-meta { 37 | color: #b084eb; 38 | } 39 | 40 | .cm-s-panda-syntax .cm-number { 41 | color: #FFB86C; 42 | } 43 | .cm-s-panda-syntax .cm-atom { 44 | color: #ff2c6d; 45 | } 46 | .cm-s-panda-syntax .cm-keyword { 47 | color: #FF75B5; 48 | } 49 | .cm-s-panda-syntax .cm-variable { 50 | color: #ffb86c; 51 | } 52 | .cm-s-panda-syntax .cm-variable-2 { 53 | color: #ff9ac1; 54 | } 55 | .cm-s-panda-syntax .cm-variable-3, .cm-s-panda-syntax .cm-type { 56 | color: #ff9ac1; 57 | } 58 | 59 | .cm-s-panda-syntax .cm-def { 60 | color: #e6e6e6; 61 | } 62 | .cm-s-panda-syntax .cm-property { 63 | color: #f3f3f3; 64 | } 65 | .cm-s-panda-syntax .cm-unit { 66 | color: #ffb86c; 67 | } 68 | 69 | .cm-s-panda-syntax .cm-attribute { 70 | color: #ffb86c; 71 | } 72 | 73 | .cm-s-panda-syntax .CodeMirror-matchingbracket { 74 | border-bottom: 1px dotted #19F9D8; 75 | padding-bottom: 2px; 76 | color: #e6e6e6; 77 | } 78 | .cm-s-panda-syntax .CodeMirror-gutters { 79 | background: #292a2b; 80 | border-right-color: rgba(255, 255, 255, 0.1); 81 | } 82 | .cm-s-panda-syntax .CodeMirror-linenumber { 83 | color: #e6e6e6; 84 | opacity: 0.6; 85 | } 86 | -------------------------------------------------------------------------------- /static/css/others/themes/dracula.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: dracula 4 | Author: Michael Kaminsky (http://github.com/mkaminsky11) 5 | 6 | Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme) 7 | 8 | */ 9 | 10 | 11 | .cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters { 12 | background-color: #282a36 !important; 13 | color: #f8f8f2 !important; 14 | border: none; 15 | } 16 | .cm-s-dracula .CodeMirror-gutters { color: #282a36; } 17 | .cm-s-dracula .CodeMirror-cursor { border-left: solid thin #f8f8f0; } 18 | .cm-s-dracula .CodeMirror-linenumber { color: #6D8A88; } 19 | .cm-s-dracula .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); } 20 | .cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); } 21 | .cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); } 22 | .cm-s-dracula span.cm-comment { color: #6272a4; } 23 | .cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 { color: #f1fa8c; } 24 | .cm-s-dracula span.cm-number { color: #bd93f9; } 25 | .cm-s-dracula span.cm-variable { color: #50fa7b; } 26 | .cm-s-dracula span.cm-variable-2 { color: white; } 27 | .cm-s-dracula span.cm-def { color: #50fa7b; } 28 | .cm-s-dracula span.cm-operator { color: #ff79c6; } 29 | .cm-s-dracula span.cm-keyword { color: #ff79c6; } 30 | .cm-s-dracula span.cm-atom { color: #bd93f9; } 31 | .cm-s-dracula span.cm-meta { color: #f8f8f2; } 32 | .cm-s-dracula span.cm-tag { color: #ff79c6; } 33 | .cm-s-dracula span.cm-attribute { color: #50fa7b; } 34 | .cm-s-dracula span.cm-qualifier { color: #50fa7b; } 35 | .cm-s-dracula span.cm-property { color: #66d9ef; } 36 | .cm-s-dracula span.cm-builtin { color: #50fa7b; } 37 | .cm-s-dracula span.cm-variable-3, .cm-s-dracula span.cm-type { color: #ffb86c; } 38 | 39 | .cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); } 40 | .cm-s-dracula .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } 41 | -------------------------------------------------------------------------------- /static/js/others/mode/sas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: SAS mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 17 | 30 | 31 |
32 |

SAS mode

33 |
71 | 72 | 78 | 79 |

MIME types defined: text/x-sas.

80 | 81 |
82 | -------------------------------------------------------------------------------- /static/js/others/mode/smalltalk/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Smalltalk mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 16 | 29 | 30 |
31 |

Smalltalk mode

32 |
55 | 56 | 64 | 65 |

Simple Smalltalk mode.

66 | 67 |

MIME types defined: text/x-stsrc.

68 |
69 | -------------------------------------------------------------------------------- /static/js/others/mode/soy/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Soy (Closure Template) mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 29 | 30 |
31 |

Soy (Closure Template) mode

32 |
55 | 56 | 65 | 66 |

A mode for Closure Templates (Soy).

67 |

MIME type defined: text/x-soy.

68 |
69 | -------------------------------------------------------------------------------- /static/css/others/themes/3024-night.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: 3024 night 4 | Author: Jan T. Sott (http://github.com/idleberg) 5 | 6 | CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror) 7 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) 8 | 9 | */ 10 | 11 | .cm-s-3024-night.CodeMirror { background: #090300; color: #d6d5d4; } 12 | .cm-s-3024-night div.CodeMirror-selected { background: #3a3432; } 13 | .cm-s-3024-night .CodeMirror-line::selection, .cm-s-3024-night .CodeMirror-line > span::selection, .cm-s-3024-night .CodeMirror-line > span > span::selection { background: rgba(58, 52, 50, .99); } 14 | .cm-s-3024-night .CodeMirror-line::-moz-selection, .cm-s-3024-night .CodeMirror-line > span::-moz-selection, .cm-s-3024-night .CodeMirror-line > span > span::-moz-selection { background: rgba(58, 52, 50, .99); } 15 | .cm-s-3024-night .CodeMirror-gutters { background: #090300; border-right: 0px; } 16 | .cm-s-3024-night .CodeMirror-guttermarker { color: #db2d20; } 17 | .cm-s-3024-night .CodeMirror-guttermarker-subtle { color: #5c5855; } 18 | .cm-s-3024-night .CodeMirror-linenumber { color: #5c5855; } 19 | 20 | .cm-s-3024-night .CodeMirror-cursor { border-left: 1px solid #807d7c; } 21 | 22 | .cm-s-3024-night span.cm-comment { color: #cdab53; } 23 | .cm-s-3024-night span.cm-atom { color: #a16a94; } 24 | .cm-s-3024-night span.cm-number { color: #a16a94; } 25 | 26 | .cm-s-3024-night span.cm-property, .cm-s-3024-night span.cm-attribute { color: #01a252; } 27 | .cm-s-3024-night span.cm-keyword { color: #db2d20; } 28 | .cm-s-3024-night span.cm-string { color: #fded02; } 29 | 30 | .cm-s-3024-night span.cm-variable { color: #01a252; } 31 | .cm-s-3024-night span.cm-variable-2 { color: #01a0e4; } 32 | .cm-s-3024-night span.cm-def { color: #e8bbd0; } 33 | .cm-s-3024-night span.cm-bracket { color: #d6d5d4; } 34 | .cm-s-3024-night span.cm-tag { color: #db2d20; } 35 | .cm-s-3024-night span.cm-link { color: #a16a94; } 36 | .cm-s-3024-night span.cm-error { background: #db2d20; color: #807d7c; } 37 | 38 | .cm-s-3024-night .CodeMirror-activeline-background { background: #2F2F2F; } 39 | .cm-s-3024-night .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } 40 | -------------------------------------------------------------------------------- /static/css/others/themes/paraiso-dark.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: Paraíso (Dark) 4 | Author: Jan T. Sott 5 | 6 | Color scheme by Jan T. Sott (https://github.com/idleberg/Paraiso-CodeMirror) 7 | Inspired by the art of Rubens LP (http://www.rubenslp.com.br) 8 | 9 | */ 10 | 11 | .cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; } 12 | .cm-s-paraiso-dark div.CodeMirror-selected { background: #41323f; } 13 | .cm-s-paraiso-dark .CodeMirror-line::selection, .cm-s-paraiso-dark .CodeMirror-line > span::selection, .cm-s-paraiso-dark .CodeMirror-line > span > span::selection { background: rgba(65, 50, 63, .99); } 14 | .cm-s-paraiso-dark .CodeMirror-line::-moz-selection, .cm-s-paraiso-dark .CodeMirror-line > span::-moz-selection, .cm-s-paraiso-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(65, 50, 63, .99); } 15 | .cm-s-paraiso-dark .CodeMirror-gutters { background: #2f1e2e; border-right: 0px; } 16 | .cm-s-paraiso-dark .CodeMirror-guttermarker { color: #ef6155; } 17 | .cm-s-paraiso-dark .CodeMirror-guttermarker-subtle { color: #776e71; } 18 | .cm-s-paraiso-dark .CodeMirror-linenumber { color: #776e71; } 19 | .cm-s-paraiso-dark .CodeMirror-cursor { border-left: 1px solid #8d8687; } 20 | 21 | .cm-s-paraiso-dark span.cm-comment { color: #e96ba8; } 22 | .cm-s-paraiso-dark span.cm-atom { color: #815ba4; } 23 | .cm-s-paraiso-dark span.cm-number { color: #815ba4; } 24 | 25 | .cm-s-paraiso-dark span.cm-property, .cm-s-paraiso-dark span.cm-attribute { color: #48b685; } 26 | .cm-s-paraiso-dark span.cm-keyword { color: #ef6155; } 27 | .cm-s-paraiso-dark span.cm-string { color: #fec418; } 28 | 29 | .cm-s-paraiso-dark span.cm-variable { color: #48b685; } 30 | .cm-s-paraiso-dark span.cm-variable-2 { color: #06b6ef; } 31 | .cm-s-paraiso-dark span.cm-def { color: #f99b15; } 32 | .cm-s-paraiso-dark span.cm-bracket { color: #b9b6b0; } 33 | .cm-s-paraiso-dark span.cm-tag { color: #ef6155; } 34 | .cm-s-paraiso-dark span.cm-link { color: #815ba4; } 35 | .cm-s-paraiso-dark span.cm-error { background: #ef6155; color: #8d8687; } 36 | 37 | .cm-s-paraiso-dark .CodeMirror-activeline-background { background: #4D344A; } 38 | .cm-s-paraiso-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } 39 | -------------------------------------------------------------------------------- /static/css/others/themes/paraiso-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: Paraíso (Light) 4 | Author: Jan T. Sott 5 | 6 | Color scheme by Jan T. Sott (https://github.com/idleberg/Paraiso-CodeMirror) 7 | Inspired by the art of Rubens LP (http://www.rubenslp.com.br) 8 | 9 | */ 10 | 11 | .cm-s-paraiso-light.CodeMirror { background: #e7e9db; color: #41323f; } 12 | .cm-s-paraiso-light div.CodeMirror-selected { background: #b9b6b0; } 13 | .cm-s-paraiso-light .CodeMirror-line::selection, .cm-s-paraiso-light .CodeMirror-line > span::selection, .cm-s-paraiso-light .CodeMirror-line > span > span::selection { background: #b9b6b0; } 14 | .cm-s-paraiso-light .CodeMirror-line::-moz-selection, .cm-s-paraiso-light .CodeMirror-line > span::-moz-selection, .cm-s-paraiso-light .CodeMirror-line > span > span::-moz-selection { background: #b9b6b0; } 15 | .cm-s-paraiso-light .CodeMirror-gutters { background: #e7e9db; border-right: 0px; } 16 | .cm-s-paraiso-light .CodeMirror-guttermarker { color: black; } 17 | .cm-s-paraiso-light .CodeMirror-guttermarker-subtle { color: #8d8687; } 18 | .cm-s-paraiso-light .CodeMirror-linenumber { color: #8d8687; } 19 | .cm-s-paraiso-light .CodeMirror-cursor { border-left: 1px solid #776e71; } 20 | 21 | .cm-s-paraiso-light span.cm-comment { color: #e96ba8; } 22 | .cm-s-paraiso-light span.cm-atom { color: #815ba4; } 23 | .cm-s-paraiso-light span.cm-number { color: #815ba4; } 24 | 25 | .cm-s-paraiso-light span.cm-property, .cm-s-paraiso-light span.cm-attribute { color: #48b685; } 26 | .cm-s-paraiso-light span.cm-keyword { color: #ef6155; } 27 | .cm-s-paraiso-light span.cm-string { color: #fec418; } 28 | 29 | .cm-s-paraiso-light span.cm-variable { color: #48b685; } 30 | .cm-s-paraiso-light span.cm-variable-2 { color: #06b6ef; } 31 | .cm-s-paraiso-light span.cm-def { color: #f99b15; } 32 | .cm-s-paraiso-light span.cm-bracket { color: #41323f; } 33 | .cm-s-paraiso-light span.cm-tag { color: #ef6155; } 34 | .cm-s-paraiso-light span.cm-link { color: #815ba4; } 35 | .cm-s-paraiso-light span.cm-error { background: #ef6155; color: #776e71; } 36 | 37 | .cm-s-paraiso-light .CodeMirror-activeline-background { background: #CFD1C4; } 38 | .cm-s-paraiso-light .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } 39 | -------------------------------------------------------------------------------- /static/js/others/mode/octave/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Octave mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 26 |
27 |

Octave mode

28 | 29 |
72 | 82 | 83 |

MIME types defined: text/x-octave.

84 |
85 | -------------------------------------------------------------------------------- /static/js/sorts/insertionsort.js: -------------------------------------------------------------------------------- 1 | async function run() { 2 | runBtn(insertionSort, elements); 3 | } 4 | 5 | async function insertionSort(elements) { 6 | for (let i = 1; i < elements.length; i++) { 7 | if (!running) return; 8 | let j = i; 9 | while (j > 0 && !compare(j, j-1)) { 10 | if (!running) return; 11 | await swap(j, j-1); 12 | j--; 13 | } 14 | } 15 | } 16 | 17 | var codes = { 18 | "C": ` 19 | void insertionSort(int arr[], int n) 20 | { 21 | int i, key, j; 22 | for (i = 1; i < n; i++) { 23 | key = arr[i]; 24 | j = i - 1; 25 | 26 | while (j >= 0 && arr[j] > key) { 27 | arr[j + 1] = arr[j]; 28 | j = j - 1; 29 | } 30 | arr[j + 1] = key; 31 | } 32 | }`, 33 | 34 | "C++": ` 35 | void insertionSort(int arr[], int n) 36 | { 37 | int i, key, j; 38 | for (i = 1; i < n; i++) 39 | { 40 | key = arr[i]; 41 | j = i - 1; 42 | 43 | while (j >= 0 && arr[j] > key) 44 | { 45 | arr[j + 1] = arr[j]; 46 | j = j - 1; 47 | } 48 | arr[j + 1] = key; 49 | } 50 | }`, 51 | 52 | "Java": ` 53 | void insertionSort(int arr[]) 54 | { 55 | int n = arr.length; 56 | for (int i = 1; i < n; ++i) { 57 | int key = arr[i]; 58 | int j = i - 1; 59 | 60 | while (j >= 0 && arr[j] > key) { 61 | arr[j + 1] = arr[j]; 62 | j = j - 1; 63 | } 64 | arr[j + 1] = key; 65 | } 66 | }`, 67 | 68 | "JavaScript": ` 69 | function insertionSort(arr, n) 70 | { 71 | let i, key, j; 72 | for (i = 1; i < n; i++) 73 | { 74 | key = arr[i]; 75 | j = i - 1; 76 | 77 | while (j >= 0 && arr[j] > key) 78 | { 79 | arr[j + 1] = arr[j]; 80 | j = j - 1; 81 | } 82 | arr[j + 1] = key; 83 | } 84 | }`, 85 | 86 | "Python": ` 87 | def insertionSort(arr): 88 | for i in range(1, len(arr)): 89 | key = arr[i] 90 | j = i-1 91 | while j >= 0 and key < arr[j] : 92 | arr[j + 1] = arr[j] 93 | j -= 1 94 | arr[j + 1] = key` 95 | } 96 | -------------------------------------------------------------------------------- /static/css/others/themes/mbo.css: -------------------------------------------------------------------------------- 1 | /****************************************************************/ 2 | /* Based on mbonaci's Brackets mbo theme */ 3 | /* https://github.com/mbonaci/global/blob/master/Mbo.tmTheme */ 4 | /* Create your own: http://tmtheme-editor.herokuapp.com */ 5 | /****************************************************************/ 6 | 7 | .cm-s-mbo.CodeMirror { background: #2c2c2c; color: #ffffec; } 8 | .cm-s-mbo div.CodeMirror-selected { background: #716C62; } 9 | .cm-s-mbo .CodeMirror-line::selection, .cm-s-mbo .CodeMirror-line > span::selection, .cm-s-mbo .CodeMirror-line > span > span::selection { background: rgba(113, 108, 98, .99); } 10 | .cm-s-mbo .CodeMirror-line::-moz-selection, .cm-s-mbo .CodeMirror-line > span::-moz-selection, .cm-s-mbo .CodeMirror-line > span > span::-moz-selection { background: rgba(113, 108, 98, .99); } 11 | .cm-s-mbo .CodeMirror-gutters { background: #4e4e4e; border-right: 0px; } 12 | .cm-s-mbo .CodeMirror-guttermarker { color: white; } 13 | .cm-s-mbo .CodeMirror-guttermarker-subtle { color: grey; } 14 | .cm-s-mbo .CodeMirror-linenumber { color: #dadada; } 15 | .cm-s-mbo .CodeMirror-cursor { border-left: 1px solid #ffffec; } 16 | 17 | .cm-s-mbo span.cm-comment { color: #95958a; } 18 | .cm-s-mbo span.cm-atom { color: #00a8c6; } 19 | .cm-s-mbo span.cm-number { color: #00a8c6; } 20 | 21 | .cm-s-mbo span.cm-property, .cm-s-mbo span.cm-attribute { color: #9ddfe9; } 22 | .cm-s-mbo span.cm-keyword { color: #ffb928; } 23 | .cm-s-mbo span.cm-string { color: #ffcf6c; } 24 | .cm-s-mbo span.cm-string.cm-property { color: #ffffec; } 25 | 26 | .cm-s-mbo span.cm-variable { color: #ffffec; } 27 | .cm-s-mbo span.cm-variable-2 { color: #00a8c6; } 28 | .cm-s-mbo span.cm-def { color: #ffffec; } 29 | .cm-s-mbo span.cm-bracket { color: #fffffc; font-weight: bold; } 30 | .cm-s-mbo span.cm-tag { color: #9ddfe9; } 31 | .cm-s-mbo span.cm-link { color: #f54b07; } 32 | .cm-s-mbo span.cm-error { border-bottom: #636363; color: #ffffec; } 33 | .cm-s-mbo span.cm-qualifier { color: #ffffec; } 34 | 35 | .cm-s-mbo .CodeMirror-activeline-background { background: #494b41; } 36 | .cm-s-mbo .CodeMirror-matchingbracket { color: #ffb928 !important; } 37 | .cm-s-mbo .CodeMirror-matchingtag { background: rgba(255, 255, 255, .37); } 38 | -------------------------------------------------------------------------------- /static/css/others/themes/nord.css: -------------------------------------------------------------------------------- 1 | /* Based on arcticicestudio's Nord theme */ 2 | /* https://github.com/arcticicestudio/nord */ 3 | 4 | .cm-s-nord.CodeMirror { background: #2e3440; color: #d8dee9; } 5 | .cm-s-nord div.CodeMirror-selected { background: #434c5e; } 6 | .cm-s-nord .CodeMirror-line::selection, .cm-s-nord .CodeMirror-line > span::selection, .cm-s-nord .CodeMirror-line > span > span::selection { background: #3b4252; } 7 | .cm-s-nord .CodeMirror-line::-moz-selection, .cm-s-nord .CodeMirror-line > span::-moz-selection, .cm-s-nord .CodeMirror-line > span > span::-moz-selection { background: #3b4252; } 8 | .cm-s-nord .CodeMirror-gutters { background: #2e3440; border-right: 0px; } 9 | .cm-s-nord .CodeMirror-guttermarker { color: #4c566a; } 10 | .cm-s-nord .CodeMirror-guttermarker-subtle { color: #4c566a; } 11 | .cm-s-nord .CodeMirror-linenumber { color: #4c566a; } 12 | .cm-s-nord .CodeMirror-cursor { border-left: 1px solid #f8f8f0; } 13 | 14 | .cm-s-nord span.cm-comment { color: #4c566a; } 15 | .cm-s-nord span.cm-atom { color: #b48ead; } 16 | .cm-s-nord span.cm-number { color: #b48ead; } 17 | 18 | .cm-s-nord span.cm-comment.cm-attribute { color: #97b757; } 19 | .cm-s-nord span.cm-comment.cm-def { color: #bc9262; } 20 | .cm-s-nord span.cm-comment.cm-tag { color: #bc6283; } 21 | .cm-s-nord span.cm-comment.cm-type { color: #5998a6; } 22 | 23 | .cm-s-nord span.cm-property, .cm-s-nord span.cm-attribute { color: #8FBCBB; } 24 | .cm-s-nord span.cm-keyword { color: #81A1C1; } 25 | .cm-s-nord span.cm-builtin { color: #81A1C1; } 26 | .cm-s-nord span.cm-string { color: #A3BE8C; } 27 | 28 | .cm-s-nord span.cm-variable { color: #d8dee9; } 29 | .cm-s-nord span.cm-variable-2 { color: #d8dee9; } 30 | .cm-s-nord span.cm-variable-3, .cm-s-nord span.cm-type { color: #d8dee9; } 31 | .cm-s-nord span.cm-def { color: #8FBCBB; } 32 | .cm-s-nord span.cm-bracket { color: #81A1C1; } 33 | .cm-s-nord span.cm-tag { color: #bf616a; } 34 | .cm-s-nord span.cm-header { color: #b48ead; } 35 | .cm-s-nord span.cm-link { color: #b48ead; } 36 | .cm-s-nord span.cm-error { background: #bf616a; color: #f8f8f0; } 37 | 38 | .cm-s-nord .CodeMirror-activeline-background { background: #3b4252; } 39 | .cm-s-nord .CodeMirror-matchingbracket { 40 | text-decoration: underline; 41 | color: white !important; 42 | } 43 | -------------------------------------------------------------------------------- /static/js/others/mode/cypher/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Cypher Mode for CodeMirror 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 18 | 31 | 32 |
33 |

Cypher Mode for CodeMirror

34 |
35 | 41 |
42 |

MIME types defined: 43 | application/x-cypher-query 44 |

45 | 63 | 64 |
65 | -------------------------------------------------------------------------------- /static/css/others/themes/vibrant-ink.css: -------------------------------------------------------------------------------- 1 | /* Taken from the popular Visual Studio Vibrant Ink Schema */ 2 | 3 | .cm-s-vibrant-ink.CodeMirror { background: black; color: white; } 4 | .cm-s-vibrant-ink div.CodeMirror-selected { background: #35493c; } 5 | .cm-s-vibrant-ink .CodeMirror-line::selection, .cm-s-vibrant-ink .CodeMirror-line > span::selection, .cm-s-vibrant-ink .CodeMirror-line > span > span::selection { background: rgba(53, 73, 60, 0.99); } 6 | .cm-s-vibrant-ink .CodeMirror-line::-moz-selection, .cm-s-vibrant-ink .CodeMirror-line > span::-moz-selection, .cm-s-vibrant-ink .CodeMirror-line > span > span::-moz-selection { background: rgba(53, 73, 60, 0.99); } 7 | 8 | .cm-s-vibrant-ink .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; } 9 | .cm-s-vibrant-ink .CodeMirror-guttermarker { color: white; } 10 | .cm-s-vibrant-ink .CodeMirror-guttermarker-subtle { color: #d0d0d0; } 11 | .cm-s-vibrant-ink .CodeMirror-linenumber { color: #d0d0d0; } 12 | .cm-s-vibrant-ink .CodeMirror-cursor { border-left: 1px solid white; } 13 | 14 | .cm-s-vibrant-ink .cm-keyword { color: #CC7832; } 15 | .cm-s-vibrant-ink .cm-atom { color: #FC0; } 16 | .cm-s-vibrant-ink .cm-number { color: #FFEE98; } 17 | .cm-s-vibrant-ink .cm-def { color: #8DA6CE; } 18 | .cm-s-vibrant-ink span.cm-variable-2, .cm-s-vibrant span.cm-tag { color: #FFC66D; } 19 | .cm-s-vibrant-ink span.cm-variable-3, .cm-s-vibrant span.cm-def, .cm-s-vibrant span.cm-type { color: #FFC66D; } 20 | .cm-s-vibrant-ink .cm-operator { color: #888; } 21 | .cm-s-vibrant-ink .cm-comment { color: gray; font-weight: bold; } 22 | .cm-s-vibrant-ink .cm-string { color: #A5C25C; } 23 | .cm-s-vibrant-ink .cm-string-2 { color: red; } 24 | .cm-s-vibrant-ink .cm-meta { color: #D8FA3C; } 25 | .cm-s-vibrant-ink .cm-builtin { color: #8DA6CE; } 26 | .cm-s-vibrant-ink .cm-tag { color: #8DA6CE; } 27 | .cm-s-vibrant-ink .cm-attribute { color: #8DA6CE; } 28 | .cm-s-vibrant-ink .cm-header { color: #FF6400; } 29 | .cm-s-vibrant-ink .cm-hr { color: #AEAEAE; } 30 | .cm-s-vibrant-ink .cm-link { color: #5656F3; } 31 | .cm-s-vibrant-ink .cm-error { border-bottom: 1px solid red; } 32 | 33 | .cm-s-vibrant-ink .CodeMirror-activeline-background { background: #27282E; } 34 | .cm-s-vibrant-ink .CodeMirror-matchingbracket { outline:1px solid grey; color:white !important; } 35 | -------------------------------------------------------------------------------- /static/js/others/mode/php/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: PHP mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 30 | 31 |
32 |

PHP mode

33 |
48 | 49 | 58 | 59 |

Simple HTML/PHP mode based on 60 | the C-like mode. Depends on XML, 61 | JavaScript, CSS, HTMLMixed, and C-like modes.

62 | 63 |

MIME types defined: application/x-httpd-php (HTML with PHP code), text/x-php (plain, non-wrapped PHP code).

64 |
65 | -------------------------------------------------------------------------------- /static/css/others/themes/base16-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: Base16 Default Light 4 | Author: Chris Kempson (http://chriskempson.com) 5 | 6 | CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror) 7 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) 8 | 9 | */ 10 | 11 | .cm-s-base16-light.CodeMirror { background: #f5f5f5; color: #202020; } 12 | .cm-s-base16-light div.CodeMirror-selected { background: #e0e0e0; } 13 | .cm-s-base16-light .CodeMirror-line::selection, .cm-s-base16-light .CodeMirror-line > span::selection, .cm-s-base16-light .CodeMirror-line > span > span::selection { background: #e0e0e0; } 14 | .cm-s-base16-light .CodeMirror-line::-moz-selection, .cm-s-base16-light .CodeMirror-line > span::-moz-selection, .cm-s-base16-light .CodeMirror-line > span > span::-moz-selection { background: #e0e0e0; } 15 | .cm-s-base16-light .CodeMirror-gutters { background: #f5f5f5; border-right: 0px; } 16 | .cm-s-base16-light .CodeMirror-guttermarker { color: #ac4142; } 17 | .cm-s-base16-light .CodeMirror-guttermarker-subtle { color: #b0b0b0; } 18 | .cm-s-base16-light .CodeMirror-linenumber { color: #b0b0b0; } 19 | .cm-s-base16-light .CodeMirror-cursor { border-left: 1px solid #505050; } 20 | 21 | .cm-s-base16-light span.cm-comment { color: #8f5536; } 22 | .cm-s-base16-light span.cm-atom { color: #aa759f; } 23 | .cm-s-base16-light span.cm-number { color: #aa759f; } 24 | 25 | .cm-s-base16-light span.cm-property, .cm-s-base16-light span.cm-attribute { color: #90a959; } 26 | .cm-s-base16-light span.cm-keyword { color: #ac4142; } 27 | .cm-s-base16-light span.cm-string { color: #f4bf75; } 28 | 29 | .cm-s-base16-light span.cm-variable { color: #90a959; } 30 | .cm-s-base16-light span.cm-variable-2 { color: #6a9fb5; } 31 | .cm-s-base16-light span.cm-def { color: #d28445; } 32 | .cm-s-base16-light span.cm-bracket { color: #202020; } 33 | .cm-s-base16-light span.cm-tag { color: #ac4142; } 34 | .cm-s-base16-light span.cm-link { color: #aa759f; } 35 | .cm-s-base16-light span.cm-error { background: #ac4142; color: #505050; } 36 | 37 | .cm-s-base16-light .CodeMirror-activeline-background { background: #DDDCDC; } 38 | .cm-s-base16-light .CodeMirror-matchingbracket { color: #f5f5f5 !important; background-color: #6A9FB5 !important} 39 | -------------------------------------------------------------------------------- /static/css/others/themes/twilight.css: -------------------------------------------------------------------------------- 1 | .cm-s-twilight.CodeMirror { background: #141414; color: #f7f7f7; } /**/ 2 | .cm-s-twilight div.CodeMirror-selected { background: #323232; } /**/ 3 | .cm-s-twilight .CodeMirror-line::selection, .cm-s-twilight .CodeMirror-line > span::selection, .cm-s-twilight .CodeMirror-line > span > span::selection { background: rgba(50, 50, 50, 0.99); } 4 | .cm-s-twilight .CodeMirror-line::-moz-selection, .cm-s-twilight .CodeMirror-line > span::-moz-selection, .cm-s-twilight .CodeMirror-line > span > span::-moz-selection { background: rgba(50, 50, 50, 0.99); } 5 | 6 | .cm-s-twilight .CodeMirror-gutters { background: #222; border-right: 1px solid #aaa; } 7 | .cm-s-twilight .CodeMirror-guttermarker { color: white; } 8 | .cm-s-twilight .CodeMirror-guttermarker-subtle { color: #aaa; } 9 | .cm-s-twilight .CodeMirror-linenumber { color: #aaa; } 10 | .cm-s-twilight .CodeMirror-cursor { border-left: 1px solid white; } 11 | 12 | .cm-s-twilight .cm-keyword { color: #f9ee98; } /**/ 13 | .cm-s-twilight .cm-atom { color: #FC0; } 14 | .cm-s-twilight .cm-number { color: #ca7841; } /**/ 15 | .cm-s-twilight .cm-def { color: #8DA6CE; } 16 | .cm-s-twilight span.cm-variable-2, .cm-s-twilight span.cm-tag { color: #607392; } /**/ 17 | .cm-s-twilight span.cm-variable-3, .cm-s-twilight span.cm-def, .cm-s-twilight span.cm-type { color: #607392; } /**/ 18 | .cm-s-twilight .cm-operator { color: #cda869; } /**/ 19 | .cm-s-twilight .cm-comment { color:#777; font-style:italic; font-weight:normal; } /**/ 20 | .cm-s-twilight .cm-string { color:#8f9d6a; font-style:italic; } /**/ 21 | .cm-s-twilight .cm-string-2 { color:#bd6b18; } /*?*/ 22 | .cm-s-twilight .cm-meta { background-color:#141414; color:#f7f7f7; } /*?*/ 23 | .cm-s-twilight .cm-builtin { color: #cda869; } /*?*/ 24 | .cm-s-twilight .cm-tag { color: #997643; } /**/ 25 | .cm-s-twilight .cm-attribute { color: #d6bb6d; } /*?*/ 26 | .cm-s-twilight .cm-header { color: #FF6400; } 27 | .cm-s-twilight .cm-hr { color: #AEAEAE; } 28 | .cm-s-twilight .cm-link { color:#ad9361; font-style:italic; text-decoration:none; } /**/ 29 | .cm-s-twilight .cm-error { border-bottom: 1px solid red; } 30 | 31 | .cm-s-twilight .CodeMirror-activeline-background { background: #27282E; } 32 | .cm-s-twilight .CodeMirror-matchingbracket { outline:1px solid grey; color:white !important; } 33 | -------------------------------------------------------------------------------- /static/js/others/mode/modelica/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Modelica mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 27 | 28 |
29 |

Modelica mode

30 | 31 |
52 | 53 | 62 | 63 |

Simple mode that tries to handle Modelica as well as it can.

64 | 65 |

MIME types defined: text/x-modelica 66 | (Modlica code).

67 |
68 | -------------------------------------------------------------------------------- /static/css/others/themes/monokai.css: -------------------------------------------------------------------------------- 1 | /* Based on Sublime Text's Monokai theme */ 2 | 3 | .cm-s-monokai.CodeMirror { background: #272822; color: #f8f8f2; } 4 | .cm-s-monokai div.CodeMirror-selected { background: #49483E; } 5 | .cm-s-monokai .CodeMirror-line::selection, .cm-s-monokai .CodeMirror-line > span::selection, .cm-s-monokai .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); } 6 | .cm-s-monokai .CodeMirror-line::-moz-selection, .cm-s-monokai .CodeMirror-line > span::-moz-selection, .cm-s-monokai .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); } 7 | .cm-s-monokai .CodeMirror-gutters { background: #272822; border-right: 0px; } 8 | .cm-s-monokai .CodeMirror-guttermarker { color: white; } 9 | .cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; } 10 | .cm-s-monokai .CodeMirror-linenumber { color: #d0d0d0; } 11 | .cm-s-monokai .CodeMirror-cursor { border-left: 1px solid #f8f8f0; } 12 | 13 | .cm-s-monokai span.cm-comment { color: #75715e; } 14 | .cm-s-monokai span.cm-atom { color: #ae81ff; } 15 | .cm-s-monokai span.cm-number { color: #ae81ff; } 16 | 17 | .cm-s-monokai span.cm-comment.cm-attribute { color: #97b757; } 18 | .cm-s-monokai span.cm-comment.cm-def { color: #bc9262; } 19 | .cm-s-monokai span.cm-comment.cm-tag { color: #bc6283; } 20 | .cm-s-monokai span.cm-comment.cm-type { color: #5998a6; } 21 | 22 | .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute { color: #a6e22e; } 23 | .cm-s-monokai span.cm-keyword { color: #f92672; } 24 | .cm-s-monokai span.cm-builtin { color: #66d9ef; } 25 | .cm-s-monokai span.cm-string { color: #e6db74; } 26 | 27 | .cm-s-monokai span.cm-variable { color: #f8f8f2; } 28 | .cm-s-monokai span.cm-variable-2 { color: #9effff; } 29 | .cm-s-monokai span.cm-variable-3, .cm-s-monokai span.cm-type { color: #66d9ef; } 30 | .cm-s-monokai span.cm-def { color: #fd971f; } 31 | .cm-s-monokai span.cm-bracket { color: #f8f8f2; } 32 | .cm-s-monokai span.cm-tag { color: #f92672; } 33 | .cm-s-monokai span.cm-header { color: #ae81ff; } 34 | .cm-s-monokai span.cm-link { color: #ae81ff; } 35 | .cm-s-monokai span.cm-error { background: #f92672; color: #f8f8f0; } 36 | 37 | .cm-s-monokai .CodeMirror-activeline-background { background: #373831; } 38 | .cm-s-monokai .CodeMirror-matchingbracket { 39 | text-decoration: underline; 40 | color: white !important; 41 | } 42 | -------------------------------------------------------------------------------- /static/js/others/mode/htmlembedded/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Html Embedded Scripts mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 29 | 30 |
31 |

Html Embedded Scripts mode

32 |
44 | 45 | 53 | 54 |

Mode for html embedded scripts like JSP and ASP.NET. Depends on multiplex and HtmlMixed which in turn depends on 55 | JavaScript, CSS and XML.
Other dependencies include those of the scripting language chosen.

56 | 57 |

MIME types defined: application/x-aspx (ASP.NET), 58 | application/x-ejs (Embedded JavaScript), application/x-jsp (JavaServer Pages) 59 | and application/x-erb

60 |
61 | -------------------------------------------------------------------------------- /static/js/others/mode/vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Vue.js mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 36 | 37 |
38 |

Vue.js mode

39 |
55 | 66 | 67 |

MIME types defined: text/x-vue

68 | 69 |
70 | -------------------------------------------------------------------------------- /static/js/others/mode/factor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Factor mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 18 | 31 | 32 |
33 | 34 |

Factor mode

35 | 36 |
60 |
61 | 62 | 72 |

73 |

Simple mode that handles Factor Syntax (Factor on Wikipedia).

74 | 75 |

MIME types defined: text/x-factor.

76 | 77 |
78 | -------------------------------------------------------------------------------- /static/js/others/mode/django/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: Django template mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 28 | 29 |
30 |

Django template mode

31 |
59 | 60 | 69 | 70 |

Mode for HTML with embedded Django template markup.

71 | 72 |

MIME types defined: text/x-django

73 |
74 | -------------------------------------------------------------------------------- /static/css/others/themes/erlang-dark.css: -------------------------------------------------------------------------------- 1 | .cm-s-erlang-dark.CodeMirror { background: #002240; color: white; } 2 | .cm-s-erlang-dark div.CodeMirror-selected { background: #b36539; } 3 | .cm-s-erlang-dark .CodeMirror-line::selection, .cm-s-erlang-dark .CodeMirror-line > span::selection, .cm-s-erlang-dark .CodeMirror-line > span > span::selection { background: rgba(179, 101, 57, .99); } 4 | .cm-s-erlang-dark .CodeMirror-line::-moz-selection, .cm-s-erlang-dark .CodeMirror-line > span::-moz-selection, .cm-s-erlang-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(179, 101, 57, .99); } 5 | .cm-s-erlang-dark .CodeMirror-gutters { background: #002240; border-right: 1px solid #aaa; } 6 | .cm-s-erlang-dark .CodeMirror-guttermarker { color: white; } 7 | .cm-s-erlang-dark .CodeMirror-guttermarker-subtle { color: #d0d0d0; } 8 | .cm-s-erlang-dark .CodeMirror-linenumber { color: #d0d0d0; } 9 | .cm-s-erlang-dark .CodeMirror-cursor { border-left: 1px solid white; } 10 | 11 | .cm-s-erlang-dark span.cm-quote { color: #ccc; } 12 | .cm-s-erlang-dark span.cm-atom { color: #f133f1; } 13 | .cm-s-erlang-dark span.cm-attribute { color: #ff80e1; } 14 | .cm-s-erlang-dark span.cm-bracket { color: #ff9d00; } 15 | .cm-s-erlang-dark span.cm-builtin { color: #eaa; } 16 | .cm-s-erlang-dark span.cm-comment { color: #77f; } 17 | .cm-s-erlang-dark span.cm-def { color: #e7a; } 18 | .cm-s-erlang-dark span.cm-keyword { color: #ffee80; } 19 | .cm-s-erlang-dark span.cm-meta { color: #50fefe; } 20 | .cm-s-erlang-dark span.cm-number { color: #ffd0d0; } 21 | .cm-s-erlang-dark span.cm-operator { color: #d55; } 22 | .cm-s-erlang-dark span.cm-property { color: #ccc; } 23 | .cm-s-erlang-dark span.cm-qualifier { color: #ccc; } 24 | .cm-s-erlang-dark span.cm-special { color: #ffbbbb; } 25 | .cm-s-erlang-dark span.cm-string { color: #3ad900; } 26 | .cm-s-erlang-dark span.cm-string-2 { color: #ccc; } 27 | .cm-s-erlang-dark span.cm-tag { color: #9effff; } 28 | .cm-s-erlang-dark span.cm-variable { color: #50fe50; } 29 | .cm-s-erlang-dark span.cm-variable-2 { color: #e0e; } 30 | .cm-s-erlang-dark span.cm-variable-3, .cm-s-erlang-dark span.cm-type { color: #ccc; } 31 | .cm-s-erlang-dark span.cm-error { color: #9d1e15; } 32 | 33 | .cm-s-erlang-dark .CodeMirror-activeline-background { background: #013461; } 34 | .cm-s-erlang-dark .CodeMirror-matchingbracket { outline:1px solid grey; color:white !important; } 35 | -------------------------------------------------------------------------------- /static/js/others/mode/apl/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CodeMirror: APL mode 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 14 | 27 | 28 |
29 |

APL mode

30 |
56 | 57 | 64 | 65 |

Simple mode that tries to handle APL as well as it can.

66 |

It attempts to label functions/operators based upon 67 | monadic/dyadic usage (but this is far from fully fleshed out). 68 | This means there are meaningful classnames so hover states can 69 | have popups etc.

70 | 71 |

MIME types defined: text/apl (APL code)

72 |
73 | --------------------------------------------------------------------------------