fixes to multi line statements, added back fonts, updated docs

chanan · Jun 17, 2019 · 7081df6 · 7081df6
1 parent ebde43d
commit 7081df6
Show file tree

Hide file tree

Showing 22 changed files with 173 additions and 79 deletions.
diff --git a/BlazorPrettyCode.sln b/BlazorPrettyCode.sln
@@ -3,9 +3,9 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 16
 VisualStudioVersion = 16.0.28917.182
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorPrettyCode", "src\BlazorPrettyCode\BlazorPrettyCode.csproj", "{9278DC09-C837-46B3-BF45-DE0133988991}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorPrettyCode", "src\BlazorPrettyCode\BlazorPrettyCode.csproj", "{9278DC09-C837-46B3-BF45-DE0133988991}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Sample", "src\Sample\Sample.csproj", "{474B654D-7BCA-49AC-9423-BE77BA9F0F57}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sample", "src\Sample\Sample.csproj", "{474B654D-7BCA-49AC-9423-BE77BA9F0F57}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

diff --git a/docs/_framework/_bin/BlazorPrettyCode.dll b/docs/_framework/_bin/BlazorPrettyCode.dll
diff --git a/docs/_framework/_bin/BlazorPrettyCode.pdb b/docs/_framework/_bin/BlazorPrettyCode.pdb
diff --git a/docs/_framework/_bin/CSHTMLTokenizer.dll b/docs/_framework/_bin/CSHTMLTokenizer.dll
diff --git a/docs/_framework/_bin/Mono.Security.dll b/docs/_framework/_bin/Mono.Security.dll
diff --git a/docs/_framework/_bin/Sample.dll b/docs/_framework/_bin/Sample.dll
diff --git a/docs/_framework/_bin/Sample.pdb b/docs/_framework/_bin/Sample.pdb
diff --git a/docs/_framework/_bin/System.Core.dll b/docs/_framework/_bin/System.Core.dll
diff --git a/docs/_framework/_bin/System.Net.Http.dll b/docs/_framework/_bin/System.Net.Http.dll
diff --git a/docs/_framework/_bin/System.dll b/docs/_framework/_bin/System.dll
diff --git a/docs/_framework/_bin/mscorlib.dll b/docs/_framework/_bin/mscorlib.dll
diff --git a/docs/snippets/hover.html b/docs/snippets/hover.html
@@ -0,0 +1,20 @@
+<div class="@hover">
+    Hover to change color.
+</div>
+
+@code {
+    private string color = "white";
+
+    protected override async Task OnInitAsync()
+    {
+        hover = await Styled.Css($@"
+            padding: 32px;
+            background-color: hotpink;
+            font-size: 24px;
+            border-radius: 4px;
+            &:hover {{
+                color: {color};
+            }}
+        ");
+    }
+}
diff --git a/docs/snippets/usingSimple.html b/docs/snippets/usingSimple.html
@@ -0,0 +1 @@
+<PrettyCode CodeFile="snippets/usingSimple.html" />
diff --git a/src/BlazorPrettyCode/BlazorPrettyCode.csproj b/src/BlazorPrettyCode/BlazorPrettyCode.csproj
@@ -11,7 +11,7 @@
     <RazorLangVersion>3.0</RazorLangVersion>
     <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
     <PackageId>BlazorPrettyCode</PackageId>
-    <Version>1.0.0-preview6-04</Version>
+    <Version>1.0.0-preview6-06</Version>
     <Authors>Chanan Braunstein</Authors>
     <Title>Blazor PrettyCode</Title>
     <Description>Razor Code Display Component</Description>
@@ -20,7 +20,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="CSHTMLTokenizer" Version="0.7.1" />
+    <PackageReference Include="CSHTMLTokenizer" Version="0.7.2" />
     <PackageReference Include="Microsoft.AspNetCore.Components.Browser" Version="3.0.0-preview6.19307.2" />
     <PackageReference Include="BlazorStyled" Version="1.0.0-preview6-02" />
   </ItemGroup>

diff --git a/src/BlazorPrettyCode/PrettyCode.cs b/src/BlazorPrettyCode/PrettyCode.cs
@@ -32,6 +32,7 @@ public class PrettyCode : ComponentBase
         private string _themeAttributeValueClass;
         private string _themeQuotedStringClass;
         private string _themeRazorKeywordClass;
+        private string _themeTextClass;
 
         //Non Theme css
         private string _basePreClass;
@@ -94,10 +95,10 @@ protected override async Task OnInitAsync()
             ITheme theme = Theme ?? DefaultConfig.DefaultTheme;
             _showLineNumbers = ShowLineNumbers ?? DefaultConfig.ShowLineNumbers;
 
-            /*foreach (string font in theme.Fonts)
+            foreach (string font in getFonts(theme))
             {
                 await Styled.Fontface(font);
-            }*/
+            }
 
             _themePreClass = await Styled.Css(getThemeValues(theme));
             _themeTagSymbolsClass = await Styled.Css(getThemeValues(theme, "Tag start/end"));
