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
Related
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.
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 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)
I have been looking into why WYSIWYG editors are bad for content creation. The most common reason given is that they output incorrect html. But what if I use editors with reduced functionality?
My requirements are only the ability to italicize, make text bold, create ordered/unordered lists and (maybe at a later date) add inline images.
My users will hopefully be 'persistent' users (small numbers of laypersons using the app frequently)
In this context how do I choose between Markdown (WMD editor) & a stripped down WYSIWYG editor. How would page performance be affected with each? I consider fidelity & reproduciblity of data to be important.
You choose by considering your audience. Wiki markup and markdown is for geeks. Your customers sound like they're probably not geeks so I would suggest CKEditor or Twiki-style editor (good, simple Wysiwyg UI) for non-geek users.
Basic concern: Why force lay-people to learn a markup language when solid alternatives exist?
See the Custom Toolbar editor in this CKEditor demo. Or check out TinyMCE.
OK, I tested both.
Even for my basic formatting requirements, CKEditor generated quite ghastly html
Now this is the input
This actually appears to be better
I hope users understand what we are doing
Lets see
But in the meantime
CKEditor Output
<p> This actually appears to be better</p>
<p> I hope users understand what we are doing</p>
<p> Lets see</p>
<p> </p>
<p> But in the meantime</p>
And Markdown Output
<p>This actually appears to be better <br>
I hope users understand what we are doing <br>
Lets see</p>
<p>But in the meantime</p>
Now if this is the difference between these two for the most basic formatting (linebreaks and paragraphs), what will it be like in a 200 word submission. I think most users will need to know only this
For line breaks, two SPACES and hit ENTER.
For new paragraphs, hit ENTER twice
The rest of the stuff could be learnt incrementally
Is it that hard to engineer a 'basic' WYSIWYG editor?
EDIT
After adding these to config.js above problem is solved
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;