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

alexetgus

Quote from: ramcor on September 06, 2022, 07:00:06 AMDoes this mod work for 2.0.19? If not, is there any alternative? Thanks.


Yes, this mod works in 2.0.19

Personally, I modified the CSS. It didn't really suit me.
But everyone does as they please. ;)


underc0de

Hi all! I installed the mod in SMF 2.1.3 and I can't see the highlight in the code



Thanks in advanced

Bugo

Try to disable loading from CDN.

Melonking

#83
Quote from: alexetgus on September 06, 2022, 10:17:18 AMYes, this mod works in 2.0.19

When I try and install 1.2.3 on SMF 2.0.19 it says its incompatible or corrupt  :(

underc0de


Bugo



Melonking

If anyone has a copy of code_highlighting_1.5_smf20.zip that would be handy! I can see in on the WayBackMachine but I cant actually download it!

@Bugo Its fine that you don't wanna support older versions - but it would be helpful if you provided an archive of unsupported past versions of your mods.

alexetgus

You are lucky, Melonking, I found your happiness in my archives.  :)

You cannot view this attachment.
 

Melonking

Quote from: alexetgus on February 12, 2023, 10:42:36 AMYou are lucky, Melonking, I found your happiness in my archives.  :)

You cannot view this attachment.
 

This is great thank you - it works! AND I love all the themes  ;D  ;D

ThomasWi

Thanks for sharing this mod.

Is there a way to allow the user to resize the text field?
Or, better without this mod there is an "Expand" button that I find helpful:
Code (vb): [Select] [Expand]

Also, is it possible to never wordwrap long code lines but show a horizontal scroll bar instead?

Bugo

Leave a review, and I'll see what I can do.

ThomasWi

Thanks, done.

I just noticed that the horizontal scrollbar is also the default behavior of stock-SMF.
"Expand" enlarges the form vertically to the entire code.
I like this behavior of stock-SMF, but syntax highlighting is mandatory.

Bugo

v1.3

  • Added support of standard SMF behavior for code blocks (optional)
  • Added an option to show/hide the copy button

ThomasWi

Very cool, thanks!

I like the scrollbar behavior of stock SMF a little better, but that's just a small thing.
I attach an image to compare this release with stock SMF.

Also I've sent you a pull request via GitHub with German translation, hope that helps.

You cannot view this attachment.

Bugo

Try to test this version of highlight.css:

Code (css) Select
.block_code {
    position: relative;
}
.block_code pre code {
    display: block;
    font-family: "Fira Code", "DejaVu Sans Mono", Menlo, Monaco, Consolas, monospace;
    overflow: auto !important;
    height: auto !important;
}
pre {
    overflow: auto;
    max-height: 20em;
    background: #f6f6f6;
    border: 2px solid #ddd;
    border-radius: 2px;
    position: relative;
}
.block_code.bbc_code {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    white-space: nowrap !important;
}
.block_code.bbc_code pre {
    max-height: initial;
}
.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: 14px;
    top: 4px;
    background-color: #eee;
    border-color: #ddd;
    border-radius: 2px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHdpZHRoPSI4OTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxwYXRoIGQ9Ik0xMjggNzY4aDI1NnY2NEgxMjh2LTY0eiBtMzIwLTM4NEgxMjh2NjRoMzIwdi02NHogbTEyOCAxOTJWNDQ4TDM4NCA2NDBsMTkyIDE5MlY3MDRoMzIwVjU3Nkg1NzZ6IG0tMjg4LTY0SDEyOHY2NGgxNjB2LTY0ek0xMjggNzA0aDE2MHYtNjRIMTI4djY0eiBtNTc2IDY0aDY0djEyOGMtMSAxOC03IDMzLTE5IDQ1cy0yNyAxOC00NSAxOUg2NGMtMzUgMC02NC0yOS02NC02NFYxOTJjMC0zNSAyOS02NCA2NC02NGgxOTJDMjU2IDU3IDMxMyAwIDM4NCAwczEyOCA1NyAxMjggMTI4aDE5MmMzNSAwIDY0IDI5IDY0IDY0djMyMGgtNjRWMzIwSDY0djU3Nmg2NDBWNzY4ek0xMjggMjU2aDUxMmMwLTM1LTI5LTY0LTY0LTY0aC02NGMtMzUgMC02NC0yOS02NC02NHMtMjktNjQtNjQtNjQtNjQgMjktNjQgNjQtMjkgNjQtNjQgNjRoLTY0Yy0zNSAwLTY0IDI5LTY0IDY0eiIgLz4NCjwvc3ZnPg0K");
    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 {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    color: #f36;
    border-right: 1px solid #f36;
    vertical-align: top;
    min-width: 25px;
}
.hljs-ln-code {
    padding-left: 10px !important;
}
.hljs-ln-n {
    padding-right: 10px !important;
}

ThomasWi

Perfect.
Only the two "Code" rows (see screenshot) could be combined to one row:
Code (vb): [Select] [Expand]

Btw. This forum should use your mod :)

You cannot view this attachment.

Advertisement: