Getting tighter spacing on Github markdown with syntax highlighted blocks - github

I've noticed that if I use language-specific syntax highlighting on Github (e.g. Ruby)
There's a lot of space between code block and preceding text.
However, when using the plain shell syntax block, the spacing is tighter:
Just wondering if anyone has found a way to get the spacing tighter when using language-specific syntax highlighting.

For your own pages, you might try and fiddle with different css as in " jasonm23 / markdown-css-themes".
See this example page.

Related

VSCode - Align All Chars Prettify Settings

Prettier (VSCode) does a great job beautifying my code on save.
There is one feature that I consider important in code formatting which I can't find in Prettier.
I want to align chars =, :, =>, etc., in multiple lines like this VSCode plugin does.
The universal answer to questions like "How can I make Prettier format my code in such a way that ...?" is "You can't."
Prettier's purpose is to facilitate collaboration in projects and teams by taking care of code style, not to be a customizable code formatter that does whatever the user wants. In other words, the formatting it produces isn't really customizable, and this is intentional. Read more here. If you need that degree of control over formatting, you're likely not the target audience for Prettier.
This specific code style (alignment) that you want to have is considered diff-unfriendly (e.g., see here or here). Prettier's line breaking algorithm by itself has similar problems (e.g, adding one argument to a call might lead to a multiline diff if the line becomes too long), but they're inevitable, so Prettier's strategy is to compensate for that by avoiding other diff-unfriendly things.
You could always utilise the Alt key or Code Maid to clean up.
If you hold the Alt Key and drag down then you can highlight the spacing to either remove or align your code.

How to write diff code with syntax highlight in Github

Github supports syntax highlight as follows:
```javascript
let message = 'hello world!'
```
And it supports diff as follows: (but WITHOUT syntax highlight)
```diff
-let message = 'hello world!'
+let message = 'hello stackoverflow!'
```
How can I get both 'syntax hightlight' AND 'diff' ?
No, this is not a supported feature at this time.
GitHub documents their processing of lightweight markup languages (including Markdown, among others) in github/markup. Note step 3:
Syntax highlighting is performed on code blocks. See github/linguist for more information about syntax highlighting.
If we follow that link, we find a list of grammars that Linguist uses to provide syntax highlighting on GitHub. Linguist can only apply one of the grammars in that list to a block of code at a time. Of course, one of the grammars is Diff. However, that grammar knows nothing about the language of code being diffed, so you don't get syntax highlighting of that.
Of course, there are other languages which are often combined. For example, HTML is often included in a templating language. Therefore, in addition to the HTML grammar, we also find grammars for HTML+Django, HTML+ECR HTML+EEX, HTML+ERB, and HTML+PHP. In each case, the single grammar is aware of two languages. Both the specific templating language and the HTML which is interspersed within the template.
To accomplish the same thing with a diff, you would need a separate "diff" grammar for every single language listed. In other words, the number of grammars would double. Of course, a way to avoid this might be to treat diff differently. When diff is specified, they could run the block through the syntax highlighter twice, once for diff and once for the source language. However, at least when processing code blocks in lightweight markup languages, they have not implemented such a feature.
And if they ever were to implement such a feature in the future, it would likely be more complicated that simply running the code block through twice. After all, every line of the diff has diff specific content which would confuse the other language grammar. Therefore, every grammar would need to be diff aware, or each line would need to be fed to the grammar separately with the diff parts removed. The problem with the later is that the grammar would not have the context of each line and is more likely to get things wrong. Whether such a solution is possible is outside this cope of this answer, but the point is that it is reasonable to expect that such a feature would be much lower priority to support due to the complexity involved.
So why does GitHub do syntax highlighting in other places on its website? Because, in those cases, it has access to the two source files being diffed and it generates the diff itself. Each source is first highlighted (avoiding the complexity mentioned above), then the diff is created from the two highlighted source files. However, a diff included in a Markdown code block is already a diff when GitHub first sees it. There is no way for them to highlight the pre-diff code first. In other words, the process they currently use would not be transferable to supporting the requested feature.
You would need to post-process the output of the git diff in order to add syntax highlighting for the right language of the file being diff'ed.
But since you are asking for GitHub, that post-processing is not in your control, and is not provided by GitHub at the moment in its GFM (GitHub Flavored Markdown Spec).
It is supported for source files, in a regular diff like this one or in a PR: GitHub does the syntax highlighting of the two versions of the file, and then computes the diff.
It is not supported in a regular markdown fenced code block, where the +/- of a diff would throw off the syntax highlighting engine, considering there is no "diff" operation done here (just the writer trying to add diff +/- symbols)

