Advertisement:

Author Topic: Code Highlighting  (Read 22512 times)

Offline Bugo

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,648
  • Gender: Male
    • dragomano on GitHub
    • Support me on Ko-fi
Re: Code Highlighting
« Reply #60 on: February 01, 2021, 06:59:49 AM »
Disable line numbers.

Offline gevv

  • Full Member
  • ***
  • Posts: 607
  • Gender: Male
  • ElkArte powerful forum software
    • elkarte on GitHub
    • https://www.elkarte.net/
Re: Code Highlighting
« Reply #61 on: February 02, 2021, 01:53:26 PM »
Thanks @Bugo
ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

Offline Bugo

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,648
  • Gender: Male
    • dragomano on GitHub
    • Support me on Ko-fi
Re: Code Highlighting
« Reply #62 on: February 02, 2021, 10:23:42 PM »
Alternative solution - replace highlight.css:
Code: [Select]
.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;
}

Offline alkisg

  • Semi-Newbie
  • *
  • Posts: 28
Re: Code Highlighting
« Reply #63 on: February 18, 2021, 05:23:35 AM »
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!

Offline gevv

  • Full Member
  • ***
  • Posts: 607
  • Gender: Male
  • ElkArte powerful forum software
    • elkarte on GitHub
    • https://www.elkarte.net/
Re: Code Highlighting
« Reply #64 on: February 18, 2021, 07:18:53 AM »
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/

Offline Bugo

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,648
  • Gender: Male
    • dragomano on GitHub
    • Support me on Ko-fi
Re: Code Highlighting
« Reply #65 on: February 18, 2021, 10:03:47 AM »
@alkisg, try to use [code]your code[/code] instead of [code=Bash]your code[/code]. Perhaps I will solve this issue in the future.

Offline alkisg

  • Semi-Newbie
  • *
  • Posts: 28
Re: Code Highlighting
« Reply #66 on: February 18, 2021, 10:43:49 AM »
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!