Markdown highlights

[niksingh710]

Does the theme have markdown highlights? as for me the markdown file is pure pale without any colors.

[niksingh710]

it works nicely in tokyonight theme

[niksingh710]

markdownHeadingDelimiter = { fg = colors.orange, bold = true },
          markdownCode = { fg = colors.teal },
          markdownCodeBlock = { fg = colors.teal },
          markdownH1 = { fg = colors.magenta, bold = true },
          markdownH2 = { fg = colors.blue, bold = true },
          markdownLinkText = { fg = colors.blue, underline = true },
          ["@markup.list.markdown"] = { fg = colors.orange, bold = true },

addition of these

local markdown_rainbow =
          { colors.blue, colors.yellow, colors.green, colors.teal, colors.magenta, colors.purple }

        for i, color in ipairs(markdown_rainbow) do
          theme["@markup.heading." .. i .. ".markdown"] = { fg = color, bold = true }
          theme["Headline" .. i] = { bg = color }
        end

this got working partially in custom highlights. but not completly reference

[tiagovla]

Hi! Do you have a small snippet of markdown and how it looks like in both themes?

[niksingh710]

tokyonight

tokyodark

[tiagovla]

That's weird. Mine has highlights with and without treesitter. Is this happening to all other filetypes?

[niksingh710]

return {
  {
    "tiagovla/tokyodark.nvim",
    -- enabled = false,
    priority = 1000,
    lazy = false,
    opts = {
      -- custom options here
      transparent_background = true,
      gamma = 1.00,
      styles = {
        comments = { italic = true },
        keywords = { italic = true },
        identifiers = { italic = true },
        functions = {},
        strings = {},
        variables = {},
      },
      terminal_colors = true,
      custom_highlights = function(highlights, colors)
        return {
          TelescopeMatching = { fg = colors.orange },
          TelescopeSelection = { fg = colors.fg, bg = colors.bg1, bold = true },
          TelescopePromptPrefix = { bg = colors.bg1 },
          TelescopePromptNormal = { bg = colors.bg1 },
          TelescopeResultsNormal = { bg = colors.bg0 },
          TelescopePreviewNormal = { bg = colors.bg0 },
          TelescopePromptBorder = { bg = colors.bg1, fg = colors.bg1 },
          TelescopeResultsBorder = { bg = colors.bg0, fg = colors.bg0 },
          TelescopePreviewBorder = { bg = colors.bg0, fg = colors.bg0 },
          TelescopePromptTitle = { bg = colors.purple, fg = colors.bg0 },
          TelescopeResultsTitle = { fg = colors.bg0 },
          TelescopePreviewTitle = { bg = colors.green, fg = colors.bg0 },

          PMenu = { bg = "none" }, -- make cmp menu transparent
        }
      end, -- extend highlights
    },
    config = function(_, opts)
      require("tokyodark").setup(opts) -- calling setup is optional
      vim.cmd("colorscheme tokyodark")
    end,
  },
}

This is my config. I tried my same config in minimal.lua and it worked. now i am confused what is overriding the highlights for markdown and specifically overriding tokyodark one's as it is not happening with other themes.

[niksingh710]

@tiagovla i figured out the culprit.

{
    "nvim-treesitter/nvim-treesitter",
    event = { "BufReadPost", "BufNewFile" },
    build = ":TSUpdate",
    config = function()
      require("nvim-treesitter.configs").setup({
        ensure_installed = "all",
        highlight = {
          enable = true,
          use_languagetree = true,
          additional_vim_regex_highlighting = false,
        },
        indent = { enable = true },
        auto_install = true,
        sync_install = true,
      })
    end,
  },

in my treesitter config if additional_vim_regex_highlighting is false then tokyodark markdown highlight is not working. but works for other theme.

[niksingh710]

how you got them to be circle? like any plugin that is concealing them? and which font?

[tiagovla]

I'm not sure what is concealing them, to be honest. That is Monolisa.

That is the default Vim highlighting, then. I will see what the other plugins are doing. Maybe people prefer to disable the Vim highlighting and only have tree-sitter.

[shreyas-a-s]

