diff --git a/public/main.js b/public/main.js index 806e73a..471a7d0 100644 --- a/public/main.js +++ b/public/main.js @@ -2,8 +2,12 @@ /* global $ autosize */ $(function() { + $.fn.selectpicker.Constructor.BootstrapVersion = '4'; + autosize($('textarea')); + $('select#highlight').selectpicker(); + $('textarea').on('keydown', function(e) { if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey && $(this).val()) { $(this).closest('form').submit(); diff --git a/views/highlight.pug b/views/highlight.pug index 1679a8d..3925f33 100644 --- a/views/highlight.pug +++ b/views/highlight.pug @@ -1,9 +1,11 @@ extends layout block head - link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/themes/prism-coy.css') - link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/toolbar/prism-toolbar.css') - link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/line-numbers/prism-line-numbers.css') + link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:400,300') + link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-coy.min.css', integrity='sha256-VcuSs+n31yebPlEcehu6PvnidJ808ScFBsK8+tJKX+Q=', crossorigin='anonymous') + link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.min.css', integrity='sha256-P45OhhEWm49G8sadt2n5rDaWLa3xZbDOQhJliuaojH0=', crossorigin='anonymous') + link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-numbers/prism-line-numbers.min.css', integrity='sha256-Afz2ZJtXw+OuaPX10lZHY7fN1+FuTE/KdCs+j7WZTGc=', crossorigin='anonymous') + style. html, body, .code-toolbar, pre, code { height: 100%; @@ -14,37 +16,51 @@ block head pre[class*="language-"]::before, pre[class*="language-"]::after { display: none; } - .code-toolbar > .toolbar { - top: 1rem; - right: 1rem; - opacity: 1; - } pre[class*="language-"] > code { border-left: none; } - .code-toolbar > .toolbar a, .code-toolbar > .toolbar button, .code-toolbar > .toolbar span { - padding: 0.25rem 1rem 0.5rem; - font-size: 1.2rem; + .line-numbers-rows { + -webkit-user-select: none; + user-select: none; + } + div.code-toolbar > .toolbar { + top: 1rem; + right: 2.5rem; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + transition: none; + opacity: 1; + } + div.code-toolbar > .toolbar a, div.code-toolbar > .toolbar button, div.code-toolbar > .toolbar span { + padding: 0.5rem 1rem; + font-size: 1.25rem; + line-height: 1.5; + border-radius: 0.3rem; color: #fff; - background-color: #0275d8; - border-color: #0275d8; - border-radius: .3rem; - opacity: 0.5; - transition: opacity 0.3s ease-in-out; + background-color: #007bff; + border-color: #007bff; + display: inline-block; + font-weight: 400; + transition: color 0.15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; + font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + border: 1px solid transparent; } - .code-toolbar > .toolbar a:hover, .code-toolbar > .toolbar a:focus, .code-toolbar > .toolbar button:hover, .code-toolbar > .toolbar button:focus, .code-toolbar > .toolbar span:hover, .code-toolbar > .toolbar span:focus { + div.code-toolbar > .toolbar a:focus, div.code-toolbar > .toolbar a:hover, div.code-toolbar > .toolbar button:focus, div.code-toolbar > .toolbar button:hover, div.code-toolbar > .toolbar span:focus, div.code-toolbar > .toolbar span:hover { color: #fff; - background-color: #025aa5; - opacity: 1; + background-color: #0069d9; + border-color: #0062cc; } block content pre.line-numbers code(class='language-' + lang) | #{paste} - script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/prism.js') - script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/components/prism-' + lang + '.min.js') - script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/toolbar/prism-toolbar.min.js') - script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/line-numbers/prism-line-numbers.min.js') - script(src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js') - script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js') + + script(src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js', integrity='sha256-3teItwIfMuVB74Alnxw/y5HAZ2irOsCULFff3EgbtEs=', crossorigin='anonymous') + script(src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-' + lang + '.min.js') + script(src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.min.js', integrity='sha256-7I/IdbPM17QdjqRNwpVYj4iDGAQw7ZFHy9RSSU1yvLE=', crossorigin='anonymous') + script(src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-numbers/prism-line-numbers.min.js', integrity='sha256-hep5s8952MqR7Y79JYfCXZD6vQjVHs7sOu/ZGrs1OEQ=', crossorigin='anonymous') + script(src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js', integrity='sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=', crossorigin='anonymous') + script(src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js', integrity='sha256-5F8rynXScCOEtnwlm5P293TlCvTT1beoEJcmWHCg4BU=', crossorigin='anonymous') diff --git a/views/index.pug b/views/index.pug index 938d7f8..ca23b40 100644 --- a/views/index.pug +++ b/views/index.pug @@ -2,6 +2,7 @@ extends layout block head link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:400,300') + link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css', integrity='sha256-VMPhaMmJn7coDSbzwqB0jflvb+CDnoAlfStC5RogOQo=', crossorigin='anonymous') style. html { position: relative; @@ -31,6 +32,9 @@ block head line-height: 1.5em; box-shadow: none; } + .border-gray { + border: 1px solid #ced4da; + } footer { width: 100%; height: 2.5rem; @@ -52,7 +56,7 @@ block content div.row.mt-4 div.col-md-auto.col-sm-12 - select#highlight.custom-select.mt-3(name='highlight') + select#highlight.mt-3(name='highlight', data-live-search='true', data-width='auto', data-style='text-dark border-gray', data-styleBase='custom-select') option(value='', selected) Choose syntax highlighting each val, key in highlights option(value=key) #{val} @@ -71,5 +75,7 @@ block content echo 'Hello World' | curl -F 'paste=<-' #{url} script(src='https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js' integrity='sha256-dW8u4dvEKDThJpWRwLgGugbARnA3O2wqBcVerlg9LMc=', crossorigin='anonymous') - script(src='https://code.jquery.com/jquery-3.3.1.min.js', integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=', crossorigin='anonymous') + script(src='https://code.jquery.com/jquery-3.5.1.min.js', integrity='sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=', crossorigin='anonymous') + script(src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js', integrity='sha256-Xt8pc4G0CdcRvI0nZ2lRpZ4VHng0EoUDMlGcBSQ9HiQ=', crossorigin='anonymous') + script(src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js', integrity='sha256-QOE02Glo1C1gHzP96JOaxyIMt4XSFv/exZaYLY4dwO0=', crossorigin='anonymous') script(src='/main.js') diff --git a/views/layout.pug b/views/layout.pug index 1ea17e7..0291a0e 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -4,7 +4,7 @@ html(lang='en') meta(charset='utf-8') meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no') title #{title} - link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO', crossorigin='anonymous') + link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css', integrity='sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=', crossorigin='anonymous') block head