Every time I drag and drop images into the Issue page of the project on Github and then copy the link to the Readme.md file. This usually works but if I have some more complex tags then images won't display, instead the link will be displayed.
This is how it looks like in the Markdown Editor:
And this is how it looks like on Github(live):
Note that the MarkDown editor displays the images as expected:
You're trying to nest Markdown inside block-level HTML (specifically <details>¹). In the original implementation, this doesn't work by design:
Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.
If you are using an implementation that respects this decision, you should be able to use HTML syntax:
<details>
<summary>Some summary</summary>
<img alt="Description" src="https://user-images.githubusercontent.com/foo/bar/baz.png">
</details>
However, newer specs (most notably GitHub Flavored Markdown and CommonMark) do allow Markdown in block-level elements as long as they are separated by whitespace.
If you are using a modern implementation, try this:
<details>
<summary>Some summary</summary>
</details>
¹Note that
"block-level" is not technically defined for elements that are new in HTML5
Related
Hello: I have created readme.md files for my repositories and GitHub pages. But when I create headings that are formatted h2/## or h3/###, etc. in-page anchor links are automatically created. I have tried different ways to format the headings -- such as ##, , --- -- but I get the same result. It occurs with each heading. This occurs in readme.md files that are in the repository and those that are converted to GitHub pages. I've tested it in chrome browser and edge browser and it's the same behavior.
# sample will create the heading and an unwanted in-page link
## sample will create the heading and an unwanted in-page link
Here's a page with the behavior: https://burrittresearch.com/
My goal is to be able to format headings in markdown without having these links automatically created.
Thank you!
Those are part of the anchorjs default CSS rules from GitHub pages
<h2 id="skills">Skills
<a class="anchorjs-link"
href="#skills"
aria-label="Anchor"
data-anchorjs-icon=""
style="font: 1em / 1 anchorjs-icons; padding-left: 0.375em;">
</a>
</h2>
If you static page (like this one) include its own set of CSS file/rules (like those ones), you could add, to make sure they are not visible:
.anchorjs-link {
display: none !Important;
}
GitHub documents their markup processing in github/Markup. Note that Markdown is converted to HTML in step one, which does not add any anchors to headers. However, in step 4, which is separate from the Markdown parsing, all headers in the document have anchors added. This is done to all content, regardless of whether is comes from Markdown, ReStructured Text, textile, asscidoc, etc., and is not specific to Markdown.
Note that the above only applies to content supplied by users which is displayed on github.com. It is their site, which they control, so we don't get to change/override that behavior.
However, it is different with GitHub pages. By default, GitHub Pages uses Jekyll to convert Markdown files into HTML. Jekyll includes a number of options to control how Markdown is processed, including the auto_ids option. Turn that option off (set it to false), and Jekyll will no longer add IDs to every header. However, that is a Kramdown option, but, as I understand if, GitHub Pages uses the GitHub Flavored Markdown variant of Commonmark, which doesn't have any such options. For that matter, the GFM spec doesn't indicate that headers would be assigned IDs either (so I'm not sure where those IDs are coming from). You might try configuring Jekyll to use Kramdown with the auto_ids option turned off. Configuration options "can either be specified in a _config.yml or _config.toml file placed in your site’s root directory."
As an alternative, you could install Jekyll (or any other static site generator) locally and build the site before uploading to GitHub Pages. Simply include an empty file named .nojekyll in the site root and GitHub will not run your files through Jekyll. In this way, you get complete control over the content and formatting of the pages.
If I have an html file somewhere in the same folder as a markdown document, is there any way to embed the entire file inside a markdown document, so that the html will be rendered correctly (not just the code displayed)?
Markdown doesn't support includes out-of-the-box. You need to use one of the existing flavors or static site generators that support markdown or/and HTML inclusions. For example, DocFX
You can't include other Markdown files in Readme (Readme is usually Markdown file). You can use the "Quote" (See example below)
This is Quote
> This is Quote
You can see my Markdown guide here
If I have an html file somewhere in the same folder as a markdown document, is there any way to embed the entire file inside a markdown document, so that the html will be rendered correctly (not just the code displayed)?
Markdown doesn't support includes out-of-the-box. You need to use one of the existing flavors or static site generators that support markdown or/and HTML inclusions. For example, DocFX
You can't include other Markdown files in Readme (Readme is usually Markdown file). You can use the "Quote" (See example below)
This is Quote
> This is Quote
You can see my Markdown guide here
Pull requests' (PRs) descriptions use Markdown that's documented here, and when the PR is viewed in a browser, that Markdown content is converted into HTML and looks "pretty".
Where can I find the code that converts it from Markdown to HTML, so I can leverage the same algorithms in my (internal-only) code?
Unfortunately we can not see the source code. It should be something like the Markdown editor/viewer.
So if you mean you want to render the Markdown with the "pretty" formatting offline, then you can use the existing Markdown editor/Tools such as markdown-it or showdown or any others.
Showdown is a JavaScript Markdown to HTML converter, based on the
original works by John Gruber. Showdown can be used client side (in
the browser) or server side (with Node.js).
If you are interested in the codes, then you can reference the open source code of markdown-it or showdown on GitHub.
Other related questions:
How to render Markdown Text from database in a Razor view?
Let's suppose that I have a file named my_python_code.py, and I upload it to GitHub's gist. Now I embed that gist into my blog, using the code provided by GitHub on the corresponding page.
When I browse my blog and I check the source code for the page, I discover that:
the embed code calls a js file which performs some DocumentWrite commands, inserting the appropriate html tags (with css styles) on my page, and
the associated css file is linked to my page. This file contains css declarations for 'gist' class as well as other classes.
This is all very nice. But I wonder: starting from the same my_python_code.py file, what would I have to do to end up with the same final html code?
I've tried using pygments and rouge (via pygmentize and rougify commands) with reasonable options but none of them highlights the original code using 'gist' tags (among others) as is done when performing the GitHub embed.