I have a table with the following code. In the Markdown viewer and on GitHub pages, the color is shown correct. But not on GitHub.
|- |- |- |- |- |
| <span style="font-family: Source Code Pro; padding: 20px; background-color: #000000; color: #fff;">#000000</span> |
The result on GitHub:
The result on GitHub Pages
A table has the disadvantage that it does not move downwards at smaller screen sizes, but only to the right. How can I create a kind of grid layout?
Within GitHub, Markdown content is somewhat restricted. After Markdown is converted to HTML
The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.
(Bold added.)
The span tag is not included in the whitelist. Even if it was, the style attribute is also missing from the whitelist. The only way I know to achieve a visual similar to what's on GitHub Pages is to use an image, as you have done here.
The GitHub Flavored Markdown (GFM) Table Extension does not support coloring. Anything you do will be a hack that is not guaranteed to work going forward. It may be possible to accomplish this with HTML but I don't advocate mixing HTML with your Markdown. Support is sketchy and varied.
Related
This question already has an answer here:
Span element in Markdown
(1 answer)
Closed yesterday.
I'm trying to set the text alignment of my README.md file to justify. I tried the following in VS Code and the preview showed exactly what I wanted.
<p style="text-align: justify;">
My paragraph
</p>
But when I pushed it to GitHub, I saw that this line of code did not change alignment. I searched a little more and came up with this solution:
<p align="justify">
My paragraph
</p>
And it worked on GitHub (and VS Code). My question is, what's the difference between GitHub and VS Code here? Why doesn't the first solution work for GitHub?
I think first solution didn't work on GitHub is because GitHub's Markdown parser does not support using inline styles like style="text-align: justify;". Inline styles are often used in HTML to apply styling to a specific element, but in Markdown, it's better to use a more universal approach that is supported across all platforms.
'align' is a standard HTML attribute that is widely supported, including by GitHub's Markdown parser
I have been using github pages with jekyll for auto-generating my blog using markdown documents.
I would like to use reference-style links then show a list of the links at the bottom of the page.
basically, I want the reference-style links to be printed on the page, by default they are hidden.
The idea is to have a list of references that a reader can refer to for more information.
for example, the following text:
# some header
...some body text in the blog with a link to [wikipedia][1]
...
...
# reference links
[1]: https://www.wikipedia.org
should generate the following output:
some header
...some body text in the blog with a link to wikipedia
...
...
reference links
[1]: https://www.wikipedia.org
As seen, the reference-style link is used in the markdown but it is also displayed on the page.
The previous "correct" output was achieved by duplicating each line and escaping the special characters, but this seems a bit redundant.
Can this be achieved by changes to _config.yml or using ruby? Other options are also welcome (css magic?).
tldr; I want a way to "unhide" the reference-style links at the bottom of my markdown page.
First, you have to understand exactly what is doing what:
Your markdown parser is converting your markdown into html.
Jekyll is taking that html and organizing it into pages.
GitHub pages is serving up those html pages.
The client reads that html and executes any JavaScript, etc.
The problem is that the markdown parser doesn't include the reference links at the bottom of the page. It's not like they're there but hidden. They simply aren't there. So you aren't going to find a CSS solution, because there isn't anything to style. You might be able to accomplish this with a custom markdown parser that includes the reference links in the generated html, but that won't work with GitHub pages and is probably going to be pretty hackish.
Another option is to execute JavaScript that uses document.links to get every link on the page, then output them in a <ul> or something at the bottom of the page. Something like this:
var links = document.links;
for(var i = 0; i < links.length; i++) {
var linkHref = document.createTextNode(links[i].href);
var lineBreak = document.createElement("br");
document.body.appendChild(linkHref);
document.body.appendChild(lineBreak);
}
You might restrict that to only include links in a certain div (like this), that way you don't have to parse out your navigation links and whatnot. You also have to consider the order.
Another option might be to include them in each post's frontmatter as a yml list, then show those in the layout that displays the post.
Of course, you could also simply create the reference yourself using markdown.
I am creating a Wiki page in github.com. I am trying to use table in the Markdown edit mode. I created table by embedding html expecting to add inline-css later but found that inline-css also not working.
I tried following:
<style>
.markdown-body table td {
font-size: 12px !important;
}
</style>
Link for my wiki page.
Have anyone tried it before or achieved similar things or any help?
I have managed to make the font size small in table by using <sub>...</sub> tag.
Achieved this by Wrapping each line of text (inside td) under <sub>...</sub>.
UPDATED WIKI LINK
Just because I don't see this mentioned here I'd like to add one interesting possibility. I know that GitHub's markdown is easy, but if you get at this point where you are sort of battling with it's limitations to get the styling just the way you like it, you might consider switching over to GitHub Pages.
From that link:
GitHub Pages are public webpages hosted and published through our site.
You can create and publish GitHub Pages online using the Automatic Page Generator.
GitHub has special handling for a branch in your repo called gh_pages. Any content pushed to that branch will be published to a subdomain on github.io. Once done, your very own static website will appear at https://your-username.github.io/your-project.
Github makes it super easy to convert your existing markdown to some nice looking website (check out the Automatic Page Creator section in the repo settings) which you can then just pull in from the gh_pages branch and edit to your heart's content.
While the CSS usedby GitHub is described in this official guide, I didn't find any example where you could embed your own stylesheet in a page served by GitHub.
And section would be ignored.
That was already the case two years ago for Gist (for instance).
This worked for me:
<font size="+1">Description</font>
I want to have links inside my code blocks using GitHub flavored markdown.
```cpp
void Click ([Keycode](#keycode) key) const
```
Unfortunately, it renders that as code, anyway to make it a link instead?
If its a short piece of code this should do the trick:
[`this is code`](https://this_is_url/)
As far as I know, the current instance of GitHub Flavored Markdown doesn't support this.
The all block is rendered with <div class="highlight highlight-html"><pre>... </pre></div>, meaning your markdown link is not interpreted.
It would be best to place that link just before the code section (unless said section has dozens of similar links in your code).
As suggested by VonC, it might not be possible with the current version of GitHub Flavored Markdown. That being said, I did find a way around it which suits my requirements. By using tags like <big>, <pre> and <b> I'm able to simulate syntax highlighting and get the effect I'm looking for. Too bad I can't add my own color though.
<big><pre>
**void** Click ([**Keycode**](#keycode) key) **const**
</pre></big>
You can do this using HTML in markdown, yes, even on Github:
<pre>
Something
</pre>
This makes the trick.
I use it on my GitHub profile page to put links inside code blocks.
<pre>
<code>
gmarciani
</code>
</pre>
Is it possible to change Github's gists default styles programmatically or through some interface?
I don't know of any API or interface influencing the way gist are presented on GitHub.
If you include those gist in your blog, then of course some CSS local changes can make your gist different, as illustrated by this blog post, this CSS or this CSS.
However, this doesn't concern syntax highlighting.
You can only share those Gist with a custom stylesheet through, for instance Octopress, using a Sass port of Solarized syntax highlighting.
But again, that won't change those gist presentation on GitHub itself.
May i am late at party, but you can create your own CSS by editing the default one it with the color you want. I have done something same but instead of pasting all the css in the blog i prefer to link it
See if this works for you
<link href="https://cdn.rawgit.com/Killercodes/281792c423a4fe5544d9a8d36a4430f2/raw/36c2eb3e0c44133880485a143717bda9d180f2c1/GistDarkCode.css" rel="stylesheet" type="text/css">
You can also find it here: GistDarkCode.css I made it look all black
Edit:
I figured out that the markdown (*.md) documents are where still white this has been fixed in this new version 0.3.0 also the font size is increased to 14px to make it look bigger, try the new one below
<link href="https://cdn.rawgit.com/Killercodes/281792c423a4fe5544d9a8d36a4430f2/raw/42e5b91a60ea5e25b7bb42c0a315d9e740c92f0/GistDarkCode.css" rel="stylesheet" type="text/css">
For embedded Gists there is Pretty Gist
Pretty Gist is a jQuery plugin to make prettier and more functional embedded Github Gists.
Github repo
Yes there are different properties to control the default css of GitHub gist. I did various customizations in this project and made sure I define the properties after the embedded js - https://github.com/tebelorg/TA.Gist (PHP template that displays your GitHub gists as blog posts)