Fix code syntax highlighting caused by local theme version

Fixes #5
2018-09-08 00:28:50 +02:00 · 2018-09-08 00:28:50 +02:00 · 528463feeb
parent c0a3b4748b
commit 528463feeb
5 changed files with 209 additions and 4 deletions
--- a/mkdocs.yml
+++ b/mkdocs.yml
@ -1,6 +1,4 @@
 site_name: NewPipe Documentation
 theme:
    name: readthedocs
-    custom_dir: theme 
-markdown_extensions:
-   - fenced_code
+    custom_dir: theme
--- a/theme/css/github.min.css
+++ b/theme/css/github.min.css
@ -0,0 +1,62 @@
+.hljs {
+ display:block;
+ overflow-x:auto;
+ padding:1em;
+ color:#333;
+ background:#f8f8f8
+}
+.hljs-comment,.hljs-quote {
+ color:#998;
+ font-style:italic
+}
+.hljs-keyword,.hljs-selector-tag,.hljs-subst {
+ color:#333;
+ font-weight:bold
+}
+.hljs-number,.hljs-literal,.hljs-variable,.hljs-template-variable,.hljs-tag .hljs-attr {
+ color:#008080
+}
+.hljs-string,.hljs-doctag {
+ color:#d14
+}
+.hljs-title,.hljs-section,.hljs-selector-id {
+ color:#900;
+ font-weight:bold
+}
+.hljs-subst {
+ font-weight:normal
+}
+.hljs-type,.hljs-class .hljs-title {
+ color:#458;
+ font-weight:bold
+}
+.hljs-tag,.hljs-name,.hljs-attribute {
+ color:#000080;
+ font-weight:normal
+}
+.hljs-regexp,.hljs-link {
+ color:#009926
+}
+.hljs-symbol,.hljs-bullet {
+ color:#990073
+}
+.hljs-built_in,.hljs-builtin-name {
+ color:#0086b3
+}
+.hljs-meta {
+ color:#999;
+ font-weight:bold
+}
+.hljs-deletion {
+ background:#fdd
+}
+.hljs-addition {
+ background:#dfd
+}
+.hljs-emphasis {
+ font-style:italic
+}
+.hljs-strong {
+ font-weight:bold
+}
+
--- a/theme/css/highlight.css
+++ b/theme/css/highlight.css
@ -0,0 +1,115 @@
+.codehilite code, .codehilite pre{color:#3F3F3F;background-color:#F7F7F7;
+overflow: auto;
+box-sizing: border-box;
+
+    padding: 0.01em 16px;
+    padding-top: 0.01em;
+    padding-right-value: 16px;
+    padding-bottom: 0.01em;
+    padding-left-value: 16px;
+    padding-left-ltr-source: physical;
+    padding-left-rtl-source: physical;
+    padding-right-ltr-source: physical;
+    padding-right-rtl-source: physical;
+
+border-radius: 16px !important;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    border-bottom-right-radius: 16px;
+    border-bottom-left-radius: 16px;
+
+border: 1px solid #CCC !important;
+    border-top-width: 1px;
+    border-right-width-value: 1px;
+    border-right-width-ltr-source: physical;
+    border-right-width-rtl-source: physical;
+    border-bottom-width: 1px;
+    border-left-width-value: 1px;
+    border-left-width-ltr-source: physical;
+    border-left-width-rtl-source: physical;
+    border-top-style: solid;
+    border-right-style-value: solid;
+    border-right-style-ltr-source: physical;
+    border-right-style-rtl-source: physical;
+    border-bottom-style: solid;
+    border-left-style-value: solid;
+    border-left-style-ltr-source: physical;
+    border-left-style-rtl-source: physical;
+    border-top-color: #CCC;
+    border-right-color-value: #CCC;
+    border-right-color-ltr-source: physical;
+    border-right-color-rtl-source: physical;
+    border-bottom-color: #CCC;
+    border-left-color-value: #CCC;
+    border-left-color-ltr-source: physical;
+    border-left-color-rtl-source: physical;
+    -moz-border-top-colors: none;
+    -moz-border-right-colors: none;
+    -moz-border-bottom-colors: none;
+    -moz-border-left-colors: none;
+    border-image-source: none;
+    border-image-slice: 100% 100% 100% 100%;
+    border-image-width: 1 1 1 1;
+    border-image-outset: 0 0 0 0;
+    border-image-repeat: stretch stretch;}
+.codehilite .hll { background-color: #ffffcc }
+.codehilite .c { color: #999988; font-style: italic } /* Comment */
+.codehilite .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.codehilite .k { color: #000000; font-weight: bold } /* Keyword */
+.codehilite .o { color: #000000; font-weight: bold } /* Operator */
+.codehilite .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.codehilite .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
+.codehilite .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.codehilite .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.codehilite .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.codehilite .ge { color: #000000; font-style: italic } /* Generic.Emph */
+.codehilite .gr { color: #aa0000 } /* Generic.Error */
+.codehilite .gh { color: #999999 } /* Generic.Heading */
+.codehilite .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.codehilite .go { color: #888888 } /* Generic.Output */
+.codehilite .gp { color: #555555 } /* Generic.Prompt */
+.codehilite .gs { font-weight: bold } /* Generic.Strong */
+.codehilite .gu { color: #aaaaaa } /* Generic.Subheading */
+.codehilite .gt { color: #aa0000 } /* Generic.Traceback */
+.codehilite .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+.codehilite .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+.codehilite .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+.codehilite .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+.codehilite .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+.codehilite .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.codehilite .m { color: #009999 } /* Literal.Number */
+.codehilite .s { color: #d01040 } /* Literal.String */
+.codehilite .na { color: #008080 } /* Name.Attribute */
+.codehilite .nb { color: #0086B3 } /* Name.Builtin */
+.codehilite .nc { color: #445588; font-weight: bold } /* Name.Class */
+.codehilite .no { color: #008080 } /* Name.Constant */
+.codehilite .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+.codehilite .ni { color: #800080 } /* Name.Entity */
+.codehilite .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.codehilite .nf { color: #990000; font-weight: bold } /* Name.Function */
+.codehilite .nl { color: #990000; font-weight: bold } /* Name.Label */
+.codehilite .nn { color: #555555 } /* Name.Namespace */
+.codehilite .nt { color: #000080 } /* Name.Tag */
+.codehilite .nv { color: #008080 } /* Name.Variable */
+.codehilite .ow { color: #000000; font-weight: bold } /* Operator.Word */
+.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
+.codehilite .mf { color: #009999 } /* Literal.Number.Float */
+.codehilite .mh { color: #009999 } /* Literal.Number.Hex */
+.codehilite .mi { color: #009999 } /* Literal.Number.Integer */
+.codehilite .mo { color: #009999 } /* Literal.Number.Oct */
+.codehilite .sb { color: #d01040 } /* Literal.String.Backtick */
+.codehilite .sc { color: #d01040 } /* Literal.String.Char */
+.codehilite .sd { color: #d01040 } /* Literal.String.Doc */
+.codehilite .s2 { color: #d01040 } /* Literal.String.Double */
+.codehilite .se { color: #d01040 } /* Literal.String.Escape */
+.codehilite .sh { color: #d01040 } /* Literal.String.Heredoc */
+.codehilite .si { color: #d01040 } /* Literal.String.Interpol */
+.codehilite .sx { color: #d01040 } /* Literal.String.Other */
+.codehilite .sr { color: #009926 } /* Literal.String.Regex */
+.codehilite .s1 { color: #d01040 } /* Literal.String.Single */
+.codehilite .ss { color: #990073 } /* Literal.String.Symbol */
+.codehilite .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.codehilite .vc { color: #008080 } /* Name.Variable.Class */
+.codehilite .vg { color: #008080 } /* Name.Variable.Global */
+.codehilite .vi { color: #008080 } /* Name.Variable.Instance */
+.codehilite .il { color: #009999 } /* Literal.Number.Integer.Long */
--- a/theme/js/highlight.min.js
+++ b/theme/js/highlight.min.js
--- a/theme/main.html
+++ b/theme/main.html
@ -2,19 +2,46 @@

 {# 
  Override the stylesheets loading fonts from fonts.googleapis.com to prevent tracking
-  The stylesheet
  This issue was discussed at https://github.com/TeamNewPipe/tutorial/issues/1
  You can find the original file at https://github.com/mkdocs/mkdocs/blob/master/mkdocs/themes/readthedocs/base.html
+  
+  While fixing the syntax highlighting (see https://github.com/TeamNewPipe/documentation/issues/5)
+  I saw that some   of the required scripts come from https://cdnjs.cloudflare.com.
+  The libs block fixes most of this - except for some less frequently (and not by NewPipe or NewPipe Extractor) used languages. I kept the CDN script as fallback for these languages.
 #}

 {%- block styles %}
+  <!-- local fonts -->
  <link rel="stylesheet" href="{{ base_url }}/css/local_fonts.css" type="text/css" />

  <link rel="stylesheet" href="{{ base_url }}/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="{{ base_url }}/css/theme_extra.css" type="text/css" />
+  <!-- local code syntax highlighting -->
+  <link rel="stylesheet" href="{{ base_url }}/css/github.min.css" type="text/css" />
  <link rel="stylesheet" href="{{ base_url }}/css/highlight.css" type="text/css" />
+  

  {%- for path in extra_css %}
  <link href="{{ path }}" rel="stylesheet">
  {%- endfor %}
 {%- endblock %}
+
+{%- block libs %}
+  {% if page %}
+  <script>
+    // Current page data
+    var mkdocs_page_name = {{ page.title|tojson|safe }};
+    var mkdocs_page_input_path = {{ page.file.src_path|string|tojson|safe }};
+    var mkdocs_page_url = {{ page.abs_url|tojson|safe }};
+  </script>
+  {% endif %}
+  <script src="{{ 'js/jquery-2.1.1.min.js'|url }}" defer></script>
+  <script src="{{ 'js/modernizr-2.8.3.min.js'|url }}" defer></script>
+  {%- if config.theme.highlightjs %}
+  <script src="{{ base_url }}/js/highlight.min.js"></script>
+  {%- for lang in config.theme.hljs_languages %}
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/{{lang}}.min.js"></script>
+  {%- endfor %}
+  <script>hljs.initHighlightingOnLoad();</script>
+  {%- endif %}
+{%- endblock %}