@@ -106,10 +107,31 @@ protected override async Task OnInitAsync()
             _themeAttributeValueClass = await Styled.Css(getThemeValues(theme, "Attribute value"));
             _themeQuotedStringClass = await Styled.Css(getThemeValues(theme, "String"));
             _themeRazorKeywordClass = await Styled.Css(getThemeValues(theme, "Razor Keyword"));
+            _themeTextClass = await Styled.Css(getThemeValues(theme, "Text"));
 
             _isInitDone = true;
         }
 
+        private List<string> getFonts(ITheme theme)
+        {
+            List<string> list = new List<string>();
+            List<ISetting> fonts = (from s in theme.Settings
+                                    where s.Name != null && s.Name.ToLower() == "font"
+                                    select s).ToList();
+
+            foreach(ISetting font in fonts)
+            {
+                StringBuilder sb = new StringBuilder();
+                foreach (KeyValuePair<string, string> kvp in font.Settings)
+                {
+                    sb.Append(kvp.Key).Append(':').Append(kvp.Value).Append(';');
+                }
+                list.Add(sb.ToString());
+            }
+
+            return list;
+        }
+
         private string getThemeValues(ITheme theme, string setting = null)
         {
             Dictionary<string, string> dictionary = new Dictionary<string, string>();
@@ -270,6 +292,14 @@ private void BuildRendeQuotedTag(RenderTreeBuilder builder, QuotedString quotedT
             string quote = GetQuoteChar(quotedTag.QuoteMark);
             if (quotedTag.LineType == LineType.SingleLine || quotedTag.LineType == LineType.MultiLineStart)
             {
+                if(quotedTag.IsMultiLineStatement)
+                {
+                    builder.OpenElement(Next(), "span");
+                    builder.AddAttribute(Next(), "class", _themeQuotedStringClass);
+                    builder.AddContent(Next(), '@');
+                    builder.CloseElement();
+                }
+
                 builder.OpenElement(Next(), "span");
                 builder.AddAttribute(Next(), "class", _themeQuotedStringClass);
                 builder.AddContent(Next(), quote);
@@ -381,7 +411,7 @@ private void BuildRenderStartTag(RenderTreeBuilder builder, StartTag startTag)
         private void BuildRenderText(RenderTreeBuilder builder, Text text)
         {
             builder.OpenElement(Next(), "span");
-            //builder.AddAttribute(Next(), "class", _textClass);
+            builder.AddAttribute(Next(), "class", _themeTextClass);
             builder.AddContent(Next(), text.Content);
             builder.CloseElement();
         }

diff --git a/src/BlazorPrettyCode/Themes/PrettyCodeDefault.cs b/src/BlazorPrettyCode/Themes/PrettyCodeDefault.cs
@@ -12,6 +12,15 @@ public class PrettyCodeDefault : ITheme
                 Settings = new Dictionary<string, string>
                 {
                     { "background-color", "rgba(238,238,238,0.92)" },
+                    { "color", "#000" },
+                    { "font-family", "Fira Code" }
+                }
+            },
+            new Setting
+            {
+                Name = "Text",
+                Settings = new Dictionary<string, string>
+                {
                     { "color", "#000" }
                 }
             },
@@ -64,44 +73,40 @@ public class PrettyCodeDefault : ITheme
                     { "background-color", "yellow" },
                     { "color", "black" }
                 }
-            }
-        };
+            },
+            new Setting
+            {
+                Name = "Font",
+                Settings = new Dictionary<string, string>
+                {
+                    { "font-family", "Fira Code" },
+                    { "font-style", "normal" },
+                    { "font-weight", "400" },
+                    { "src", @"url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Regular.eot')
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Regular.eot') format('embedded-opentype'), 
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff2/FiraCode-Regular.woff2') format('woff2'), 
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff/FiraCode-Regular.woff') format('woff'), 
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/ttf/FiraCode-Regular.ttf') format('truetype')" },
+                    { "unicode-range", "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }
+                }
+            },
+            new Setting
+            {
+                Name = "Font",
+                Settings = new Dictionary<string, string>
+                {
+                    { "font-family", "Fira Code" },
+                    { "font-style", "normal" },
+                    { "font-weight", "700" },
 
-        /*public string Pre => "background-color: rgba(238,238,238,0.92);font-family: Fira Code;";
-        public string TagSymbols => "color: #03c;";
-        public string TagName => @"color: #03c;
-                                   font-weight: bold;";
-        public string AttributeName => @"color: #36c;
-                                         font-style: italic;";
-        public string AttributeValue => "color: #093;";
-        public string Text => "color: #000;";
-        public string QuotedString => "color: #093;";
-        public string CSHtmlKeyword => @"background-color: yellow;
-                                         color: black;";
-        public List<string> Fonts => new List<string>
-        {
-            @"font-family: Fira Code;
-              font-style: normal;
-              font-weight: 400;
-              src: url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Regular.eot');
-              src: url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Regular.eot') format('embedded-opentype'), 
-                   url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff2/FiraCode-Regular.woff2') format('woff2'), 
-                   url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff/FiraCode-Regular.woff') format('woff'), 
-                   url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/ttf/FiraCode-Regular.ttf') format('truetype');
-              unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;",
-            @"font-family: Fira Code;
-              font-style: normal;
-              font-weight: 700;
-              src: url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Bold.eot');
-              src: url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Bold.eot') format('embedded-opentype'), 
-              url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff2/FiraCode-Bold.woff2') format('woff2'), 
-              url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff/FiraCode-Bold.woff') format('woff'), 
-              url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/ttf/FiraCode-Bold.ttf') format('truetype');
-              unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;"
+                    { "src", @"url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Bold.eot')
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Bold.eot') format('embedded-opentype'), 
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff2/FiraCode-Bold.woff2') format('woff2'), 
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff/FiraCode-Bold.woff') format('woff'), 
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/ttf/FiraCode-Bold.ttf') format('truetype')" },
+                    { "unicode-range", "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }
+                }
+            }
         };
-
-        public string Code => "font-family: Fira Code;";*/
-
-
     }
 }
diff --git a/src/BlazorPrettyCode/Themes/VisualStudioSolarizedLight.cs b/src/BlazorPrettyCode/Themes/VisualStudioSolarizedLight.cs
@@ -12,6 +12,15 @@ public class VisualStudioSolarizedLight : ITheme
                 Settings = new Dictionary<string, string>
                 {
                     { "background-color", "#FDF6E3" },
+                    { "color", "#000" },
+                    { "font-family", "Fira Code" }
+                }
+            },
+            new Setting
+            {
+                Name = "Text",
+                Settings = new Dictionary<string, string>
+                {
                     { "color", "#000" }
                 }
             },
@@ -64,41 +73,39 @@ public class VisualStudioSolarizedLight : ITheme
                     { "color", "black" }
                 }
             },
