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>
Related
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 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.
Is there a way to open the below markdown link in new tab? I've got some result from markdown target=“_blank”, but in my case it's different have used <> symbol to projected the link.
http://google.com
Not used the usual format
(name)[linkname]
Used
<>
Inside this projected the link name. Is possible to open this link in new tab?
The kramdown syntax:
[link name](url_link){:target="_blank"}
can be parsed into HTML using the kramdown online editor:
https://kramdown.herokuapp.com/
Then you can paste the HTML syntax into your markdown document.
I used it because I already had quite a few kramdown references, and wanted to avoid retyping them in HTML.
Doing some quick research - Markdown by default does not support this. Some solutions include using plugins like Kramdown, but I think the best solution is just to use an HTML tag in your markdown file. (as pointed out in the comment above ^)
# Some markdown
*click below*
New Tab
...
As far as I could find, this is not possible on GitHub currently. See good answer on this from Plaul here. I hope they will fix it soon, as it seems searching for an answer that this is something a lot of people would like to see.
If you have access to JavaScript, you can run a simple script to handle this for you wherever your markdown is rendered:
const anchors = document.querySelectorAll('a');
anchors.forEach((a) => {
a.setAttribute('target', '__blank');
a.setAttribute('rel', 'noopener noreferrer');
});
I wanted to create inline span of code that links to other page.
I want to use
`MongoCollection`
and
[MongoCollection](#http://php.net/manual/en/class.mongocollection.php)
together to make a link on a code element.
I tried
[`MongoCollection`](#http://php.net/manual/en/class.mongocollection.php)
and
`[MongoCollection](#http://php.net/manual/en/class.mongocollection.php)`
Both didn't work.
Is there any way to do that?
Could you explain a bit more about what you mean by inline span of code? This works in Github and links the MongoCollection link to the Mongo Collection php manual page.
[MongoCollection](http://php.net/manual/en/class.mongocollection.php)
Is that what you are looking for?
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)