150

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).

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ébe Isaac
  • 11,563
  • 17
  • 64
  • 97
  • 1
    AFAIK there is no way to change the alignment in Markdown (would make the compilers/renderes far more complex) - maybe there are some tools using extended syntax that can do it but right now I know of none (I think not even pandoc will do) – Random Dev Jan 29 '16 at 05:32
  • 1
    You can use some CSS to alter the alignment or the HTML output by Markdown in your browser. However, text alignment is outside the scope of Markdown itself. – Waylan Jan 29 '16 at 13:43
  • If you will use html format you will be unable to use .md format inside that text. Best answer is in: https://stackoverflow.com/questions/49470805/how-to-make-markdown-text-align-justify For example: Hello, this is my `text`. {: style="text-align: justify"} –  Aug 09 '18 at 22:37
  • None of the solutions worked for me for bitbucket readme – JPM Nov 01 '21 at 15:40

9 Answers9

157

Aligning text in pure 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.

double-beep
  • 5,031
  • 17
  • 33
  • 41
Nikhita Raghunath
  • 3,974
  • 2
  • 17
  • 17
  • 7
    It works, but it breaks links like `
    [up](https://github.com/loretoparisi/CapsNet#CapsNet)
    ` will be not rendered as a link.     – loretoparisi Jan 23 '20 at 23:45
  • 6
    you can use `Your link` tag inside ‍♂️ – Fyodor Mar 01 '20 at 03:59
  • 2
    Inline HTML is often forbidden by Linters. I would avoid using inline html in markdown, I posted my suggestion as answer here to the question. – KargWare Apr 17 '20 at 10:08
  • Unfortunately GitHub does not honor this in README.md files, but it is still better than other answers, where GitHub will not only fail to align text, but will also render the unrecognized markup verbatim on the page. – Mike Nakis Dec 24 '22 at 16:58
  • @MikeNakis GitHub strips the `style` attribute, but you can still use `align` and it will work: `
    your-text-here
    `     – Zach Bloomquist Feb 03 '23 at 16:49
52

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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Windsooon
  • 6,864
  • 4
  • 31
  • 50
24

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>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Sayali Sonawane
  • 12,289
  • 5
  • 46
  • 47
  • 1
    Thanks for showing the `justify` option; the other posts talk only about right-align. This option seems to work well with the `div` tag too. Too bad I could only accept one answer :) – Ébe Isaac Aug 07 '18 at 05:56
  • If you need to justify whole document like me, then add `p { text-align: justify; }` to the CSS. Additionally you can also add `ul { text-align: justify; }` for list elements. – impopularGuy May 02 '20 at 04:14
10

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.

Giulio
  • 469
  • 5
  • 15
  • 3
    This answer is much better than the highest voted one. The solution suggested works with MD markup well. Everyone else keep suggesting the use of HTML syntax, which defeats the purpose of MD. – Uzair Jan 05 '21 at 06:16
6

As mentioned here, markdown do not support right aligned text or blocks. But the HTML result does it, via Cascading Style Sheets (CSS). HTML elements can be used inside markdown, so wrap your "text" in a div or p element and add the css stlyes as you want.

On my Jekyll Blog (which will render MD to HTML) I 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 css-sytle {: style="text-align: right" } directly. The css class "right" can be then styled via (external) css-sheet.

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
KargWare
  • 1,746
  • 3
  • 22
  • 35
  • 2
    Maybe you need to clarify, for beginners, what a CSS class is and how to use it. And I think this only works in the Kramdown version of Markdown. – Santiago May 02 '20 at 15:23
  • 2
    @Santiago, you are right is works only when markdown is generated as HTML – KargWare May 03 '20 at 05:14
2

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 ;)

Eradash
  • 402
  • 7
  • 16
  • For some reason this doesn't work for the entire document, just the paragraph. I use Typora as editor in Linux – lucian May 28 '20 at 09:33
2

I used

<p align='right'>Farhan Khan</p>

and it worked for me on Google Colaboratory. Funnily enough it does not work anywhere else?

Farhan Hai Khan
  • 583
  • 7
  • 10
  • 1
    This is deprecated: https://html.com/attributes/div-align/ https://strictquirks.nl/standards/deprecated-attributes.html#p – iconoclast Oct 25 '22 at 22:11
1

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.

...

patricktokeeffe
  • 1,058
  • 1
  • 11
  • 21
0

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:

enter image description here

(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:

enter image description here

kgbviz
  • 11
  • 4