-        };
-
-        /*
-        public string Pre => "background-color: #FDF6E3;";
-        public string TagSymbols => "color: #93A1A1;";
-        public string TagName => "color: #268BD2;";
-        public string AttributeName => "color: #93A1A1;";
-        public string AttributeValue => "color: #2AA198;";
-        public string Text => "color: #000;";
-        public string QuotedString => "color: #2AA198;";
-        public string CSHtmlKeyword => @"background-color: yellow;
-                                         color: black;";
+            new Setting
+            {
+                Name = "Font",
+                Settings = new Dictionary<string, string>
+                {
+                    { "font-family", "Fira Code" },
+                    { "font-style", "normal" },
+                    { "font-weight", "400" },
+                    { "src", @"url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Regular.eot')
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Regular.eot') format('embedded-opentype'), 
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff2/FiraCode-Regular.woff2') format('woff2'), 
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff/FiraCode-Regular.woff') format('woff'), 
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/ttf/FiraCode-Regular.ttf') format('truetype')" },
+                    { "unicode-range", "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }
+                }
+            },
+            new Setting
+            {
+                Name = "Font",
+                Settings = new Dictionary<string, string>
+                {
+                    { "font-family", "Fira Code" },
+                    { "font-style", "normal" },
+                    { "font-weight", "700" },
 
-        public List<string> Fonts => new List<string>
-        {
-            @"font-family: Fira Code;
-              font-style: normal;
-              font-weight: 400;
-              src: url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Regular.eot');
-              src: url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Regular.eot') format('embedded-opentype'), 
-                   url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff2/FiraCode-Regular.woff2') format('woff2'), 
-                   url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff/FiraCode-Regular.woff') format('woff'), 
-                   url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/ttf/FiraCode-Regular.ttf') format('truetype');
-              unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;",
-            @"font-family: Fira Code;
-              font-style: normal;
-              font-weight: 700;
-              src: url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Bold.eot');
-              src: url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Bold.eot') format('embedded-opentype'), 
-              url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff2/FiraCode-Bold.woff2') format('woff2'), 
-              url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff/FiraCode-Bold.woff') format('woff'), 
-              url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/ttf/FiraCode-Bold.ttf') format('truetype');
-              unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;"
+                    { "src", @"url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Bold.eot')
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/eot/FiraCode-Bold.eot') format('embedded-opentype'), 
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff2/FiraCode-Bold.woff2') format('woff2'), 
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/woff/FiraCode-Bold.woff') format('woff'), 
+                               url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/ttf/FiraCode-Bold.ttf') format('truetype')" },
+                    { "unicode-range", "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" }
+                }
+            }
         };
-
-        public string Code => "font-family: Fira Code;";*/
     }
 }