Adding support for language on a code fence block

doxygen has support for code fence blocks that also have syntax highlighting in the output.
Here is the documentation:
http://www.doxygen.nl/manual/markdown.html#md_fenced
It looks like this:
~~~{.c}
int somefunc(int somevar);
~~~
I want to support .sql; I tried it, but it did not highlight.
My two questions are:
How do I determine what code types doxygen supports for code fence blocks?
Is there some way to define a new one? I am quite happy with just a keyword highlighter; it does not need to be a full parse.
Since my comment, I have looked into adding SQL syntax highlighting to fenced code blocks and \code blocks.
It should now be available if you build from source at https://github.com/doxygen/doxygen or it will be available in the next version (1.8.13).
Here is an example of the syntax highlighting:
If you could test it before the next release, that would be nice, as well.

How to escape symbols in GitHub-flavored markdown internal links / heading anchors?

Does anybody know how to maintain symbols in markdown internal links?
For example:
[A](#A) works fine
[A and B](#a-and-b) works fine
...whereas:
[A/B](#a-b) does not work
[A-B](#a-b) does not work
Thanks for your help!
I remember running into this problem too.
[A/B](#ab) should work, instead of using [A/B](#a-b).
A / character is considered a non-character in this case, but when it is not part of a word (ex. Movies / Shows / Videos) then it needs to be treated like an empty word:
[Movies / Shows / Videos](#movies--shows--videos)
I'm not sure how [A-B](#a-b) isn't working for you, because it should work?
I recommend checking here, every now and then, for additional information being added to the conversation around Github Markdown Heading Anchors: https://gist.github.com/asabaylus/3071099
This is also known as github-slugging or GitHub-style slugging.
After copying and pasting your code into my markdown editor, Mou, I see no issues with either statement. In fact, I copied the link as well, and it keeps the symbols you want.
Perhaps this is an issue with your version of markdown or your editor. If you are using a different flavor of markdown, like github, I'd be sure to specify that with tags as that may be your issue. Basic markdown should handle escaping characters though unless it's a bracket. If you want some helpful information, please visit this stack overflow thread: Escaping Brackets

Make backticks and links overlap work with GitHub Markdown

We are trying to implement an automatic markdown generator for an easily maintainable documentation.
When mentioning a variable's type, we would like to prefix it with ? when it is nullable, use backticks around it and add a link to its description. For example: `?[Article](#article)`.
However, the backticks break the link syntax because of the overlap. We use `?`[`Article`](#article) instead to make the link works but it creates a space between ? and Article as follow: ?Article.
Is it possible to make it look like ?Article with a link on Article only?
I just tested this out and discovered that there is no space between ? and Article. What appears to be a space is simply GitHub's styling of two <code> blocks up against each other.
Wrapping the whole thing in backticks won't work because backticks indicate code, and Markdown treats the contents as if they are a code sample where you want to show the source.
The best workaround I can find is to use <code> tags directly:
<code>?[Article](https://stackoverflow.com/)</code>
On both GitHub and Stack Overflow this renders like so:
?Article
(I have used a link to Stack Overflow as the link target here simply so we get a rendered link as an example. I expect that #article will work equally well in your environment.)
In my opinion this is even a reasonable way of doing what you want. Markdown's backticks compile to <code> tags, and inline HTML code is expressly permitted by Markdown:
For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.