v0.1.1-alpha pre-release

What is new:

• The copy button is now styled differently as well as it only shows itself when the mouse hovers over the MultiCodeBlock
• Added more community features to the project
  • README.md renewed
  • CONTRIBUTING.md added
  • CITATION.cff added
  • Issue Templates added

Fixes/ Changes:

• The input of non-english characters resulted in a wrong representation of them. Now every character is read as an UTF-8 character.

• Arrays are only in the [ ]-Syntax

• Unnecessary css classes removed

v0.1.0-alpha pre-release

Version 0.1.0 Alpha

The first version of MultiCodeBlock and so it adds the whole MultiCodeBlock.

What is MultiCodeBlock

MultiCodeBlock creates a codeblock consisting of multiple languages and a special way of commenting the code.

How it works

The input is structured in a HTML-Style:

• <multicodeblock> - This is the main body of the codeblock and directly calls MultiCodeBlock::renderMultiCodeBlock by MediaWiki
  • <codeblock lang="<language>">" - These are the different codeblocks (languages). The order of these codeblocks decides the order in the navigation. The language is the filetype and not the name of the programming language itself, but it is possible to use the name.
    • <code> - This is the code itself and is going to be highlighted. (There can be multiple code blocks)
    • <desc> - The description is a block of different blocks of the description. (There can be multiple desc-Tags)
      • <position line="<line-number>"> - The positions are holding the description itself the the starting point of the description (relative to the code). It is possible to write in Wiki-Syntax in these.

So it would be something like this:

<multicodeblock>
    <codeblock lang="cpp">
        <code>
#include <iostream>
 
int main() {
  std::cout << "Hello, World!" << std::endl;

  return 0;
}
        </code>
        <desc>
            <position line="3">
                '''This''' is the <code>main</code>-function
            </position>
            <position line="5">
                Here stops everything.
            </position>
        </desc>
</multicodeblock>

Currently the tabs in the code are rendered in the browser and so there shouldn't be and unnecessary tabs. This creates the break in the <code>-block.

---

The output is an element that wraps around the different codeblocks and enables the user to switch through the different codesnippets and another element that wraps around these to navigate through the different languages.
The Codesnippets itself are highlighted serverside are seperated into blocks in a table where on the right are the different descriptions for the codeblocks.

So it would be something like this, but with more things that allow the use of the buttons.

<!-- The element with the language -->
<element lang="<language>">
    <!-- The element with the code -->
    <element>
        <!-- The table with the code itself -->
        <table>
        </table>
    </element>
</element>

The CSS and the JavaScript are send to the user through the MediaWiki ResourceLoader that compresses the files automatically.

---

This codeblock is an element where the different versions of the code are accessible through a navigation on the left side.
The codeblocks itself are a table that has the code on the left side and the comments on the right side. The Code is seperated into rows with a simple ordered list that starts on each table cell with a specific value.

To avoid problems with selecting the code there are two ways of copying it: The first way is the raw selection that is made possible with JavaScript and the constant removal and addition of the user-select: none; css property and the second way is by clicking the button on the right side that is copying the code and is directly adding it into the clipboard.