diff --git a/src/Sample/Pages/Index.razor b/src/Sample/Pages/Index.razor
@@ -22,6 +22,7 @@
     <li>Themes in JSON files</li>
     <li>Collapse/Exapnd of code blocks</li>
     <li>Row highlighting</li>
+    <li>Responsive (more mobile friendly)</li>
 </ul>
 
 <h2>Dependent projects</h2>
@@ -37,6 +38,10 @@
 
 <PrettyCode CodeFile="snippets/startup.html" />
 
+<p>In your Blazor component or in <code>_imports.razor</code> import the component: <code>@@using BlazorPrettyCode</code> and add it to your page:</p>
+
+<PrettyCode CodeFile="snippets/usingSimple.html" />
+
 <h2>Demo</h2>
 
 <PrettyCode CodeFile="snippets/demo.html" />

diff --git a/src/Sample/Pages/Test.razor b/src/Sample/Pages/Test.razor
@@ -0,0 +1,5 @@
+@page "/test"
+
+<h3>Test</h3>
+
+<PrettyCode CodeFile="snippets/hover.html" />
diff --git a/src/Sample/Properties/launchSettings.json b/src/Sample/Properties/launchSettings.json
@@ -3,7 +3,7 @@
     "windowsAuthentication": false,
     "anonymousAuthentication": true,
     "iisExpress": {
-      "applicationUrl": "http://localhost:50486/",
+      "applicationUrl": "http://localhost:50487/",
       "sslPort": 0
     }
   },

diff --git a/src/Sample/wwwroot/snippets/hover.html b/src/Sample/wwwroot/snippets/hover.html
@@ -0,0 +1,20 @@
+<div class="@hover">
+    Hover to change color.
+</div>
+
+@code {
+    private string color = "white";
+
+    protected override async Task OnInitAsync()
+    {
+        hover = await Styled.Css($@"
+            padding: 32px;
+            background-color: hotpink;
+            font-size: 24px;
+            border-radius: 4px;
+            &:hover {{
+                color: {color};
+            }}
+        ");
+    }
+}
diff --git a/src/Sample/wwwroot/snippets/usingSimple.html b/src/Sample/wwwroot/snippets/usingSimple.html
@@ -0,0 +1 @@
+<PrettyCode CodeFile="snippets/usingSimple.html" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<PrettyCode CodeFile="snippets/usingSimple.html" />