Add syntax highlight to themes css

pablohirafuji · Sep 25, 2017 · 15dbef3 · 15dbef3
1 parent dcaa461
commit 15dbef3
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ You can define the theme either by copying and pasting the theme styles into you
 
 ### Copying and pasting the theme
 
-The theme and required styles can be found [here](https://github.com/pablohirafuji/elm-syntax-highlight/blob/master/themes.md).
+The theme and required styles can be found [here](https://pablohirafuji.github.io/elm-syntax-highlight/themes.html).
 
 ### Using `useTheme` helper
 

diff --git a/demo/Themes.elm b/demo/Themes.elm
@@ -1,5 +1,6 @@
 port module Themes exposing (..)
 
+import SyntaxHighlight as SH
 import SyntaxHighlight.Theme as Theme
 
 
@@ -32,7 +33,12 @@ init =
     , themesList
         (List.map
             (\( name, content ) ->
-                ThemeModel name (String.trim content)
+                ThemeModel
+                    name
+                    (SH.css (String.trim content)
+                        |> Result.map (SH.toStaticBlockHtml (Just 1))
+                        |> Result.withDefault (String.trim content)
+                    )
             )
             (requiredStyles :: Theme.all)
         )

diff --git a/demo/themes-template.html b/demo/themes-template.html
@@ -53,57 +53,7 @@
             }
 
             /* Monokai */
-            .elmsh {
-                background: #23241f;
-                color: #f8f8f2;
-            }
-
-            .elmsh-hl {
-                background: #0e0f0d;
-            }
-
-            .elmsh-add {
-                background: #003800;
-            }
-
-            .elmsh-del {
-                background: #380000;
-            }
-
-            .elmsh-strong {
-                font-weight: bold;
-            }
-
-            .elmsh-emphasis {
-                font-style: italic;
-            }
-
-            .elmsh1 {
-                color: #75715e;
-            }
-            .elmsh2 {
-                color: #e6db74;
-            }
-
-            .elmsh3 {
-                color: #f92672;
-            }
-
-            .elmsh4 {
-                color: #66d9ef;
-            }
-
-            .elmsh5 {
-                color: #a6e22e;
-            }
-
-            .elmsh6 {
-                color: #ae81ff;
-            }
-
-            .elmsh7 {
-                color: #fd971f;
-            }
+            .elmsh {color: #f8f8f2;background: #23241f;}.elmsh-hl {background: #343434;}.elmsh-add {background: #003800;}.elmsh-del {background: #380000;}.elmsh-comm {color: #75715e;}.elmsh1 {color: #ae81ff;}.elmsh2 {color: #e6db74;}.elmsh3 {color: #f92672;}.elmsh4 {color: #66d9ef;}.elmsh5 {color: #a6e22e;}.elmsh6 {color: #ae81ff;}.elmsh7 {color: #fd971f;}.elmsh-elm-ts, .elmsh-js-dk, .elmsh-css-p {font-style: italic;color: #66d9ef;}.elmsh-js-ce {font-style: italic;color: #a6e22e;}.elmsh-css-ar-i {font-weight: bold;color: #f92672;}
 
         </style>
     </head>

diff --git a/src/SyntaxHighlight.elm b/src/SyntaxHighlight.elm
@@ -212,7 +212,7 @@ To preview the themes, check out the [demo](https://pablohirafuji.github.io/elm-
 
 If you prefer to use CSS external stylesheet, you do **not** need this,
 just copy the theme CSS into your stylesheet.
-All themes can be found [here](https://github.com/pablohirafuji/elm-syntax-highlight/blob/master/themes.md).
+All themes can be found [here](https://pablohirafuji.github.io/elm-syntax-highlight/themes.html).
 
 -}
 useTheme : Theme -> Html msg