How to right-align and justify-align in Markdown?
MarkdownMarkdown Problem Overview
Markdown text is always left-aligned. Is there a way to do right-align and justification in Markdown?
To be precise, I'm using Markdown in Jupyter Notebook (IPython).
Markdown Solutions
Solution 1 - Markdown
Aligning text in native markdown is not possible. However, you can align the text using inline HTML tags.
<div style="text-align: right"> your-text-here </div>
To justify, replace right with justify in the above.
Solution 2 - Markdown
If you want to right-align in a form, you can try:
| Option | Description |
| ------:| -----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
https://learn.getgrav.org/content/markdown#right-aligned-text
Solution 3 - Markdown
If you want to use justify align in Jupyter Notebook use the following syntax:
<p style='text-align: justify;'> Your Text </p>
For right alignment:
<p style='text-align: right;'> Your Text </p>
Solution 4 - Markdown
As mentioned here, markdown do not support right aligned text or blocks. But the HTML result does it, via Cascading Style Sheets (CSS).
On my Jekyll Blog is use a syntax which works in markdown as well. To "terminate" a block use two spaces at the end or two times new line.
Of course you can also add a css-class with {: .right } instead of {: style="text-align: right" }.
Text to right
{: style="text-align: right" }
This text is on the right
Text as block
{: style="text-align: justify" }
This text is a block
Solution 5 - Markdown
In a generic Markdown document, use:
<style>body {text-align: right}</style>
or
<style>body {text-align: justify}</style>
Does not seem to work with Jupyter though.
Solution 6 - Markdown
If you want to use this answer, I found out that when you are using MacDown on MacOs, you can <div style="text-align: justify"> at the beginning of the document to justify all text and keep all code formating. Maybe it works on other editors too, for you to try ;)
Solution 7 - Markdown
Specific to your usage of a Jupyter Notebook: the ability to specify table column alignment should return in a future release. (Current releases default to right-aligned everywhere.)
From PR #4130:
> Allow markdown tables to specify their alignment with the :--, :--:, --: syntax while still allowing --- to default to right alignment. > > This reverts a previous change (part of #2534) that stripped the alignment information from the rendered HTML coming out of the marked renderer. To be clear this does not change the right alignment default but does bring back support for overriding this alignment per column by using the gfm table alignment syntax. > > ...
Solution 8 - Markdown
I used
<p align='right'>Farhan Khan</p>
and it worked for me on Google Colaboratory. Funnily enough it does not work anywhere else?
Solution 9 - Markdown
How to right-align text and hyperlinks are already answered and marked correct, but if you are going to reference something within Jupyter Notebook in your right-aligned text, you need to use a modified version of Eradash's answer. The modification consists of dropping the division closing bracket > and add a new blank line before your linked text. So, if you like to link your headings to a Table of Contents, you may also want to have a right-aligned link to the 'Table of contents' in the same block for better notebook aesthetics and navigation.
Say you have a Table of Contents with links to your cell headings that looks like this in markdown:
<a id='Contents'></a>
### Table of Contents
* [Project description](#Project)
* [Load Data](#Load)
And later on, you have a cell containing the left-aligned header for some operations, and your right-aligned go-to link:
<a id='Load'></a>
#### Loading data
<div style="text-align: right"
[Go to table](#Contents)
This will give you a left-aligned Heading with a right aligned go-to-link. Your next cells follow without any modification of alignment:
(I'd be curious to know why this works this way, as this solutions seems more like a hack than anything else.)
PS: You can add the ending bracket > and even the end-tag </div> on a new line after your right-aligned linked text, but it will only add another line in the output together with a highlighted space, which of course defeats the aesthetic purpose:
