Skip to content

Feature/html formatting #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

Feature/html formatting #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a607600
Use sans-serif font for body copy
Antaris Feb 12, 2019
8a43da9
Use monospace font for code items
Antaris Feb 12, 2019
0184838
Switch to OS default fonts, and adjust icon position/text size
Antaris Feb 12, 2019
a46c5db
Basic code syntax highlighting
Antaris Feb 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 25 additions & 16 deletions src/Generator/Generators/HtmlOmdGenerator.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
using System;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
Expand Down Expand Up @@ -209,7 +209,7 @@ public void WriteType(INamedTypeSymbol type, INamedTypeSymbol oldType)
if (type.GetInterfaces(oldType).Any())
{
isEmpty = false;
sw.Write("<br/>Implements ");
sw.Write("<br/>Implements <span class='code'>");
Copy link
Owner

@dotMorten dotMorten Feb 12, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather we don't monospace it all.

int i = 0;
foreach(var iface in type.GetInterfaces(oldType))
{
Expand All @@ -220,6 +220,7 @@ public void WriteType(INamedTypeSymbol type, INamedTypeSymbol oldType)
if (iface.wasRemoved) sw.Write("</span>");
i++;
}
sw.Write("</span>"); // MA - End <span class="code>.../span>
}
sw.WriteLine("</div>"); //End header box

Expand Down Expand Up @@ -261,7 +262,7 @@ private string GetIcon(ISymbol type, string content)
}
if (icon == "")
return content;
return $"<li class='{icon}'>{content}</li>";
return $"<li class='{icon} code'>{content}</li>";
Copy link
Owner

@dotMorten dotMorten Feb 12, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's a good idea to create a style users can easily override, but not sure this should be the style name, or that it should default to a mono-space font.

}

public void WriteEnum(INamedTypeSymbol enm) => WriteEnum(enm, null);
Expand Down Expand Up @@ -295,7 +296,7 @@ private string FormatType(ITypeSymbol type)
if (p.Kind == SymbolDisplayPartKind.Punctuation || p.Kind == SymbolDisplayPartKind.Space)
t += System.Web.HttpUtility.HtmlEncode(p.ToString());
else if (p.Symbol is ITypeSymbol its)
t += LinkifyType(its, false);
t += $"<span class='type'>{LinkifyType(its, false)}</span>";
else
{

Expand All @@ -304,7 +305,11 @@ private string FormatType(ITypeSymbol type)
return t;
}
else {
return LinkifyType(type);
if (parts[0].Kind == SymbolDisplayPartKind.Keyword)
{
return $"<span class='keyword'>{LinkifyType(type)}</span>";
}
return $"<span class='type'>{LinkifyType(type)}</span>";
}
}

Expand All @@ -316,27 +321,29 @@ private string LinkifyType(ITypeSymbol type, bool includeGeneric = true)
}
var name = includeGeneric ? type.ToDisplayString(SymbolDisplayFormat.MinimallyQualifiedFormat) : type.Name;
if (allSymbols.Contains(type))
return $"<a href='#{type.GetFullTypeName()}'>{System.Web.HttpUtility.HtmlEncode(name)}</a>";
return $"<a class='type' href='#{type.GetFullTypeName()}'>{System.Web.HttpUtility.HtmlEncode(name)}</a>";
else
return Briefify(type, name);
}

