github.com/jgarto/itcv@v0.0.0-20180826224514-4eea09c1aa0d/examples/sites/syntaxviewer/index.html (about) 1 <!--Template generated by reactGen--> 2 3 <!doctype html> 4 <html> 5 <head> 6 <title>Syntax Viewer</title> 7 8 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 10 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 11 <style> 12 html { box-sizing: border-box; } 13 *, *:before, *:after { box-sizing: inherit; } 14 15 16 .grid-container { 17 display: grid; 18 grid-template-areas: 19 'header header' 20 'left right'; 21 grid-gap: 10px; 22 background-color: #2196F3; 23 grid-template-rows: auto 1fr; 24 grid-template-columns: 1fr 1fr; 25 padding: 0px; 26 height: 100vh; 27 } 28 .grid-container > div { 29 background-color: rgba(255, 255, 255, 0.8); 30 } 31 body { 32 overflow: hidden; 33 margin: 0px; 34 padding: 0px; 35 } 36 textarea.codeinput { 37 width: 100%; 38 height: 100%; 39 font-family: Menlo, Courier\ New, monospace; 40 font-size: 11pt; 41 } 42 pre.ast { 43 margin: 0px; 44 padding: 0px; 45 overflow: auto; 46 } 47 pre.asterror { 48 color: darkred; 49 } 50 51 .header { 52 grid-area: header; 53 text-align: left; 54 font-size: 22px; 55 } 56 .left { 57 grid-area: left; 58 text-align: center; 59 } 60 .right { 61 grid-area: right; 62 text-align: left; 63 overflow: hidden; 64 } 65 66 .right > pre { 67 width: 100%; 68 height: 100%; 69 } 70 </style> 71 </head> 72 <body> 73 <div id="app"></div> 74 <script src="syntaxviewer.js"></script> 75 </body> 76 </html> 77