Syntax Highligting for Code

Started by G_G, June 08, 2011, 01:08:17 pm

Previous topic - Next topic

Ryex

September 25, 2014, 12:23:38 am #40 Last Edit: September 27, 2014, 12:01:14 pm by Ryex
done, check PM Blizz.

try useing this to help you select styles for light and dark themes instead of just edit test repeating
https://highlightjs.org/static/test.html

notice that you can select the them at the top

also this lists all the languages the highlighting supports as well as what aliases you can put in the
code=<lang>
tag to force highlighting in a language. if there is enough of it the language should be auto detected but shot one liners might need some help.


Tomorrow Night Bright looks like a good dark theme
I no longer keep up with posts in the forum very well. If you have a question or comment, about my work, or in general I welcome PM's. if you make a post in one of my threads and I don't reply with in a day or two feel free to PM me and point it out to me.<br /><br />DropBox, the best free file syncing service there is.<br />

Blizzard

Check out Daygames and our games:

King of Booze 2      King of Booze: Never Ever
Drinking Game for Android      Never have I ever for Android
Drinking Game for iOS      Never have I ever for iOS


Quote from: winkioI do not speak to bricks, either as individuals or in wall form.

Quote from: Barney StinsonWhen I get sad, I stop being sad and be awesome instead. True story.

Ryex

September 29, 2014, 03:09:55 pm #42 Last Edit: September 29, 2014, 03:13:13 pm by Ryex
Something is wrong, this is what it was dining to me before i stopped it from useing the old css. Something is preventing the css file from loading
I no longer keep up with posts in the forum very well. If you have a question or comment, about my work, or in general I welcome PM's. if you make a post in one of my threads and I don't reply with in a day or two feel free to PM me and point it out to me.<br /><br />DropBox, the best free file syncing service there is.<br />

Blizzard

Try refreshing the site, clearing your cache and/or restarting your browser. When I first uploaded everything, it was totally broken. Then I pressed F5 and it was fine. Also, I removed the highlight.css in the default folder since it wasn't even being used anymore.
Check out Daygames and our games:

King of Booze 2      King of Booze: Never Ever
Drinking Game for Android      Never have I ever for Android
Drinking Game for iOS      Never have I ever for iOS


Quote from: winkioI do not speak to bricks, either as individuals or in wall form.

Quote from: Barney StinsonWhen I get sad, I stop being sad and be awesome instead. True story.

Ryex

September 29, 2014, 08:47:34 pm #44 Last Edit: September 29, 2014, 08:57:18 pm by Ryex
oh ok ya it's working now, I did some edits, it's easier to configure now as you only have to change the variables as the top of the script.
also
CODE IS PROPERLY FORMATED DURING A PREVIEW!

http://pastebin.com/wsbvtTFC

