diff --git a/app/bootstrap.php.d/20-twig.php b/app/bootstrap.php.d/20-twig.php index 54fc2ab..8da7180 100644 --- a/app/bootstrap.php.d/20-twig.php +++ b/app/bootstrap.php.d/20-twig.php @@ -12,11 +12,3 @@ $app->extend('twig', function ($twig, $app) { return $twig; }); - -$app['geshi'] = $app->share(function ($app) { - $geshi = new GeSHi(); - $geshi->enable_classes(); - $geshi->enable_line_numbers(GESHI_NORMAL_LINE_NUMBERS); - - return $geshi; -}); diff --git a/app/bootstrap.php.d/50-git.php b/app/bootstrap.php.d/50-git.php index 728e2c9..7afa121 100644 --- a/app/bootstrap.php.d/50-git.php +++ b/app/bootstrap.php.d/50-git.php @@ -20,5 +20,5 @@ $app['git_working_copy'] = $app->share(function ($app) { }); $app['gist'] = $app->share(function ($app) { - return new Gist($app['gist_path'], $app['git_wrapper'], $app['git_working_copy'], $app['geshi']); + return new Gist($app['gist_path'], $app['git_wrapper'], $app['git_working_copy']); }); diff --git a/bower.json b/bower.json index 201d38d..464be4d 100644 --- a/bower.json +++ b/bower.json @@ -15,8 +15,8 @@ "dependencies": { "bootstrap": "3.3.4", "flag-icon-css": "0.7.1", - "SyntaxHighlighter": "3.0.83", "iframe-resizer": "2.8.6", - "jsdiff": "~2.2.2" + "jsdiff": "~2.2.2", + "Prism": "~1.8.1" } } diff --git a/composer.json b/composer.json index 2f25fac..510fa87 100644 --- a/composer.json +++ b/composer.json @@ -1,6 +1,5 @@ { "require": { - "geshi/geshi": "dev-master", "silex/silex": "1.3.x-dev", "symfony/yaml": "~2.6", "symfony/twig-bridge": "~2.6", diff --git a/src/Gist/Controller/Controller.php b/src/Gist/Controller/Controller.php index e166f39..5e71381 100644 --- a/src/Gist/Controller/Controller.php +++ b/src/Gist/Controller/Controller.php @@ -91,7 +91,6 @@ abstract class Controller 'history' => $history, 'commit' => $commit, 'raw_content' => $content, - 'content' => $app['gist']->highlight($gist->getGeshiType(), $content), ); } diff --git a/src/Gist/Resources/views/View/embed.html.twig b/src/Gist/Resources/views/View/embed.html.twig index 4dd7ad1..c619e9d 100644 --- a/src/Gist/Resources/views/View/embed.html.twig +++ b/src/Gist/Resources/views/View/embed.html.twig @@ -1,15 +1,16 @@ {% extends 'base.html.twig' %} {% block css %} - {% if gist.cipher %} - - + {{ parent() }} + + + + {% if theme_settings.name == 'dark' %} + {% else %} - + {% endif %} - {{ parent() }} - {% endblock %} @@ -80,11 +69,7 @@
{{ raw_content|raw }}- {% else %} - {{ content|raw }} - {% endif %} +
{{ raw_content }}
{% if not gist.cipher %}{{ commit.diff }}{% endif %}
+
{% endif %}
{{ raw_content|raw }}- {% else %} - {{ content|raw }} - {% endif %} +
{{ raw_content }}
@@ -82,8 +79,6 @@ {% block js %} {{ parent() }} - - {% if gist.cipher %} - {{ include('View/cipherJs.html.twig') }} - {% endif %} + + {% endblock %} diff --git a/src/Gist/Service/Gist.php b/src/Gist/Service/Gist.php index 7877164..db9b96c 100644 --- a/src/Gist/Service/Gist.php +++ b/src/Gist/Service/Gist.php @@ -32,25 +32,18 @@ class Gist */ protected $gitWorkingCopy; - /** - * @var GeSHi - */ - protected $geshi; - /** * __construct. * * @param mixed $gistPath * @param GitWrapper $gitWrapper * @param GitWorkingCopy $gitWorkingCopy - * @param GeSHi $geshi */ - public function __construct($gistPath, GitWrapper $gitWrapper, GitWorkingCopy $gitWorkingCopy, GeSHi $geshi) + public function __construct($gistPath, GitWrapper $gitWrapper, GitWorkingCopy $gitWorkingCopy) { $this->gistPath = $gistPath; $this->gitWrapper = $gitWrapper; $this->gitWorkingCopy = $gitWorkingCopy; - $this->geshi = $geshi; } /** @@ -95,7 +88,7 @@ class Gist $data = array( 'commit' => trim($commits[$i][1]), 'date' => new \DateTime(trim($dates[$i][1])), - 'diff' => $this->highlight('diff', $diff), + 'diff' => str_replace('\ No newline at end of file', '', $diff), ); if ($gist->isCipher()) { @@ -193,20 +186,4 @@ class Gist return count(explode("\n", $content)); } - - /** - * Highlight the content. - * - * @param string $type - * @param string $content - * - * @return string - */ - public function highlight($type, $content) - { - $this->geshi->set_source($content); - $this->geshi->set_language($type); - - return $this->geshi->parse_code(); - } } diff --git a/web/app/css/geshi/dawn.css b/web/app/css/geshi/dawn.css deleted file mode 100644 index d1e6fc4..0000000 --- a/web/app/css/geshi/dawn.css +++ /dev/null @@ -1,146 +0,0 @@ -/* @override http://localhost/mark_story2/site/css/geshi.css */ -/** - * GeSHi CSS Inspired by - * TextMate Theme Dawn - * - * Copyright 2008 Mark Story - * - * This work is licensed under the Creative Commons Attribution-Share Alike 2.5 Canada License. - * To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/2.5/ca/ - * or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA. - * - * @copyright Copyright 2008, Mark Story. - * @link http://mark-story.com - * @license http://creativecommons.org/licenses/by-sa/2.5/ca/ - */ - -/* -* Global geshi styles -**********************/ -#main pre { - line-height: 1.5em; - font-size: 10px; - white-space: normal; - padding: 0; - background: #E8EDF4; - border: 1px solid #222; -} -pre ol { - list-style: decimal; - list-style-position: outside; - padding: 0; - margin: 0; -} -#main pre ol li { - margin: 0 0 0 35px; - padding: 0; - color: #333; - clear: none; -} -pre ol li div { - color:#000; -} - -/* Line highlights */ -.li1 { - background: #E4E8EF; -} - - -/* comments */ -.co1, -.coMULTI { - color:#5A526E; -} -/* methods */ -.me1{ - color:#000; -} -.me0 { - -} -.me2 { - color:#000; -} - -/* brackets */ -.br0 { - color:#000; -} - -/* strings */ -.st0 { - color:#0B6125; -} - -/* keywords */ -.kw1 { - color: #794938; -} -.kw2 { - color:#A71D5D; - font-style: italic; -} - -.kw3 { - color:#693A17; -} - -/* numbers */ -.nu0 { - color:#811F24; -} - -/* vars */ -.re0 { - color:#434A97; -} - - -/* -* CSS selectors -*****************/ -/* classnames */ - -[lang=css] .kw2, -.css .kw2 { - color:#C24F24; -} -[lang=css] .kw1, -.css .kw1 { - color:#691C97; -} -[lang=css] .re0, -.css .re0 { - color: #C24F24; -} -.re1 { - color: #C24F24; -} -/* px values */ -[lang=css] .re3, -.css .re3 { - color:#84252A; -} - -/* -* Python -****************/ -[lang=python] ol li div, -.python ol li div { - color: #000; -} -[lang=python] .kw2, -.python .kw2 { - font-style: normal; -} -[lang=python] .kw1 { - color: #A91D5D; -} -/* -* Javascript -****************/ -[lang=javascript] .me1, -.javascript .me1 { - color: #794938; -} diff --git a/web/app/css/geshi/mac-classic.css b/web/app/css/geshi/mac-classic.css deleted file mode 100644 index ae152f3..0000000 --- a/web/app/css/geshi/mac-classic.css +++ /dev/null @@ -1,131 +0,0 @@ -/** - * GeSHi CSS Inspired by TextMate - * Theme Mac Classic - * - * Copyright 2008 Mark Story - * - * This work is licensed under the Creative Commons Attribution-Share Alike 2.5 Canada License. - * To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/2.5/ca/ - * or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA. - * - * @copyright Copyright 2008, Mark Story. - * @link http://mark-story.com - * @license http://creativecommons.org/licenses/by-sa/2.5/ca/ - */ - -/* -* Global geshi styles -**********************/ -#main pre { - line-height: 1.5em; - font-size: 10px; - white-space: normal; - padding: 0; - background: #eae9e5; - border: 1px solid #c0c0c0; -} -pre ol { - list-style: decimal; - list-style-position: outside; - padding: 0; - margin: 0; -} -#main pre ol li { - margin: 0 0 0 35px; - padding: 0; - color: #000; - clear: none; -} -pre ol li div { - color:#000; -} - - -/* php */ -pre[lang=php] ol div, -pre.php ol div { - color:#fd1435; -} -/* Line highlights */ -.li1 { - background: #f2f2f2; -} -/* Line highlights */ -.li1 { - background: #f2f2f2; -} - -/* comments */ -.co1, -.coMULTI { - color:#5c9dff; -} -/* methods */ -.me1{ - color:#000; -} -.me0 { - -} -.me2 { - color:#000; -} - -/* brackets */ -.br0 { - color:#222; -} - -/* strings */ -.st0 { - color:#b701bb; -} - -/* keywords */ -.kw1 { - color: #fd1435; -} -.kw2 { - color:#6266f5; -} - -.kw3 { - color:#505e80; -} - -/* numbers */ -.nu0 { - color:#0a0aa5; -} - -/* vars */ -.re0 { - color:#059532; -} - - -/* -* CSS selectors -*****************/ -/* classnames */ - -[lang=css] .kw2, -.css .kw2 { - color:#0a0aa5; -} -.re1 { - color: #b701bb; -} -/* px values */ -[lang=css] .re3, -.css .re3 { - color:#059532; -} - -/* -* Javascript -****************/ -[lang=javascript] .me1, -.javascript .me1 { - color:#505e80; -} diff --git a/web/app/css/geshi/twilight.css b/web/app/css/geshi/twilight.css deleted file mode 100644 index 9e2c15c..0000000 --- a/web/app/css/geshi/twilight.css +++ /dev/null @@ -1,123 +0,0 @@ -/* @override http://localhost/mark_story2/site/css/geshi.css */ -/** - * GeSHi CSS Inspired by TextMate - * Theme Twilight - * - * Copyright 2008 Mark Story - * - * This work is licensed under the Creative Commons Attribution-Share Alike 2.5 Canada License. - * To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/2.5/ca/ - * or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA. - * - * @filesource - * @copyright Copyright 2008, Mark Story. - * @link http://mark-story.com - * @license http://creativecommons.org/licenses/by-sa/2.5/ca/ - */ -/* -* Global geshi styles -**********************/ -#main pre { - line-height: 1.5em; - font-size: 10px; - white-space: normal; - padding: 0; - background: #222223; - border: 1px solid #222; -} -pre ol { - list-style: decimal; - list-style-position: outside; - padding: 0; - margin: 0; -} -#main pre ol li { - margin: 0 0 0 35px; - padding: 0; - color: #000; - clear: none; -} -pre ol li div { - color:#f8f8f8; -} - -/* Line highlights */ -.li1 { - background: #202021; -} - - -/* comments */ -.co1, -.coMULTI { - color:#5F5A60; -} -/* methods */ -.me1{ - color:#fff; -} -.me0 { - -} -.me2 { - color:#000; -} - -/* brackets */ -.br0 { - color:#fff; -} - -/* strings */ -.st0 { - color:#8F9657; -} - -/* keywords */ -.kw1 { - color: #CDA869; -} -.kw2 { - color:#F9EE98; -} - -.kw3 { - color:#505e80; -} - -/* numbers */ -.nu0 { - color:#CF6745; -} - -/* vars */ -.re0 { - color:#7587A6; -} - - -/* -* CSS selectors -*****************/ -/* classnames */ - -[lang=css] .kw2, -.css .kw2 { - color:#F9EE7E; -} -.re1 { - color: #96703D; -} -/* px values */ -[lang=css] .re3, -.css .re3 { - color:#CA7840; -} - -/* -* Javascript -****************/ -[lang=javascript] .me1, -.javascript .me1 { - color:#505e80; -} diff --git a/web/app/css/geshi/vibrant-ink.css b/web/app/css/geshi/vibrant-ink.css deleted file mode 100644 index 3c920e3..0000000 --- a/web/app/css/geshi/vibrant-ink.css +++ /dev/null @@ -1,148 +0,0 @@ -/* @override http://localhost/mark_story2/site/css/geshi.css */ -/** - * GeSHi CSS Inspired by TextMate - * Theme Vibrant Ink - * - * Copyright 2008 Mark Story - * - * This work is licensed under the Creative Commons Attribution-Share Alike 2.5 Canada License. - * To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/2.5/ca/ - * or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA. - * - * @copyright Copyright 2008, Mark Story. - * @link http://mark-story.com - * @license http://creativecommons.org/licenses/by-sa/2.5/ca/ - */ - -/* -* Global geshi styles -**********************/ -#main pre { - line-height: 1.5em; - font-size: 10px; - white-space: normal; - padding: 0; - background: #000; - border: 1px solid #222; -} -pre ol { - list-style: decimal; - list-style-position: outside; - padding: 0; - margin: 0; -} -#main pre ol li { - margin: 0 0 0 35px; - padding: 0; - color: #fff; - clear: none; -} -pre ol li div { - /*color: #F26100;*/ - color: #D2C0B4; -} - -/* Line highlights */ -.li1 { - background: #030303; -} - - -/* comments */ -.co1, -.coMULTI { - color:#7830CC; -} -/* methods */ -.me1{ - color:#fff; -} -.me0 { - -} -.me2 { - color:#000; -} - -/* brackets */ -.br0 { - color:#fff; -} - -/* strings */ -.st0 { - color:#52F700; -} - -/* keywords */ -.kw1 { - color: #C6C765; -} -.kw2 { - color:#FFC500; -} - -.kw3 { - color:#505e80; -} - -/* numbers */ -.nu0 { - color:#319994; -} - -/* vars */ -.re0 { - color:#fff; -} - - -/* -* CSS selectors -*****************/ -/* classnames */ - -[lang=css] .kw2, -.css .kw2 { - color:#fff; -} -[lang=css] .kw1, -.css .kw1 { - color:#999966; -} -[lang=css] .re0, -.css .re0 { - color: #F26100; -} -.re1 { - color: #96703D; -} -/* px values */ -[lang=css] .re3, -.css .re3 { - color:#fff; -} - -/* -* Python -****************/ -[lang=python] ol li div, -.python ol li div { - color: #fff; -} -[lang=python] .kw1, -.python .kw1 { - color:#F26100; -} - -/* -* Javascript -****************/ -[lang=javascript] .me1, -.javascript .me1 { - color:#fff; -} -pre[lang=javascript] ol li div, -.javascript ol li div { - color: #fff; -} diff --git a/web/app/css/prism-okaidia.css b/web/app/css/prism-okaidia.css new file mode 100644 index 0000000..3e0da35 --- /dev/null +++ b/web/app/css/prism-okaidia.css @@ -0,0 +1,121 @@ +/** + * okaidia theme for JavaScript, CSS and HTML + * Loosely based on Monokai textmate theme by http://www.monokai.nl/ + * @author ocodia + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #f8f8f2; + background: none; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #272822; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #f8f8f2; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.constant, +.token.symbol, +.token.deleted { + color: #f92672; +} + +.token.boolean, +.token.number { + color: #ae81ff; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #a6e22e; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string, +.token.variable { + color: #f8f8f2; +} + +.token.atrule, +.token.attr-value, +.token.function { + color: #e6db74; +} + +.token.keyword { + color: #66d9ef; +} + +.token.regex, +.token.important { + color: #fd971f; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/web/app/css/prism-solarizedlight.css b/web/app/css/prism-solarizedlight.css new file mode 100644 index 0000000..bad7703 --- /dev/null +++ b/web/app/css/prism-solarizedlight.css @@ -0,0 +1,148 @@ +/* + Solarized Color Schemes originally by Ethan Schoonover + http://ethanschoonover.com/solarized + + Ported for PrismJS by Hector Matos + Website: https://krakendev.io + Twitter Handle: https://twitter.com/allonsykraken) +*/ + +/* +SOLARIZED HEX +--------- ------- +base03 #002b36 +base02 #073642 +base01 #586e75 +base00 #657b83 +base0 #839496 +base1 #93a1a1 +base2 #eee8d5 +base3 #fdf6e3 +yellow #b58900 +orange #cb4b16 +red #dc322f +magenta #d33682 +violet #6c71c4 +blue #268bd2 +cyan #2aa198 +green #859900 +*/ + +code[class*="language-"], +pre[class*="language-"] { + color: #657b83; /* base00 */ + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + background: #073642; /* base02 */ +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + background: #073642; /* base02 */ +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background-color: #fdf6e3; /* base3 */ +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #93a1a1; /* base1 */ +} + +.token.punctuation { + color: #586e75; /* base01 */ +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #268bd2; /* blue */ +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.url, +.token.inserted { + color: #2aa198; /* cyan */ +} + +.token.entity { + color: #657b83; /* base00 */ + background: #eee8d5; /* base2 */ +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #859900; /* green */ +} + +.token.function { + color: #b58900; /* yellow */ +} + +.token.regex, +.token.important, +.token.variable { + color: #cb4b16; /* orange */ +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} \ No newline at end of file diff --git a/web/app/css/prism.css b/web/app/css/prism.css new file mode 100644 index 0000000..5199180 --- /dev/null +++ b/web/app/css/prism.css @@ -0,0 +1,467 @@ +/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+actionscript+c+aspnet+bash+cpp+csharp+css-extras+diff+perl+php+php-extras+python+sql+yaml&plugins=line-highlight+line-numbers+autolinker+previewer-base+previewer-color+previewer-gradient+previewer-easing+previewer-time+previewer-angle */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ + +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #a67f59; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +pre[data-line] { + position: relative; + padding: 1em 0 1em 3em; +} + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; /* Same as .prism’s padding-top */ + + background: hsla(24, 20%, 50%,.08); + background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); + + pointer-events: none; + + line-height: inherit; + white-space: pre; +} + + .line-highlight:before, + .line-highlight[data-end]:after { + content: attr(data-start); + position: absolute; + top: .4em; + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: hsla(24, 20%, 50%,.4); + color: hsl(24, 20%, 95%); + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; + } + + .line-highlight[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; + } + +pre.line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} + +pre.line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} + + .line-numbers-rows > span { + pointer-events: none; + display: block; + counter-increment: linenumber; + } + + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } +.token a { + color: inherit; +} +.prism-previewer, +.prism-previewer:before, +.prism-previewer:after { + position: absolute; + pointer-events: none; +} +.prism-previewer, +.prism-previewer:after { + left: 50%; +} +.prism-previewer { + margin-top: -48px; + width: 32px; + height: 32px; + margin-left: -16px; + + opacity: 0; + -webkit-transition: opacity .25s; + -o-transition: opacity .25s; + transition: opacity .25s; +} +.prism-previewer.flipped { + margin-top: 0; + margin-bottom: -48px; +} +.prism-previewer:before, +.prism-previewer:after { + content: ''; + position: absolute; + pointer-events: none; +} +.prism-previewer:before { + top: -5px; + right: -5px; + left: -5px; + bottom: -5px; + border-radius: 10px; + border: 5px solid #fff; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75); +} + +.prism-previewer:after { + top: 100%; + width: 0; + height: 0; + margin: 5px 0 0 -7px; + border: 7px solid transparent; + border-color: rgba(255, 0, 0, 0); + border-top-color: #fff; +} +.prism-previewer.flipped:after { + top: auto; + bottom: 100%; + margin-top: 0; + margin-bottom: 5px; + border-top-color: rgba(255, 0, 0, 0); + border-bottom-color: #fff; +} +.prism-previewer.active { + opacity: 1; +} +.prism-previewer-color { + background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb), linear-gradient(45deg, #bbb 25%, #eee 25%, #eee 75%, #bbb 75%, #bbb); + background-size: 10px 10px; + background-position: 0 0, 5px 5px; +} +.prism-previewer-color:before { + background-color: inherit; + background-clip: padding-box; +} + +.prism-previewer-gradient { + background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb), linear-gradient(45deg, #bbb 25%, #eee 25%, #eee 75%, #bbb 75%, #bbb); + background-size: 10px 10px; + background-position: 0 0, 5px 5px; + + width: 64px; + margin-left: -32px; +} +.prism-previewer-gradient:before { + content: none; +} +.prism-previewer-gradient div { + position: absolute; + top: -5px; + left: -5px; + right: -5px; + bottom: -5px; + border-radius: 10px; + border: 5px solid #fff; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75); +} +.prism-previewer-easing { + margin-top: -76px; + margin-left: -30px; + width: 60px; + height: 60px; + background: #333; +} +.prism-previewer-easing.flipped { + margin-bottom: -116px; +} +.prism-previewer-easing svg { + width: 60px; + height: 60px; +} +.prism-previewer-easing circle { + fill: hsl(200, 10%, 20%); + stroke: white; +} +.prism-previewer-easing path { + fill: none; + stroke: white; + stroke-linecap: round; + stroke-width: 4; +} +.prism-previewer-easing line { + stroke: white; + stroke-opacity: 0.5; + stroke-width: 2; +} +@-webkit-keyframes prism-previewer-time { + 0% { + stroke-dasharray: 0, 500; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 100, 500; + stroke-dashoffset: 0; + } + 100% { + stroke-dasharray: 0, 500; + stroke-dashoffset: -100; + } +} + +@-o-keyframes prism-previewer-time { + 0% { + stroke-dasharray: 0, 500; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 100, 500; + stroke-dashoffset: 0; + } + 100% { + stroke-dasharray: 0, 500; + stroke-dashoffset: -100; + } +} + +@-moz-keyframes prism-previewer-time { + 0% { + stroke-dasharray: 0, 500; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 100, 500; + stroke-dashoffset: 0; + } + 100% { + stroke-dasharray: 0, 500; + stroke-dashoffset: -100; + } +} + +@keyframes prism-previewer-time { + 0% { + stroke-dasharray: 0, 500; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 100, 500; + stroke-dashoffset: 0; + } + 100% { + stroke-dasharray: 0, 500; + stroke-dashoffset: -100; + } +} + +.prism-previewer-time:before { + border-radius: 50%; + background: #fff; +} +.prism-previewer-time:after { + margin-top: 4px; +} +.prism-previewer-time svg { + width: 32px; + height: 32px; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.prism-previewer-time circle { + fill: transparent; + stroke: hsl(200, 10%, 20%); + stroke-opacity: 0.9; + stroke-width: 32; + stroke-dasharray: 0, 500; + stroke-dashoffset: 0; + -webkit-animation: prism-previewer-time linear infinite 3s; + -moz-animation: prism-previewer-time linear infinite 3s; + -o-animation: prism-previewer-time linear infinite 3s; + animation: prism-previewer-time linear infinite 3s; +} +.prism-previewer-angle:before { + border-radius: 50%; + background: #fff; +} +.prism-previewer-angle:after { + margin-top: 4px; +} +.prism-previewer-angle svg { + width: 32px; + height: 32px; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.prism-previewer-angle[data-negative] svg { + -webkit-transform: scaleX(-1) rotate(-90deg); + -moz-transform: scaleX(-1) rotate(-90deg); + -ms-transform: scaleX(-1) rotate(-90deg); + -o-transform: scaleX(-1) rotate(-90deg); + transform: scaleX(-1) rotate(-90deg); +} +.prism-previewer-angle circle { + fill: transparent; + stroke: hsl(200, 10%, 20%); + stroke-opacity: 0.9; + stroke-width: 32; + stroke-dasharray: 0, 500; +} diff --git a/web/app/css/themes/dark.css b/web/app/css/themes/dark.css index 1d4ab1c..19528c8 100644 --- a/web/app/css/themes/dark.css +++ b/web/app/css/themes/dark.css @@ -26,54 +26,24 @@ body { margin-right: 4px; } -pre { - background: #222; - border: #222; - color: #ddd; +#viewer pre, #viewer code, #revisions pre, #revisions code { + background: none !important; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; -} - -pre ol { - padding-left: 50px !important; -} - -pre li:hover { - background: #444; + border: 0; } .panel-heading .actions { margin-top: -5px; } -div.diff { +.diff { display: none; } -.de1 { - padding-left: 5px; - padding-right: 5px; -} - -.li1 { - background: #333; -} - -.re8 { - color: #52F700; -} - -.kw3 { - color: #C6C765; -} - -#viewer .syntaxhighlighter td { - vertical-align: top !important; -} - #options { margin-bottom: 17px; } diff --git a/web/app/css/themes/light.css b/web/app/css/themes/light.css index 372b65f..9c07b5b 100644 --- a/web/app/css/themes/light.css +++ b/web/app/css/themes/light.css @@ -16,54 +16,24 @@ margin-right: 4px; } -pre { - background: #222; - border: #222; - color: #ddd; - white-space: pre-wrap; - white-space: -moz-pre-wrap; - white-space: -pre-wrap; - white-space: -o-pre-wrap; - word-wrap: break-word; -} - -pre ol { - padding-left: 50px !important; -} - -pre li:hover { - background: #444; +pre, code { + background: none !important; + white-space: pre-wrap !important; + white-space: -moz-pre-wrap !important; + white-space: -pre-wrap !important; + white-space: -o-pre-wrap !important; + word-wrap: break-word !important; + border: 0; } .panel-heading .actions { margin-top: -5px; } -div.diff { +.diff { display: none; } -.de1 { - padding-left: 5px; - padding-right: 5px; -} - -.li1 { - background: #333; -} - -.re8 { - color: #52F700; -} - -.kw3 { - color: #C6C765; -} - -#viewer .syntaxhighlighter td { - vertical-align: top !important; -} - #options { margin-bottom: 17px; } diff --git a/web/app/js/app.js b/web/app/js/app.js index 671d102..a3624fc 100644 --- a/web/app/js/app.js +++ b/web/app/js/app.js @@ -138,7 +138,7 @@ var getKey = function() { } var viewerEvents = function() { - var $render = $('.syntaxhighlighter'); + var $render = $('#viewer code[data-cipher]'); $(document).ready(function() { var key = getKey(); @@ -163,7 +163,8 @@ var viewerEvents = function() { }); $render.text(decrypted.toString(CryptoJS.enc.Utf8)); - SyntaxHighlighter.all(); + $render.attr('class', $render.data('class')); + Prism.highlightAll(); to = ' data-key="#key=' + key + '" '; } else { diff --git a/web/app/js/prism.js b/web/app/js/prism.js new file mode 100644 index 0000000..bfb1dca --- /dev/null +++ b/web/app/js/prism.js @@ -0,0 +1,29 @@ +/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+actionscript+c+aspnet+bash+cpp+csharp+css-extras+diff+perl+php+php-extras+python+sql+yaml&plugins=line-highlight+line-numbers+autolinker+previewer-base+previewer-color+previewer-gradient+previewer-easing+previewer-time+previewer-angle */ +var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof s)){h.lastIndex=0;var _=h.exec(w),P=1;if(!_&&m&&b!=t.length-1){if(h.lastIndex=k,_=h.exec(e),!_)break;for(var A=_.index+(d?_[1].length:0),j=_.index+_[0].length,x=b,O=k,S=t.length;S>x&&(j>O||!t[x].type&&!t[x-1].greedy);++x)O+=t[x].length,A>=O&&(++b,k=O);if(t[b]instanceof s||t[x-1].greedy)continue;P=x-b,w=e.slice(k,O),_.index-=k}if(_){d&&(p=_[1].length);var A=_.index+p,_=_[0].slice(p),j=A+_.length,N=w.slice(0,A),C=w.slice(j),E=[b,P];N&&(++b,k+=N.length,E.push(N));var I=new s(u,f?n.tokenize(_,f):_,y,_,m);if(E.push(I),C&&E.push(C),Array.prototype.splice.apply(t,E),1!=P&&n.matchGrammar(e,t,a,b,k,!0,u),l)break}else if(l)break}}}}},tokenize:function(e,t){var a=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}return n.matchGrammar(e,a,t,0,0,!1),a},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""+i.tag+">"},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,n.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); +Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\s\S])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\s\S]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; +Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(