Skip to content

help: How do I center the header? #179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
hyawara opened this issue Sep 23, 2024 · 4 comments
Closed

help: How do I center the header? #179

hyawara opened this issue Sep 23, 2024 · 4 comments
Labels
question Further information is requested

Comments

@hyawara
Copy link

hyawara commented Sep 23, 2024

Neovim version (nvim -v)

0.10.0

Neovim distribution

N/A

Description

I want to center the title, like this:

image

@hyawara hyawara added the question Further information is requested label Sep 23, 2024
@MeanderingProgrammer
Copy link
Owner

MeanderingProgrammer commented Sep 23, 2024

There is no way to do this. You can specify a left_pad value for headings but that will apply a constant padding to all heading levels and naturally will not change when the window resizes.

I'm not really aware of a markdown renderer that supports this kind of thing and in general I don't think I want to support centering content mostly because it would need to interoperate with all the existing options. I gave implementing it a shot and it ended up messy with a lot of gaps.

If I made left_pad accept a function that takes a window_id and the current line of text would that be enough?

I imagine the implementation in your config would look something like:

require('render-markdown').setup({
  heading = {
    left_pad = function(win, line)
      local window_width = vim.api.nvim_win_get_width(win)
      local line_width = vim.fn.strdisplaywidth(line)
      return math.floor((window_width - line_width) / 2)
    end,
  },
})

Basically any weird offsets and things specific to your config just end being something you solve rather than me needing to handle more edge cases.

MeanderingProgrammer added a commit that referenced this issue Sep 24, 2024
## Details

Issue: #179

This change allows `left_pad` and `right_pad` for both headings and code
blocks to interpret floating point values < 1 as a percentage of
available space. I.e. a value of 0.5 will mean 50% of the available
window space after removing the max width of the block, i.e. center it.
Integer values >= 1 continue to function as before.

- The `language_pad` option is also interpreted in this way now

The term block is used because we do not want to center every line of a
code block individually, instead we want the entire block to be centered.
This also applies to headings but these are generally one line anyway so
no real difference.

This also adds a `left_margin` option to both headings and code blocks.
The differences between padding and margin are:

- Paddings uses the highlight associated with the block
- Margin uses the overall window background color so it's "inivisible"
- It is also important to note that margin is computed after accounting for padding

As an example lets say we have a heading that occupies 40% of the
windows width. And lets say we are applying the following config:
`{ width = 'block', left_pad = 0.33, right_pad = 0.33, left_margin = 0.5 }`

- We find that 60% of the width is availble
- We add 33% of this to the left and right side, i.e. 20% of total, with
  the heading background
- For margin we find that 100% - (40% + 20% + 20%) = 20% of the space is
  available so we add half (10%) to the left with the background color
- Naturally this will leave the remaining 10% on the right so things
  should look centered
- I find this pretty neat :)

In a general sense margin is probably not very useful for `full` widths
but you can use it if you like.
@MeanderingProgrammer
Copy link
Owner

I actually ended up implementing this internally here: 0986638

It applies to both headings and code blocks, since they're alignment configs are the same.

By providing floating point values between 0 & 1 to left_pad, right_pad and left_margin you can get different effects.

Here are a few configs to try:

require('render-markdown').setup({
  heading = {
    left_pad = 0.5,
  },
})
require('render-markdown').setup({
  heading = {
    left_pad = 0.5, 
    position = 'inline',
  },
})
require('render-markdown').setup({
  heading = {
    left_margin = 0.5,
    position = 'inline',
    width = 'block',
  },
})
require('render-markdown').setup({
  heading = {
    left_margin = 0.5,
    position = 'inline',
    width = 'block',
    left_pad = 0.2,
    right_pad = 0.2,
  },
})

@tristone13th
Copy link

Just want to know can we have a specific type of header (e.g., header 1) centered without touching other headers' style?

@MeanderingProgrammer
Copy link
Owner

You can provide a list of values to the various properties, the last value gets used for all remaining headers.

So to center just h1:

require('render-markdown').setup({
  heading = {
    left_pad = { 0.5, 0 },
    -- This is equivalent to:
    -- left_pad = { 0.5, 0, 0, 0, 0, 0 },
  },
})

To center h2 & h4 only:

require('render-markdown').setup({
  heading = {
    left_pad = { 0, 0.5, 0, 0.5, 0 },
  },
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants