Here are some examples:
github.com's current sanitizer (Sanitize 2.0.4) respects self-closingtag syntax (because it is built on top of libxml2, an XML parser, andself-closing tags are an XML thing). So when this gets run throughSanitize 2.0.4, you end up with the following HTML:Here are some examples:
However, both Sanitize 3.x and the new sanitizer we're developing forgithub.com are based on an HTML-compliant parser rather than libxml2.HTML parsers treat this markup differently, and produce the following:Here are some examples:
Browsers do the exact same thing given this HTML, as you can see in theLive DOM Viewer[1].Forgetting to close a non-link anchor, or using self-closing tag syntax(which also leaves the tag unclosed) is not normally a problem. Browsersdon't apply any styles to these elements by default, so many web authorsnever even notice they've made this mistake. But github.com applies linkstyles to all anchor elements whether or not they're actually links, sothis mistake becomes very noticeable: suddenly large parts of yourdocument are blue!Changing all of github.com's CSS to only target a:link and a:visitedelements would be a huge change that is probably not worth the effort.Instead, we'll remove the link styles from non-link anchor elements inuser content.[1]: http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cp%3E%3Ca%20name%3D%22examples%22%20%2F%3E%3C%2Fp%3E%0A%3Ch2%3EExamples%3C%2Fh2%3E%0A%3Cp%3EHere%20are%20some%20examples%3A%3C%2Fp%3E%0A # v2.1.5 Fix emoji being shrunk by max-width on `img`This overrides the max-width set on `.markdown-body img`so that emoji would not be shrunk. # v2.1.4 # v2.1.3 Anchor link alignmentAdd stylingKilling the syntax theme and ace syntax theme out of user-contentIgnore render-test.mdre https://github.com/github/github/pull/35950We don't need to distribute this file. # v2.0.0 # 2.1.2 Anchor link alignment # 2.1.1 Add styling # 2.1.0 Killing the syntax theme and ace syntax theme out of user-content # 2.0.1 Ignore render-test.mdre https://github.com/github/github/pull/35950New syntax themes, adding ace editor syntaxdon't set height on .anchorFix styling of closing brackets in Ruby interpolated stringsWe need to override the normal .h style in this case.This is for our style guide https://github.com/styleguide/cssSupport recursive grammars by resetting CSS scopesUnder our new TextMate-based highlighting, we can end up with nestedhighlighting s. In some cases we need to reset the highlightingstyles to match the top-level styles. This makes it so that, e.g., codeinside interpolated strings is colored as code rather than as stringtext. The new elements that the TextMate highlighterproduces indicate where this needs to happen, and the styles added inthis commit accomplish the reset.See https://github.com/github/lex-luthor/issues/31 andhttps://github.com/github/github/pull/34312 for more discussion.We don't need to distribute this file. # 1.2.9 Fix code strikethroughs # 1.2.8 Revert keyword type changeNew color made keywords indistinguishable fromfunctions in certain cases. This change causescss scale values (px, (r)em, etc.) to appeardifferently than the associated number value,but we may just have to make that compromise for now.Organize syntax styles * Groups and combines related selectorsMissed the base number literal classUpdate syntax highlightingTake syntax highlighted diffs into account and tweakcontrast for words affected by intra-line highlighting.Fix underpants typoUnless this is some sort of weird Michigan dialect @bkeepers.Add task lists to sample documentAdd Markdown render test file # 1.2.7 Make sure code lines don't wrap # 1.2.6 Add word-break: break-word # 1.2.5 Segoe UI for Windows Markdown Thoughts? This is with `font-size: 15px` (for some reason, Segoe always looks better when the font size is an odd number), I'm not sure how to do that via pure CSS though, probably need a "If Windows" stylesheet. Just changing it to Segoe looks better too though:  # 1.2.4 Make sure plain elements have bottom margin
# 1.2.3
Add bottom margin to all header sizes
* master: bump to 1.2.2 fix margins on code inside .highlight containers use top margins for paragraphs in nested lists use rgba for code background colorsConflicts: bower.json package.json
# 1.2.2
# 1.2.10
Support recursive grammars by resetting CSS scopesUnder our new TextMate-based highlighting, we can end up with nestedhighlighting s. In some cases we need to reset the highlightingstyles to match the top-level styles. This makes it so that, e.g., codeinside interpolated strings is colored as code rather than as stringtext. The new elements that the TextMate highlighterproduces indicate where this needs to happen, and the styles added inthis commit accomplish the reset.See https://github.com/github/lex-luthor/issues/31 andhttps://github.com/github/github/pull/34312 for more discussion.Fix code strikethroughsRevert keyword type changeNew color made keywords indistinguishable fromfunctions in certain cases. This change causescss scale values (px, (r)em, etc.) to appeardifferently than the associated number value,but we may just have to make that compromise for now.Organize syntax styles
* Groups and combines related selectorsMissed the base number literal classUpdate syntax highlightingTake syntax highlighted diffs into account and tweakcontrast for words affected by intra-line highlighting.Fix underpants typoUnless this is some sort of weird Michigan dialect @bkeepers.Add task lists to sample documentAdd Markdown render test fileMake sure code lines don't wrapAdd word-break: break-wordSegoe UI for Windows MarkdownMake sure plain elements have bottom marginAdd bottom margin to all header sizes
* master: bump to 1.2.2 fix margins on code inside .highlight containers use top margins for paragraphs in nested lists use rgba for code background colorsConflicts: bower.json package.jsonMore Markdown tweaksThis is so code blocks on shaded tables cells are still visible.
Thoughts? This is with `font-size: 15px` (for some reason, Segoe always looks better when the font size is an odd number), I'm not sure how to do that via pure CSS though, probably need a "If Windows" stylesheet. Just changing it to Segoe looks better too though:
# 1.2.1
Make h1 and h2 headings bold like the othersRemove explicit code/tt colorThis was overriding the blue link colors so commit referencesdidn't look clickable.
# 1.2.0
[WIP] Smaller headings in .markdown-bodybased on @mdo's recommendationsUnstripe
elements
# 1.1.0
# 1.0.0
Finish rename to user-contentOverhaul to restructure, add tooling, add docs
* Updated readme to include local dev instructions, license, SemVer guidelines, and more
* Add package.json and bower.json
* Add Gruntfile to compile .scss into .css (includes minified variation) via grunt-sass
* Drop hr.png file for a base64 encoded image for fewer assets
* Add MIT license file
* Add .gitignore file