Add <div> on a MediaWiki geshi syntax highlight extension

235 views Asked by At

I use mediawiki to take note about the procedure that I follow, the source codes I write in mediawiki are highlighted with the expansion Genshi Syntax HighLight. I want to modify this expansion in mediawiki so it could be created a box above the source code in which it is written the programming language I used. I tried to see expansion sources in my mediawiki but I didn't find the segment in which is "sketch" the <div>. I also saw material about the creation of new expansion in mediawiki to understand how it runs, but I don't understand where the box is created.

I use syntax hightligher like this some_code

and this is the result in html code generate from mediawiki

<div class="mw-geshi mw-code mw-content-ltr" dir="ltr">
  <div class="bash source-bash">
   <pre class="de1">
    some_code
  </pre>
 </div> 
</div>

I want to prepen the div to first div, like this

<div class='gsh-lang-label'>Language bash</div>
<div class="mw-geshi mw-code mw-content-ltr" dir="ltr">
  <div class="bash source-bash">
   <pre class="de1">
    some_code
  </pre>
 </div> 
</div>

Can you explain me if it is possible to do it and how can I face the problem?

1

There are 1 answers

0
Sorawee Porncharoenwase On BEST ANSWER

I think ordinary jQuery will solve this problem. Something like:

$(".mw-geshi").each(function(){
    $(this).before("<div class='gsh-lang-label'>" + 
                   $(this).children().first().attr("class").split(' ')[0] + 
                   "</div>")
})

Put this in [[MediaWiki:Common.js]], so this script will be run for every user.