miaolz123 / vue-markdown

A Powerful and Highspeed Markdown Parser for Vue
https://miaolz123.github.io/vue-markdown/
MIT License
1.91k stars 258 forks source link

Can I use line-number in Prism.js ? #76

Open bactoria opened 6 years ago

bactoria commented 6 years ago

I use vue-markdown for my blog posting :)

and I use Prism.js for code block more pretty.

but, I don't know How can I show line-numbers.

I checked line-number in Prism.js but it didn't work.

I wanna view line-numbers.

if is here some guys have been line-numbers , Can you tell me how ??

 

here is settings,

 

and here is my result

image

and under is what i want.

image

 

Hint

for line-numbers, class must be .line-numbers

but, my result isn't have .line-nubers class

thx~

acmookey commented 4 years ago

Obviously you have a solution after two years, the following content for anyone have the same demand or problem with using line-numbers plugin:

Official document Reference :

Obviously, this is supposed to work only for code blocks (<pre><code>) and not for inline code.

Add the line-numbers class to your desired <pre> or any of its ancestors, and the line-numbers plugin will take care of the rest. To give all code blocks line numbers, add the line-numbers class to the <body> of the page.

so, if you cannot add line-numbers class to the <pre> element, you can simply add line-numbers class to any of its ancestors, it does work for me!