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: