The way to change the TAB width in highlight.js is in this issue: highlightjs/highlight.js#508

from emgithub.

Thanks for your suggestions!

All the changes are made at branch improve-code-display. You can try and test yourself. If that is OK to you, we can merge it into master :)

TAB width

Sorry but after searching it seems that 8 is the default width for TAB.

• https://stackoverflow.com/questions/50524579/how-to-set-tab-size-in-github-web-interface
• isaacs/github#170
• https://stackoverflow.com/questions/8833953/how-to-change-tab-size-on-github

Also I did a test, TABs in the files were rendered as 8 space width, on my PC and phone.

• https://github.com/yusanshi/embed-like-gist/blob/test/test-tab-width.java
• https://github.com/yusanshi/embed-like-gist/blob/test/test-tab-width.txt

So I think directly setting TAB size to 4 is not ideal.

However, on GitHub web surface, TAB width can be specified by ?ts=X, I think we can take it into this project. Although hljs.configure({tabReplace: ' '}) does work, I didn't use this since it will modify the original content, i.e. you copy the code but all TABs become spaces. I use CSS style tab-size: X instead. In fact, I found that GitHub implements ts=X using tab-size: X.

Currently, https://github.com/yusanshi/embed-like-gist/blob/test/test-tab-width.java?ts=2#L2-L4 in this project should behave basically the same as it does on GitHub web interface.

Font size

Make sense! Changed to 12px.

Id and class

Good suggestion! Currently id is used to locate DIV (to support the same code embedded many times, a random string instead of params.toString() is used).
Also, The outermost div has a class attribute emgithub-container. So you can do any hacks you want.

from emgithub.

Well, it may be that .editorconfig affects the TAB size on GitHub 😅

I have tested them all and everything is working fine! Thank you very much!

from emgithub.

I'll close this issue and merge the PR

from emgithub.