EDIT: I tried putting it in a code tag but the the existence of a code tag in the source just made it drop some of the script :(
I no longer keep up with posts in the forum very well. If you have a question or comment, about my work, or in general I welcome PM's. if you make a post in one of my threads and I don't reply with in a day or two feel free to PM me and point it out to me.<br /><br />DropBox, the best free file syncing service there is.<br />

Blizzard

Finally, lol! I was already looking everywhere where vs.css was defined. xD I uploaded the new one.
Check out Daygames and our games:

King of Booze 2      King of Booze: Never Ever
Drinking Game for Android      Never have I ever for Android
Drinking Game for iOS      Never have I ever for iOS


Quote from: winkioI do not speak to bricks, either as individuals or in wall form.

Quote from: Barney StinsonWhen I get sad, I stop being sad and be awesome instead. True story.

Ryex

September 30, 2014, 08:10:37 pm #46 Last Edit: September 30, 2014, 08:14:50 pm by Ryex
ah crap I forgot the most important part


replace
Code: php

   // Preview
   if (!empty($modSettings['ch_enable']) && in_array($context['current_action'], array('post', 'post2')))
       $context['html_headers'] .= '
       <script type="text/javascript">
           var highlightPreviewCodeBlocks = function(){
               if (highlightPreviewCodeBlocks.calling)
                   return;
               highlightPreviewCodeBlocks.calling = true;
               var blocks = document.querySelectorAll("#preview_body pre code");
               Array.prototype.forEach.call(blocks, hljs.highlightBlock);
               highlightPreviewCodeBlocks.calling = false;
           };
           
           document.querySelector("#preview_body").addEventListener("DOMSubtreeModified", highlightPreviewCodeBlocks, false);
       </script>';


with
Code: php

   // Preview
    if (!empty($modSettings['ch_enable']) && in_array($context['current_action'], array('post', 'post2')))
        $context['html_headers'] .= '
        <script type="text/javascript">
            var highlightPreviewCodeBlocks = function(){
                if (highlightPreviewCodeBlocks.calling)
                    return;
                highlightPreviewCodeBlocks.calling = true;
                var blocks = document.querySelectorAll("#preview_body pre code");
                Array.prototype.forEach.call(blocks, hljs.highlightBlock);
                highlightPreviewCodeBlocks.calling = false;
            };

            var initPreviewHighlighting = function(){
                if (initPreviewHighlighting.called)
                    return;
                initPreviewHighlighting.called = true;
                document.querySelector("#preview_body").addEventListener("DOMSubtreeModified", highlightPreviewCodeBlocks, false);
            };

            var initPreviewHighlightingOnLoad = function(){
                document.addEventListener("DOMContentLoaded", initPreviewHighlighting, false);
                document.addEventListener("load", initPreviewHighlighting, false);
            };
           
            initPreviewHighlightingOnLoad();
           
        </script>';


otherwise the code to highlight code in the preview section when you click the preview button doesn't get attached as the preview section doesn't exist yet.
I no longer keep up with posts in the forum very well. If you have a question or comment, about my work, or in general I welcome PM's. if you make a post in one of my threads and I don't reply with in a day or two feel free to PM me and point it out to me.<br /><br />DropBox, the best free file syncing service there is.<br />

G_G

Absolutely loving it. Awesome job Ryex.

WhiteRose

Is it supposed to look like this, or is something not working properly for me?

Spoiler: ShowHide

KK20

It looked like that for me the first time too. But refreshing did the trick. It's one of those many mysteries of the internet~

Other Projects
RPG Maker XP Ace  Upgrade RMXP to RMVXA performance!
XPA Tilemap  Tilemap rewrite with many features, including custom resolution!

Nintendo Switch Friend Code: 8310-1917-5318
Discord: KK20 Tyler#8901

Join the CP Discord Server!

Ryex

if it looks like that It means it' cached the old highlight.pack.js/css files and you need to force the page to refresh.
I no longer keep up with posts in the forum very well. If you have a question or comment, about my work, or in general I welcome PM's. if you make a post in one of my threads and I don't reply with in a day or two feel free to PM me and point it out to me.<br /><br />DropBox, the best free file syncing service there is.<br />

Blizzard

The same happens for me briefly after loading/reloading the site, just before the highlighting is applied. Even with the new code.
Check out Daygames and our games:

King of Booze 2      King of Booze: Never Ever
Drinking Game for Android      Never have I ever for Android
Drinking Game for iOS      Never have I ever for iOS


Quote from: winkioI do not speak to bricks, either as individuals or in wall form.

Quote from: Barney StinsonWhen I get sad, I stop being sad and be awesome instead. True story.

Blizzard

*double post* Ryex, something's wrong. Check out the script. Its line breaks are broken.

http://forum.chaos-project.com/index.php/topic,4284.0
Check out Daygames and our games:

King of Booze 2      King of Booze: Never Ever
Drinking Game for Android      Never have I ever for Android
Drinking Game for iOS      Never have I ever for iOS


Quote from: winkioI do not speak to bricks, either as individuals or in wall form.

Quote from: Barney StinsonWhen I get sad, I stop being sad and be awesome instead. True story.

Ryex

October 04, 2014, 11:49:17 am #53 Last Edit: October 04, 2014, 12:57:38 pm by Ryex
it's auto detecting as elixir instead of ruby. we should probably go and generate a Highlight.pack.js that doesn't include every language possible to avoid it detecting the weird languages.

we should probably go here and build a version with less than all the languages
https://highlightjs.org/download/
I no longer keep up with posts in the forum very well. If you have a question or comment, about my work, or in general I welcome PM's. if you make a post in one of my threads and I don't reply with in a day or two feel free to PM me and point it out to me.<br /><br />DropBox, the best free file syncing service there is.<br />

Blizzard

Check out Daygames and our games:

King of Booze 2      King of Booze: Never Ever
Drinking Game for Android      Never have I ever for Android
Drinking Game for iOS      Never have I ever for iOS


Quote from: winkioI do not speak to bricks, either as individuals or in wall form.

Quote from: Barney StinsonWhen I get sad, I stop being sad and be awesome instead. True story.

Ryex

I figured out why we get the weird formatting on non highlighted blocks of text (remember you can turn off hilightinging by useing code=nohighlight or code=no-highlight)
you need to add
Code: nohighlight

display: block;


to all your
Code: css

.code, pre.code {
...
}


blocks in your theme css files
I no longer keep up with posts in the forum very well. If you have a question or comment, about my work, or in general I welcome PM's. if you make a post in one of my threads and I don't reply with in a day or two feel free to PM me and point it out to me.<br /><br />DropBox, the best free file syncing service there is.<br />

Blizzard

Check out Daygames and our games:

King of Booze 2      King of Booze: Never Ever
Drinking Game for Android      Never have I ever for Android
Drinking Game for iOS      Never have I ever for iOS


Quote from: winkioI do not speak to bricks, either as individuals or in wall form.

Quote from: Barney StinsonWhen I get sad, I stop being sad and be awesome instead. True story.

G_G

Dunno if it's something that can be fixed, but it doesn't seem to be liking the tab character.

You can clearly see there's a tab.


But it won't show it in the post.


Making scripts look like garbage.


Blizzard

Check out Daygames and our games:

King of Booze 2      King of Booze: Never Ever
Drinking Game for Android      Never have I ever for Android
Drinking Game for iOS      Never have I ever for iOS


Quote from: winkioI do not speak to bricks, either as individuals or in wall form.

Quote from: Barney StinsonWhen I get sad, I stop being sad and be awesome instead. True story.

Ryex

it's because the web in general doesn't like the tab character there is no standardizes support for it's display.

replacing with spaces might be the only option
I no longer keep up with posts in the forum very well. If you have a question or comment, about my work, or in general I welcome PM's. if you make a post in one of my threads and I don't reply with in a day or two feel free to PM me and point it out to me.<br /><br />DropBox, the best free file syncing service there is.<br />