nyable/obsidian-code-block-enhancer

Enhance obsidian markdown code block,provides copy button,linenumber,language name tip and so on.

Obsidian Code Block Enhancer

This is a plugin for Obsidian (https://obsidian.md).
Inspired by obsidian-code-block-copy.

Note: The Obsidian API is still in early alpha and is subject to change at any time!

Feature

Enhancer the markdown code block in preview mode.

• Provide Copy Button.
• Provide Line Number.
• Show Language Name.
• Custom exclusion language.
• Enhance contextmenu in code block.

Screenshot

Default Dark theme

Default Light theme

Gruvbox theme

Nord theme

Plugin setting

How to use

Obsidian

• Open Obsidian
• Settings -> Community plugins -> Turn off Safe Mode
• Browes community plugins and search Code Block Enhancer
• Install and enable

Releases

• Download main.js, styles.css, manifest.json in the latest release
• Copy over main.js, styles.css, manifest.json to your vault VaultFolder/.obsidian/plugins/obsidian-code-block-enhancer/.
• Enable plugin in Obsidian setting.

Source Code

• Clone this repo.
• npm i or yarn to install dependencies
• npm run build to build file in ./dist.
• Copy over main.js, styles.css, manifest.json to your vault VaultFolder/.obsidian/plugins/obsidian-code-block-enhancer/.
• Enable plugin in Obsidian setting.

obsidian-code-block-enhancer's Issues

CodeMirror Options plugin incompatibility

The CodeMirror Options plugin has an option to make syntax highlighting consistent between preview and edit mode with the Editor Syntax Highlight plugin. This unfortunately makes Code Block Enhancer (and Code Copy) incompatible with it.

I've opened an issue in all respective repos, hopefully you three can find a solution to this.

[REQUEST] Functions in editor

Hi, would it be possible to make the syntax highlighting, language identification, line numbers, and copy button work while in editor view? It's quite jarring having the syntax highlighting change completely from editor to preview.

Thank you.

lines number weird formatting in PDF

Test with this

----- BEGIN OF FILE

asdasd
asdasd
asdasdasd
asdasd
asdasdas
adsadas

----- END OF FILE

and then export to PDF

The plugin does not work well in somewhere.

• version: 1.0.5
• obsidian version: 0.12.15
• theme: obsidian nord

The plugin does not work well in list and quotation. e.g:

PLUGIN OUTDATED: Try `Code Styler` Plugin alternative

I just wanted to add this issue to note that the plugin appears to be a couple of years out of date and no longer works correctly out of the box. I know a lot of people will find their way here if they sort by most downloaded plugin, only to find that the plugin is outdated. If you're looking for the features of this plugin, I created a plugin Code Styler which has many of the same features and is currently up to date. Hopefully it should be a suitable alternative and if there is any functionality missing, please just create an issue and I can try and implement it!

(Dear @nyable, please feel free to close/delete this issue at any time if the plugin is still under development or development resumes. I just wanted to signpost people to an alternative.)

[bug] Abnormal function

The function of the real code type often conflicts with the main body, and the font cannot be displayed in full. It is recommended to learn to display the code type to the upper right corner by default, and modify the font to be more appropriate.

use contextMenu does not properly override the default copy button. In many themes there will be two duplicate buttons overlapping each other.

[feature request] comments highlight feature

some kind of comment highlight feature would be a great addition like 'better comments' extension in VS Code

Line number overlapping with code in a long row

how to set nowrap at end of line in code block

hello
this just a issue for asking a question, im sorry
How to keep code blocks from breaking lines?
just like nowrap in vim, my obsidian always warp line

Bug: Line numbers do not line up accurately with actual code lines.

I'm not sure if this is something new or it has always been a problem, but I have used this excellent plugin for a while and have only just now noticed the problem. Anyway, in Preview mode, the line numbers are slightly below the lines they refer to. See https://cln.sh/nmZLl9+.

Please provide support for line number, copy button and other formatting features in Live Preview mode of Obsidian.

Hi developer, please provide support for line number, copy button and other formatting features in Live Preview mode. At present those formatting only can be seen in Reading mode. Please provide support for the new Live Preview mode also.

Any way to make font size smaller

Love the plug in. So nice to see line numbers in code snippet. My only ask is, is there an easy way to make the font size smaller? I am using the Obsidian Nord theme, and the font size of code blocks when using this plug in is too big — in fact, it's larger than the standard note text.

[REQUEST] Wrap code option

Idea

A new option in the plugin settings to toggle line wrapping.
This would wrap lines in code blocks like this:

But the line numbers would match up instead of ignoring the fact that some lines have been wrapped, more like this:

Possible Implementation Idea

At the moment I can wrap the lines in code blocks with the following snippet:

.code-block-wrap pre[class*=language-] {
	overflow-x: hidden !important;
}

.code-block-wrap pre[class*=language-] > code {
	white-space : pre-wrap;
}

This is what I did for the first screenshot.

Unfortunately I have not had a chance to look at how you implemented line numbers, so I do not have any suggestions for how to make it compatible with wrapped lines.

Huge code-block size

Hi,

I just installed the plugin which looks to be amazing. However, I've run into an issue where the blocks are huge compared to the rest of the text.

I'm running the latest obsidian 0.13.14 with the Minimal Theme, disabling my custom snippets does not change anything with regard to the code blocks.

Any idea of how I can make them smaller? Or does it require a fix of the plugin?

Thank you!

Line numbers appear on top of Python code instead next of it.

Python code is formatted, but when changing to reading mode, line numbers appear on top of the code. Additionally the formatting seems to have changed. Finally, it would be nice if the line numbers already appeared in editing mode, i.e. there is no change between the two views.

CSS `!important`

Thanks for the plugin. I was planning to do something like that but didn't have much time :-)
Would be an issue if you remove !important! rules from your CSS code? I can not overwrite them with custom snippets (Especially the one with padding)
Thanks!

How to ignore snippets.css styling

Love the plugin, thanks!
It however isn't playing nicely with a css snippet I have from deathau, the notation-color-blocks snippet.
https://github.com/deathau/obsidian-snippets#notation-colour-blocks

Is there a way to leave this styling unaffected?
To call the styling, you write:
```note-green
green formatted text goes here
```

I tried putting 'note' and 'note-green' into the exclusion field of the code block settings (just in case it was that simple). But it didn't work of course.