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)
Related
How to configure syntax highlighting for GitHub Pages to be identical to GitHub syntax highlighting?
GitHub uses a closed syntax highlighting library not available on GitHub Pages. Supposedly, it should be possible to get a reasonable result using the default Jekyll highlighter. However, for me it was simpler to switch to the highlight.js JS library. Here are the steps.
Disable Jekyll's highlighter in the _config.yml
Obtain the highlight.min.js library
Prebuilt library is available from the website or via CDNs.
A custom version can be generated online, if necessary.
Obtain a CSS theme file
Specific CSS theme can be picked chosen using online demo service. CSS files are also available via CDNs or can be downloaded for local access.
Load the library, theme file, and initialize the library
In my case, I placed the library in /assets/js/highlight.min.js and included the following lines in /_includes/head_custom.html
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github.min.css">
<script type="text/javascript" src="{{ '/assets/js/highlight.min.js' | relative_url }}"></script>
<script>hljs.highlightAll();</script>
I also included a CSS element /_sass/custom/custom.scss in to overwrite code block background:
.hljs {background: #fdfdfa !important;}
I have a Gist that I would like to embed within a GitHub issue. I have tried pasting the "Embed" <script> markup shown on the Gist page, which simply adds the escaped HTML to the issue comment.
This seems a rather obvious feature to not be supported. What am I missing?
Because embedding requires a <script> tag which gets sanitized and removed to prevent abuse this probably won't ever work in GitHub Issues.
I would like to create a wiki page that is a preamble (standard markdown) followed by an HTML/JS code listing followed by (in a frame I suppose) the page that this code would generate.
Is this possible?
PS The code is: http://pipad.org/MathBox/slides_simple.html
Github Wikis allow you to embed HTML, but not all HTML tags are supported.
To embed supported HTML:
Edit a wiki page.
Ensure the edit mode is on "Markdown".
Type the html directly into the main content area (there's no "code" view, like you often see in tools like Wordpress).
Which tags aren't supported?
I couldn't find documentation on this, but we have a few clues:
Github wikis are built on a software tool called Gollum. We can see which tags are supported in Gollum by default here in the Gollum docs. Github may customize these defaults for their use-case, but I'll bet it's pretty similar.
I went ahead and created a test wiki here with all the major visual html elements added to it (copied from Poor Man's Styleguide). It looks like the main tags that don't display are iframe, video, audio, and all of the various form inputs (textarea, input, select, etc).
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>