private static string AccessorToString(Accessibility a)
{
string format = "<span class='keyword'>{0}</span>";

switch(a)
{
case Accessibility.Public:
return "public";
return string.Format(format, "public");
case Accessibility.Private:
return "private";
return string.Format(format, "private");
case Accessibility.Internal:
return "internal";
return string.Format(format, "internal");
case Accessibility.Protected:
return "protected";
return string.Format(format, "protected");
case Accessibility.ProtectedOrInternal:
return GeneratorSettings.ShowInternalMembers ? "protected internal" : "protected";
return string.Format(format, GeneratorSettings.ShowInternalMembers ? "protected internal" : "protected");
case Accessibility.ProtectedAndInternal:
return "private protected";
return string.Format(format, "private protected");
default:
return string.Empty;
}
Expand All @@ -363,7 +370,7 @@ private string FormatMember(ISymbol member)
{
name += AccessorToString(p.GetMethod.DeclaredAccessibility) + " ";
}
name += "get; ";
name += "<span class='keyword'>get</span>; ";
}
if (p.SetMethod != null && ((p.SetMethod.DeclaredAccessibility == Accessibility.Public || p.SetMethod.DeclaredAccessibility == Accessibility.Protected || p.SetMethod.DeclaredAccessibility == Accessibility.ProtectedOrInternal) ||
(GeneratorSettings.ShowInternalMembers && p.SetMethod.DeclaredAccessibility == Accessibility.Internal || p.SetMethod.DeclaredAccessibility == Accessibility.ProtectedAndInternal) ||
Expand All @@ -373,7 +380,7 @@ private string FormatMember(ISymbol member)
{
name += AccessorToString(p.SetMethod.DeclaredAccessibility) + " ";
}
name += "set; ";
name += "<span class='keyword'>set</span>; ";
}

name += "} : " + FormatType(p.Type);
Expand All @@ -382,11 +389,13 @@ private string FormatMember(ISymbol member)
{
if (m.TypeArguments.Any())
{
name += System.Web.HttpUtility.HtmlEncode("<" + string.Join(", ", m.TypeArguments.Select(t => t.ToDisplayString())) + ">");
name += System.Web.HttpUtility.HtmlEncode("<")
+ string.Join(", ", m.TypeArguments.Select(t => $"<span class='type'>{t.ToDisplayString()}</span>"))
+ System.Web.HttpUtility.HtmlEncode(">");
}

name += "(";
name += string.Join(", ", m.Parameters.Select(pr => FormatType(pr.Type) + " " + Briefify(pr) + (pr.HasExplicitDefaultValue ? (" = " + (pr.ExplicitDefaultValue?.ToString() ?? "null")) : "")));
name += string.Join(", ", m.Parameters.Select(pr => FormatType(pr.Type) + " " + Briefify(pr) + (pr.HasExplicitDefaultValue ? (" = " + (pr.ExplicitDefaultValue?.ToString() ?? "<span class='keyword'>null</span>")) : "")));
name += ")";
if (!m.ReturnsVoid)
{
Expand Down
12 changes: 8 additions & 4 deletions src/Generator/Generators/HtmlOmdHeader.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,30 @@
<meta charset="utf-8" />
<title>OMD</title>
<style>
body { padding: 0; }
body { padding: 0; font-family: "Segoe UI", Helvetica, Arial, sans-serif }
ul { list-style:none; padding-left: 20px; margin-right:10px; }
.objectBox { border-style:solid; border-width:1px; margin:10px; float:left; border-radius:10px;}
.objectBox > .header { font-size:10px; padding:10px; border-radius:10px 10px 0 0;}
.objectBox > .header > .code { font-size:10px; }
.objectBox > .header.noMembers { border-radius: 10px; }
.objectBox > .header > span { font-size:20px; }
.objectBox > .header > span:not(.code) { font-size:20px; }
.code { font-family: "Consolas", "Courier New", "Courier", monospace; font-size: 14px; }
Copy link
Owner

@dotMorten dotMorten Feb 12, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer a sans-serif style font here as default

.class { background: linear-gradient(to right, rgb(211, 220, 239), white); }
.struct { background: linear-gradient(to right, rgb(211, 220, 239), white); }
.enum { background: linear-gradient(to right, rgb(221, 214, 239), white); }
.interface { background: linear-gradient(to right, rgb(231, 240, 220), white); }
.delegate { background: linear-gradient(to right, rgb(237, 218, 220), white); }
.keyword { color: blue; }
.type { color: #2C91AF; }

.members > h4 { font-size:14px; background:rgb(240, 242, 239); display:block; padding:5px; margin:0; font-weight:normal; }
.typeExisting { border-color:#ddd; }
.typeRemoved { border-color:red; border-style:dashed; border-width:3px; text-decoration: line-through;border-style:dashed; border-width:3px; }
.memberRemoved { color: red; text-decoration: line-through; }

.static { background-image: url(data:image/gif;base64,R0lGODlhDQAKAPcPAOhfF/nXxfbDqOx9Q/GbbvOvi/Klffvh0+6HUe+RYOlpJutzNPjNtvzr4v718AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAA8ALAAAAAANAAoAAAhMAB8IDJBAAYCDBxccEGgAocODAQQ+LBCAQYEBER88RCDAgcCPBB4e5PjxgYABIgEQELjwQYOTDyUOMCAgQEiHElMeLCCw4MMFBCIGBAA7); background-repeat: no-repeat; background-position: left center; margin-left:-35px; padding-left:35px; }
.static { background-image: url(data:image/gif;base64,R0lGODlhDQAKAPcPAOhfF/nXxfbDqOx9Q/GbbvOvi/Klffvh0+6HUe+RYOlpJutzNPjNtvzr4v718AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAA8ALAAAAAANAAoAAAhMAB8IDJBAAYCDBxccEGgAocODAQQ+LBCAQYEBER88RCDAgcCPBB4e5PjxgYABIgEQELjwQYOTDyUOMCAgQEiHElMeLCCw4MMFBCIGBAA7); background-repeat: no-repeat; background-position: left 3px; margin-left:-35px; padding-left:35px; }

.members li { background-repeat: no-repeat; padding-left:20px; background-position: left center; }
.members li { background-repeat: no-repeat; padding-left:20px; background-position: left 2px; }
Copy link
Owner

@dotMorten dotMorten Feb 12, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch on the vertical alignment! 👍

.pubevent { background-image: url(data:image/gif;base64,R0lGODlhCgAMANU3APzksP7y2ebl4u+9kOvj1Pf39vDGkunm4V5HMIyCXOLd1a6XYN7YzpeDU+fQiZVvH+qwf6eUYFhTS8/Bofbv0/jz3vv6+Nva1Ih6SuilfObPienl36CLRsC5pKyXamtPKWpiSN3Mjp94HciyeIxoIumqfuXg1+mggefj3q2CIPXAbsq+n93FguXh2vn048a4kPLMlHlsRu7Cif/kf/rRdufIWeGHgv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADcALAAAAAAKAAwAAAZXwNvNFXJoWCPPRFgDzGQZm6Rwq9QCtJINJGACaBAbpnujXFU2zkV4q81msMHJhtjcFo1Ygmb7mNgWL3wkDGw3K3wPLYYEBjYiCoY3HQMpKJI3BBEHmDdBADs=); padding-left:20px; background-position: left center; }
.protevent { background-image: url(data:image/gif;base64,R0lGODlhEAAQAOZPAOGHgt28WvjYaOfIWaOALvrRdtO4f+7AL//kf8ipX49uIu3iyubl4vDr3//PMvzksO+9kP7y2a6XYN3Mjufj3umggaaFOJVvH93FgvDo1uTbxu7blvXssnlsRvv6+Pbv0/f39u7CiaCLRu7q3oyCXMiyeMuvdWtPKefQia2CIOjIXdva1OmqfvXrrufXs5eDU/by6V5HMOnl36eUYObPicq+n8a4kFhTS8Cyj+ilfOXh2oh6Ss/Bofn046yXauvj1OXTq4xrH4xoIuLd1eqwf+Xg1/71rPLMlN7Yzp94Hfjz3mpiSPXAbunm4fDGkv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAE8ALAAAAAAQABAAAAeRgE+Cg4SFhoM9Eyg0GCU+PIdPAw8IITkANyCHSgMRBSwASwyRkwVEADujhx+dTAAiK5GSCAhHEBUAMTKCCwYmCUASLx0kBQAnRbwGHAICFi4eNsZCSIMGLUZBAQ4ENcYXOoQGGwIBAQcETgBJQ4UZCQ4C6DgQKRSHGgECBCM/M02y9KGTNSiACgUNCAqCgVBhIAA7); }
.privevent { background-image: url(data:image/gif;base64,R0lGODlhEAAQAOZYAOGHgt/j6ufIWfrRdqy3y0FLWMnQ3crR3sjO2f/kf+Pm6vDy9PzksKCrwrK7zv7y2bjA0r7H1ubl4tLX4v///4h6Suqwf21/lvXAbunm4enl38a4kGpiSJCetN3Mjldqgp94Hfbv0/n044yCXHuJneLd1bvD1IxoIubPifLMlPjz3mR2jd7YzufQide4kpinvMTM2l5widva1HWFnOilfKeUZayXaqCLRumqfsTM2e7CiW+Al4eUpVhTS++9kJeDU+mggbvF1GdRPGR2jrG6zW5SLefj3sC4nuXh2t3Fgq2CIOXg13qKociyeE9jfGN1jb3G1qu3y3lsRs/BobjB0md3kE9ie5VvH////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAFgALAAAAAAQABAAAAehgFiCg4SFhoMiHi0oSU02U4dYAgwJOjQAPRSHKgIPAzgAHBKRkwMWABWjhyGdGAA3MpqHAgkJKT5AAEIaggsHEEQENT9SIwMARUuDBwEEDVBMWBvHJyyDCzkvggQ7R8dXSIQKQR0GBitDLgAgJYUGAfABExFPSkaGJgEF+xMQPBmHCARAUAABAgckIjU4ACMCFQdRrERSMONClRgfnCiIFAgAOw==); }
Expand Down