diff --git a/Website/ViewModels/BlogPostViewModel.cs b/Website/ViewModels/BlogPostViewModel.cs index 662ea2a..9ac80b2 100644 --- a/Website/ViewModels/BlogPostViewModel.cs +++ b/Website/ViewModels/BlogPostViewModel.cs @@ -1,6 +1,6 @@ using System; using Markdig; -using Markdig.SyntaxHighlighting; +using Pek.Markdig.HighlightJs; using Website.Models; namespace Website.ViewModels @@ -41,7 +41,7 @@ namespace Website.ViewModels //.UseAdvancedExtensions() .UseAutoLinks() .UseSoftlineBreakAsHardlineBreak() - .UseSyntaxHighlighting() + .UseHighlightJs() .Build(); public int Id { get; } diff --git a/Website/Website.csproj b/Website/Website.csproj index dbcaf70..911bf12 100644 --- a/Website/Website.csproj +++ b/Website/Website.csproj @@ -11,9 +11,9 @@ - + diff --git a/Website/wwwroot/css/blog.less b/Website/wwwroot/css/blog.less index 770d8a9..29a885b 100644 --- a/Website/wwwroot/css/blog.less +++ b/Website/wwwroot/css/blog.less @@ -1,18 +1,14 @@ @import "colours.less"; -.editor-colors { - border: 4px solid #fff; +code { background: #fff; border-radius: 4px; margin-bottom: 10px; overflow: auto; padding: 6px; - - pre { - margin: 0; - tab-size: 4; - -moz-tab-size: 4; - } + margin: 0; + tab-size: 4; + -moz-tab-size: 4; } .image { @@ -62,3 +58,92 @@ background: @Grey-300; } } + +/** + * Obsidian style + * ported by Alexander Marenin (http://github.com/ioncreature) + */ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #282b2e; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-selector-id { + color: #93c763; +} + +.hljs-number { + color: #ffcd22; +} + +.hljs { + color: #e0e2e4; +} + +.hljs-attribute { + color: #668bb0; +} + +.hljs-code, +.hljs-class .hljs-title, +.hljs-section { + color: white; +} + +.hljs-regexp, +.hljs-link { + color: #d39745; +} + +.hljs-meta { + color: #557182; +} + +.hljs-tag, +.hljs-name, +.hljs-bullet, +.hljs-subst, +.hljs-emphasis, +.hljs-type, +.hljs-built_in, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-addition, +.hljs-variable, +.hljs-template-tag, +.hljs-template-variable { + color: #8cbbad; +} + +.hljs-string, +.hljs-symbol { + color: #ec7600; +} + +.hljs-comment, +.hljs-quote, +.hljs-deletion { + color: #818e96; +} + +.hljs-selector-class { + color: #A082BD +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-doctag, +.hljs-title, +.hljs-section, +.hljs-type, +.hljs-name, +.hljs-strong { + font-weight: bold; +}