News:

SMF 2.0.19 has been released! Please update. Read more.

Main Menu

highlight.js for SMF

Started by Bugo, August 28, 2011, 01:18:09 PM

Previous topic - Next topic

Bugo


gevv

ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

Bugo

Alternative solution - replace highlight.css:

.block_code {
position: relative;
}
.block_code pre code {
display: block;
font-family: "DejaVu Sans Mono", Monaco, Consolas, monospace;
white-space: pre-wrap;
}
pre {
overflow: auto;
max-height: 20em;
background: #f6f6f6;
border: 2px solid #ddd;
border-radius: 2px;
position: relative;
}
.bd-clipboard {
position: relative;
display: none;
}
@media (min-width: 768px) {
.bd-clipboard {
display: block;
}
}
.bd-clipboard+pre{
margin-top:0;
}
pre .btn-clipboard {
position: absolute;
right: 4px;
top: 4px;
background-color: #eee;
border-color: #ddd;
border-radius: 2px;
background-image: url(../images/clippy.svg);
background-position: 50% 50%;
background-size: 16px 16px;
background-repeat: no-repeat;
width: 27px;
height: 1.525rem;
display: inline-block;
vertical-align: middle;
background-color: #f9f2f4;
margin-left: -.2rem;
cursor: pointer;
}
.btn-clipboard:hover {
background-color: #d9d9d9;
}

.hljs-ln-numbers {
text-align: center;
color: #f36;
border-right: 1px solid #f36;
vertical-align: top;
min-width: 25px;
}
.hljs-ln-code {
padding-left: 10px !important;
}

alkisg

Hi, I tried adding Code Highlighting in my forum, but I had the following problem:

Code (Bash) Select

sudo -i
apt update && apt full-upgrade --yes && apt purge --auto-remove $(dpkg -l | awk '/^rc/ { print $2 }')


In the above example, when code highlighting is active, it displays "print Bash" instead of "print $2". I guess Bash comes from the language, code=Bash.
So I disabled the highlighting until we can find a solution. Any workarounds? Thank you!

gevv

Hello,

@Bugo 

Php, css, html etc. nice to color highlight.js

But not sensible coloring in other languages. (Even though i tried Custom package)

Prism.js coloring sensible. https://prismjs.com/test.html

How can I use prism.js instead of highlight.pack.js
ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

Bugo

@alkisg, try to use [code]your code[/code] instead of [code=Bash]your code[/code]. Perhaps I will solve this issue in the future.

alkisg

Hi Bugo, unfortunately I can't do that because I would have to modify hundreds of existing posts. We were using the geshi plugin in the past, so we already have a lot of such posts.
For now, I completely disabled code highlighting. Thank you for your feedback!

alexetgus

#67
Hi there,

With the latest mod (v1.4.1) for SMF 2.0, line breaks no longer exist if you enable line numbering!
That's a shame! :'(
When the hooks are installed, nothing goes right...

Before:



After :



You cannot view this attachment.
You cannot view this attachment.



Bugo

v1.0 (SMF 2.1), v1.5 (SMF 2.0)
  • Updated the script and styles
  • Fixed found issues

alexetgus

Cool, the bug is gone! :)

Thanks Bugo. ;)

gevv

Hi,

@Bugo old topic have line issues. Displaying contiguous without line spaces. 

SMF 2.1.1 
Code Highlighting 1.0 (2.1)



Old  topic;

You cannot view this attachment.


Edit topic (without changes)

You cannot view this attachment.


Refresh the page

You cannot view this attachment.

ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

Bugo

Send me the current and the correct versions of this code via https://www.toptal.com/developers/hastebin/

gevv

ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

Bugo

Are you using automatic language detection or specify lang by manual via [code=cpp][/code]?
Try to disable line numbers or disable the whole syntax highlighting — does it resolve the problem?
Alternatively, try the PrismJS mod.

gevv

I am using automatic language detection. I tried disabling numbering it didn't work

This issue only appears on old topic.

I'm trying Prismjs now thanks.
ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

Bugo

"Old topics" - do you mean those topics that were created in SMF 2.0?
Look into your database and compare an old and a new topic with the same content.

alkisg

I'm currently trying to use prismjs-for-SMF and I bumped into a similar issue. The reason was that older posts use `<br />` instead of `<br>`. The fix would be to change this line:

Code (php) Select
// from:
            return str_replace('<br>', "\n", $matches[0]);
// to:
            return str_replace(['<br>', '<br />'], "\n", $matches[0]);



gevv

Hi,

@Bugo Long texts are not visible on mobile. add right left scrollbar?

You cannot view this attachment.

You cannot view this attachment. 
ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

gevv

ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

Advertisement: