News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

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: