8000 Regenerate GitHub CSS with code snippet styles included by pkaminski · Pull Request #56 · sindresorhus/github-markdown-css · GitHub
[go: up one dir, main page]
Skip to content

Regenerate GitHub CSS with code snippet styles included #56

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 2 commits into from
Closed

Regenerate GitHub CSS with code snippet styles included #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
660cafa
Regenerate GitHub CSS with code snippet styles included.
pkaminski Aug 24, 2018
911bd60
Update stylesheet with latest output along with demo page.
pkaminski Aug 27, 2018
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
255 changes: 193 additions & 62 deletions github-markdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
@font-face {
font-family: octicons-link;
src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format('woff');
}
Copy link
Owner

Choose a reason for hiding this comment

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

This should not be removed.

Copy link
Author

Choose a reason for hiding this comment

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

The link icon is only part of the UI slapped on top of the rendered markdown when showing it as a standalone page. I don't see why it should be included in this stylesheet since the goal is not to reproduce GitHub's UI.

Copy link
Owner

Choose a reason for hiding this comment

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

Most Markdown renderings will want a way to link to the sections, so I think it's a good default to have it included. We could add a way to opt-out of it though. Maybe by setting a class on the Markdown container.

Copy link
Author

Choose a reason for hiding this comment

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

Not convinced about "most", and even if they do they're likely to have their own UI for doing so. Also, the font is mostly useless without the .octicon styles, and there's no clean way to pull those out since the new markdown render call (that can render code snippets) doesn't output section anchors.


.markdown-body {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
line-height: 1.5;
color: #24292e;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
Expand Down Expand Up @@ -138,12 +133,6 @@
color: #032f62;
}

.markdown-body .octicon {
display: inline-block;
vertical-align: text-top;
fill: currentColor;
}

.markdown-body a {
background-color: transparent;
}
Expand Down Expand Up @@ -323,25 +312,63 @@
}

.markdown-body code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
font-size: 12px;
}

.markdown-body pre {
margin-top: 0;
margin-bottom: 0;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
font-size: 12px;
}

.markdown-body .octicon {
vertical-align: text-bottom;
.markdown-body .border {
border: 1px #e1e4e8 solid !important;
}

.markdown-body .border-bottom {
border-bottom: 1px #e1e4e8 solid !important;
}

.markdown-body .border-0 {
border: 0 !important;
}

.markdown-body .rounded-1 {
border-radius: 3px !important;
}

.markdown-body .bg-white {
background-color: #fff !important;
}

.markdown-body .bg-gray-light {
background-color: #fafbfc !important;
}

.markdown-body .text-gray-light {
color: #6a737d !important;
}

.markdown-body .mb-0 {
margin-bottom: 0 !important;
}

.markdown-body .my-2 {
margin-top: 8px !important;
margin-bottom: 8px !important;
}

.markdown-body .pl-0 {
padding-left: 0 !important;
}

.markdown-body .py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}

.markdown-body .pl-1 {
padding-left: 4px !important;
}
Expand All @@ -350,10 +377,20 @@
padding-left: 8px !important;
}

.markdown-body .py-2 {
padding-top: 8px !important;
padding-bottom: 8px !important;
}

.markdown-body .pl-3 {
padding-left: 16px !important;
}

.markdown-body .px-3 {
padding-right: 16px !important;
padding-left: 16px !important;
}

.markdown-body .pl-4 {
padding-left: 24px !important;
}
Expand All @@ -366,6 +403,18 @@
padding-left: 40px !important;
}

.markdown-body .f6 {
font-size: 12px !important;
}

.markdown-body .lh-condensed {
line-height: 1.25 !important;
}

.markdown-body .text-bold {
font-weight: 600 !important;
}

.markdown-body::before {
display: table;
content: "";
Expand All @@ -390,17 +439,6 @@
text-decoration: none;
}

.markdown-body .anchor {
float: left;
padding-right: 4px;
margin-left: -20px;
line-height: 1;
}

.markdown-body .anchor:focus {
outline: none;
}

.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
Expand All @@ -413,7 +451,7 @@
}

.markdown-body hr {
height: 0.25em;
height: .25em;
padding: 0;
margin: 24px 0;
background-color: #e1e4e8;
Expand Down Expand Up @@ -460,35 +498,6 @@
line-height: 1.25;
}

.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
color: #1b1f23;
vertical-align: middle;
visibility: hidden;
}

.markdown-body h1:hover .anchor,
.markdown-body h2:hover .anchor,
.markdown-body h3:hover .anchor,
.markdown-body h4:hover .anchor,
.markdown-body h5:hover .anchor,
.markdown-body h6:hover .anchor {
text-decoration: none;
}

.markdown-body h1:hover .anchor .octicon-link,
.markdown-body h2:hover .anchor .octicon-link,
.markdown-body h3:hover .anchor .octicon-link,
.markdown-body h4:hover .anchor .octicon-link,
.markdown-body h5:hover .anchor .octicon-link,
.markdown-body h6:hover .anchor .octicon-link {
visibility: visible;
}

.markdown-body h1 {
padding-bottom: 0.3em;
font-size: 2em;
Expand Down Expand Up @@ -540,7 +549,7 @@
}

.markdown-body li+li {
margin-top: 0.25em;
margin-top: .25em;
}

.markdown-body dl {
Expand Down Expand Up @@ -652,15 +661,77 @@
border: 0;
}

.markdown-body .full-commit .btn-outline:not(:disabled):hover {
color: #005cc5;
border-color: #005cc5;
.markdown-body .commit-tease-sha {
display: inline-block;
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
font-size: 90%;
color: #444d56;
}

.markdown-body .blob-wrapper {
overflow-x: auto;
overflow-y: hidden;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}

.markdown-body .blob-wrapper-embedded {
max-height: 240px;
overflow-y: auto;
}

.markdown-body .blob-num {
width: 1%;
min-width: 50px;
padding-right: 10px;
padding-left: 10px;
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
font-size: 12px;
line-height: 20px;
color: rgba(27,31,35,0.3);
text-align: right;
white-space: nowrap;
vertical-align: top;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.markdown-body .blob-num:hover {
color: rgba(27,31,35,0.6);
}

.markdown-body .blob-num::before {
content: attr(data-line-number);
}

.markdown-body .blob-code {
position: relative;
padding-right: 10px;
padding-left: 10px;
line-height: 20px;
vertical-align: top;
}

.markdown-body .blob-code-inner {
overflow: visible;
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
font-size: 12px;
color: #24292e;
word-wrap: normal;
white-space: pre;
}

.markdown-body .blob-code-inner::before {
content: " ";
}

.markdown-body kbd {
display: inline-block;
padding: 3px 5px;
font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font: 11px "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
line-height: 10px;
color: #444d56;
vertical-align: middle;
Expand All @@ -677,6 +748,66 @@
border-color: #0366d6;
}

.markdown-body .tab-size[data-tab-size="1"] {
-moz-tab-size: 1;
tab-size: 1;
}

.markdown-body .tab-size[data-tab-size="2"] {
-moz-tab-size: 2;
tab-size: 2;
}

.markdown-body .tab-size[data-tab-size="3"] {
-moz-tab-size: 3;
tab-size: 3;
}

.markdown-body .tab-size[data-tab-size="4"] {
-moz-tab-size: 4;
tab-size: 4;
}

.markdown-body .tab-size[data-tab-size="5"] {
-moz-tab-size: 5;
tab-size: 5;
}

.markdown-body .tab-size[data-tab-size="6"] {
-moz-tab-size: 6;
tab-size: 6;
}

.markdown-body .tab-size[data-tab-size="7"] {
-moz-tab-size: 7;
tab-size: 7;
}

.markdown-body .tab-size[data-tab-size="8"] {
-moz-tab-size: 8;
tab-size: 8;
}
Copy link
Owner

Choose a reason for hiding this comment

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

Can you exclude this one?

Copy link
Author

Choose a reason for hiding this comment

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

This one is needed for rendering the code snippet. In fact, I'm worried rules for other tab sizes are missing... Will dig deeper.

Copy link
Owner
@sindresorhus sindresorhus Aug 27, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

The defaults are also really bad. We should change it to tab-size: 4;, which is what most would want.

Copy link
Author

Choose a reason for hiding this comment

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

I think we should leave this stylesheet as compatible with GitHub's default styles as possible. Clients can always override these styles if desired. I tweaked the generator to include all possible tab size rules, though I'm not sure what would cause GitHub to output HTML that uses them.


.markdown-body .tab-size[data-tab-size="9"] {
-moz-tab-size: 9;
tab-size: 9;
}

.markdown-body .tab-size[data-tab-size="10"] {
-moz-tab-size: 10;
tab-size: 10;
}

.markdown-body .tab-size[data-tab-size="11"] {
-moz-tab-size: 11;
tab-size: 11;
}

.markdown-body .tab-size[data-tab-size="12"] {
-moz-tab-size: 12;
tab-size: 12;
}

.markdown-body .task-list-item {
list-style-type: none;
}
Expand Down
Loading
0