I also am someone preferring treesitter over vim_regex_highlighting because I think vim's way makes the highlighting a bit slower when used along with treesitter.

I am currently using this treesitter code to set vim highlighting only on markdown files.

    highlight = {
      enable = true,
      additional_vim_regex_highlighting = { "markdown" },
    },

It would be nice to see what is causing this issue in tokyodark.

[tiagovla]

I will look into it, thanks for the temporary fix suggestion.

[shreyas-a-s]

I think I found the culprit. It was simply the lack of treesitter 'markup' highlights. See this video:

https://github.com/tiagovla/tokyodark.nvim/assets/137637016/d460d2fc-6cd3-4111-8065-e0348488526f

In the first part of video, when only the treesitter highlight is enabled, it required that markup.something.markdown highlights are set. Otherwise no colors will be shown. In the second part though, when using additional vim highlights for markdown - the temporary fix i suggested - vim's native syntax highlighting is used and tokyodark has the highlighting needed for that already here. Hence colors are shown.

So the fix would be addition of treesitter specific highlights. An example I made using links to tokyodark's existing highlights:

["@markup"] = { link = "@none" },
["@markup.emphasis"] = { italic = true },
["@markup.heading"] = { link = "Title" },
["@markup.heading.1.markdown"] = { link = "markdownH1" },
["@markup.heading.2.markdown"] = { link = "markdownH2" },
["@markup.heading.3.markdown"] = { link = "markdownH3" },
["@markup.heading.4.markdown"] = { link = "markdownH4" },
["@markup.heading.5.markdown"] = { link = "markdownH5" },
["@markup.heading.6.markdown"] = { link = "markdownH6" },
["@markup.link"] = { link = "markdownLinkText" },
["@markup.link.label"] = { link = "SpecialChar" },
["@markup.link.label.symbol"] = { link = "Identifier" },
["@markup.link.url"] = { link = "markdownUrl" },
["@markup.list"] = { link = "markdownListMarker" },
["@markup.list.checked"] = { fg = "#73daca" },
["@markup.list.markdown"] = { link = "markdownListMarker" },
["@markup.list.unchecked"] = { fg = "#7aa2f7" },
["@markup.strikethrough"] = { strikethrough = true },
["@markup.strong"] = { bold = true },
["@markup.underline"] = { underline = true },

See the implementations in tokyonight by folke here and that in my tokyodark fork here.

[tiagovla]

Funnily enough, I have additional_vim_regex_highlighting set to false but I still get markdown highlights from treesitter. I will check those out. Maybe I should add a minimal configuration with only Tokyodark and Treesitter so that other issues can be easily reproduced.

[shreyas-a-s]

Oh. That definitely is pretty weird. But as is the case of any code that we put into our lil computers.

Check it out when you have time and you feel like to. I am very curious to know the reason.

That's a really nice idea. Since the colors are mostly dependent only on the colorscheme and treesitter, I think such a minimal config would be a great addition to the project.

[tiagovla]

Using this

# heading 1
## heading 2
### heading 3
#### heading 4 
##### heading 5
###### heading 6

[link](www.github.com)
**bold**
*italic*
***bold and italic***

1. item 1
2. item 2

- item 1
- item 2

[ ] box
[x] checked box

```python
    def hello() -> str:
        return "hello"

shows like this using nvim 0.10 with the minimal config I added to the bug report template

The ones that need better highlighting are the link and checkbox. Also, obsidian.nvim was adding extra highlights for me, I guess. You don't get any highlights because you are using 0.9.5, I will add all of them just in case.

[shreyas-a-s]

Yeah. That I also noticed. Not all highlights are 'off', just a few of them.

Obsidian, yeah it makes sense. I kinda like those highlights and conceals provided by it. I might as well try it.

I agree. Adding all of them highlights would be the way to go just for the completeness.

Also a small feature idea from my side would be to color differently the levels of headings like H1, H2 so as to distinguish them easily and for adding a little flair to the code. I like it that way. But I undestand everybody's tastes differ and there is custom highlights option in the colorscheme setup function for anybody to tweak to their liking. Hence no need to change if you prefer the same color.