Merge pull request #41 from FernandoCelmer/35-feature

[Feature Request] Simple code syntax highlighting
FernandoCelmer · Jan 13, 2025 · c0b48a1 · c0b48a1
2 parents c3a0964 + 63ac15d
commit c0b48a1
Show file tree

Hide file tree

Showing 14 changed files with 130 additions and 17 deletions.
diff --git a/docs/index.md b/docs/index.md
@@ -1,4 +1,4 @@
-Jan 15, 2024
+Jan 1, 2025
 
 ---
 

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -1,7 +1,7 @@
 site_name: MkDocs Simple Blog
 repo_name: FernandoCelmer/mkdocs-simple-blog
 repo_url: https://github.com/FernandoCelmer/mkdocs-simple-blog
-site_url: https://www.fernandocelmer.com/
+site_url: https://www.fernandocelmer.com
 copyright: Fernando Celmer
 
 nav:
@@ -24,6 +24,9 @@ theme:
   theme_style: light
   site_name_style: normal
   title_style: bold
+  highlightjs: true
+    - yaml
+    - python
   colors:
     text: black
     title: black

diff --git a/mkdocs_simple_blog/assets/css/bootstrap.min.css b/mkdocs_simple_blog/assets/css/bootstrap.min.css
diff --git a/mkdocs_simple_blog/assets/css/main.min.css b/mkdocs_simple_blog/assets/css/main.min.css
diff --git a/mkdocs_simple_blog/base.html b/mkdocs_simple_blog/base.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html data-bs-theme="{{ config.theme.theme_style }}">
     <head>
         {%- block site_meta %}
             {%- block htmltitle %}
@@ -22,12 +22,13 @@
 
             {%- block libs %}
                 {%- if config.theme.highlightjs %}
-                    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
-
+                    <link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/base16/grayscale-dark.min.css">
+                    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+
                     {%- for lang in config.theme.hljs_languages %}
-                        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/languages/{{lang}}.min.js"></script>
+                        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/{{lang}}.min.js"></script>
                     {%- endfor %}
-                        <script>hljs.initHighlightingOnLoad();</script>
+                    <script>hljs.highlightAll();</script>
                 {%- endif %}
             {%- endblock %}
 

diff --git a/scripts/install_local.py b/scripts/install_local.py
@@ -11,7 +11,7 @@ def install_package() -> None:
     version = open(file='LAST_VERSION').read().replace('-', '.')
 
     main(['uninstall', 'mkdocs-simple-blog', '-y'])
-    main(['install', f'dist/mkdocs-simple-blog-{version}.tar.gz', '--no-cache-dir'])
+    main(['install', f'dist/mkdocs_simple_blog-{version}.tar.gz', '--no-cache-dir'])
 
 
 def build_package() -> None:

diff --git a/template/assets/css/bootstrap.css b/template/assets/css/bootstrap.css
diff --git a/template/assets/css/bootstrap.min.css b/template/assets/css/bootstrap.min.css
diff --git a/template/assets/css/grayscale-dark.css b/template/assets/css/grayscale-dark.css
@@ -0,0 +1,102 @@
+/*!
+  Theme: Grayscale Dark
+  Author: Alexandre Gavioli (https://github.com/Alexx2/)
+  License: ~ MIT (or more permissive) [via base16-schemes-source]
+  Maintainer: @highlightjs/core-team
+  Version: 2021.09.0css
+*/
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+code.hljs {
+  padding: 3px 5px;
+}
+.hljs {
+  color: #b9b9b9;
+  background: #101010;
+}
+.hljs ::selection,
+.hljs::selection {
+  background-color: #464646;
+  color: #b9b9b9;
+}
+.hljs-comment {
+  color: #525252;
+}
+.hljs-tag {
+  color: #ababab;
+}
+.hljs-operator,
+.hljs-punctuation,
+.hljs-subst {
+  color: #b9b9b9;
+}
+.hljs-operator {
+  opacity: 0.7;
+}
+.hljs-bullet,
+.hljs-deletion,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-template-variable,
+.hljs-variable {
+  color: #7c7c7c;
+}
+.hljs-attr,
+.hljs-link,
+.hljs-literal,
+.hljs-number,
+.hljs-symbol,
+.hljs-variable.constant_ {
+  color: #999;
+}
+.hljs-class .hljs-title,
+.hljs-title,
+.hljs-title.class_ {
+  color: #a0a0a0;
+}
+.hljs-strong {
+  font-weight: 700;
+  color: #a0a0a0;
+}
+.hljs-addition,
+.hljs-code,
+.hljs-string,
+.hljs-title.class_.inherited__ {
+  color: #8e8e8e;
+}
+.hljs-built_in,
+.hljs-doctag,
+.hljs-keyword.hljs-atrule,
+.hljs-quote,
+.hljs-regexp {
+  color: #868686;
+}
+.hljs-attribute,
+.hljs-function .hljs-title,
+.hljs-section,
+.hljs-title.function_,
+.ruby .hljs-property {
+  color: #686868;
+}
+.diff .hljs-meta,
+.hljs-keyword,
+.hljs-template-tag,
+.hljs-type {
+  color: #747474;
+}
+.hljs-emphasis {
+  color: #747474;
+  font-style: italic;
+}
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-meta .hljs-string {
+  color: #5e5e5e;
+}
+.hljs-meta .hljs-keyword,
+.hljs-meta-keyword {
+  font-weight: 700;
+}
diff --git a/template/assets/css/grayscale-dark.min.css b/template/assets/css/grayscale-dark.min.css
diff --git a/mkdocs_simple_blog/assets/css/main.css → template/assets/css/main.css b/mkdocs_simple_blog/assets/css/main.css → template/assets/css/main.css
@@ -48,7 +48,7 @@ figcaption {
 
 code {
     background-color: var(--primary);
-    color: var(--background)!important;
+    /* color: var(--background) !important; */
     padding: 0.4rem 0.8rem;
 }
 
@@ -57,7 +57,7 @@ pre {
     padding: 1.6rem;
     overflow-x: auto;
     color: #e5e5e5;
-    background-color: var(--primary);
+    /* background-color: var(--primary); */
     tab-size: 2;
     font-size: 0.775em;
     line-height: 30px;

diff --git a/template/assets/css/main.min.css b/template/assets/css/main.min.css
diff --git a/mkdocs_simple_blog/assets/js/main.js → template/assets/js/main.js b/mkdocs_simple_blog/assets/js/main.js → template/assets/js/main.js
diff --git a/template/assets/js/main.min.js b/template/assets/js/main.min.js