A better approach to enable line-numbers in Bludit code-blocks
In my posts Things to do when updating Bludit and Bludit and syntax highlighting I detailed how to get line-numbers displayed. It always annoyed me that it involved direct code-changes in the codesample-Plugin's code from TinyMCE.
Today I updated to Bludit 3.18.4, did the manual changes, but alas no line-numbers. Nothing worked, no errors displayed. Strange.
I took the Problem to ClaudeAI and it recommended a whole different approach which I like even better. By creating a js/custom-linenumbers.js file in the admin-Theme and integrate this via a <script>-Element. The js/custom-linenumbers.js will take care of changing the <pre class="language- tags by adding line-numbers. This all happens in the background and is saved, when the article is saved. Nice!
This effectively means I don't have to do manually change code anymore. Just add a line into the update the bl-kernel/admin/themes/booty/index.php file and maybe updating the prism.js/prism.css from time to time while ensuring that the line-numbers plugin is included. Sweet!
How to integrate the custom-linenumbers.js file into the Bludit admin theme
First we create the following file as bl-kernel/admin/themes/booty/js/custom-linenumbers.js:
console.log('Loaded: custom-linenumbers.js');
// Adds the line-numbers plugin from PRISM to all <pre class="language- tags
document.addEventListener('DOMContentLoaded', function() {
if (typeof tinymce !== 'undefined') {
tinymce.on('AddEditor', function(e) {
var editor = e.editor;
editor.on('GetContent', function(evt) {
if (evt.content && evt.content.indexOf('language-') !== -1) {
// Create temporary DOM-Element
var tempDiv = document.createElement('div');
tempDiv.innerHTML = evt.content;
// Check <pre> Tags
var codeBlocks = tempDiv.querySelectorAll('pre[class*="language-"]');
codeBlocks.forEach(function(block) {
// Only add line-numbers if it isn't present
if (!block.className.includes('line-numbers')) {
block.className += ' line-numbers';
console.log('Added line-numbers to:', block.className);
}
});
// Return modified content
evt.content = tempDiv.innerHTML;
}
});
});
}
});This code is responsible for changing any occurence of class="language- to class="language- line-numbers while keeping the selected language.
Secondly we make Bludit loading this scriptfile by adding a line in bl-kernel/admin/themes/booty/index.php. Open it and search for the closing head-element (I mean </head>). The included plugins should be right above that.
Here, add the following: <script src="<?php echo DOMAIN_ADMIN_THEME.'js/custom-linenumbers.js' ?>"></script>
So your result will look like this:
[...]
?>
<!-- Plugins -->
<?php Theme::plugins('adminHead') ?>
<script src="<?php echo DOMAIN_ADMIN_THEME.'js/custom-linenumbers.js' ?>"></script>
</head>
[...]That's it.
You still need to update your bl-plugins/prism/css/prism.css and bl-plugins/prism/js/prism.js files with a version downloaded from https://prismjs.com/. Make sure the CSS includes the line-numbers plugin, it's not selected per-default. Also, to make Bludit use that also enable the Prism-Plugin in Bludit beforehand if you don't have it already. Sadly the Bludit Prism-Plugin doesn't include the line-numbers plugin, so we need to go this route.
Verify it works
Log into Bludit and hit F12 to display the Browser console. You should see the message Loaded: custom-linenumbers.js in there.
Create a new post, add a codeblock and select any language. On saving the codeblock you should see the message Added line-numbers to: ...
If you want to get rid of the message comment them out, by change the lines into //console.log...
Huh? What? I use all kinds of strange ports in my home network and never got that error message.
