Categories

Additional language for [code=…] bbcode

You are here:
< All Topics

Since xenForo 2.0.1 release you can add additional language support on your forum. There was no way to do so before due to this bug.

This method of adding additional language was proposed by @Chris D.

In this example, I will be adding LaTeX support.

1. Downloading PrismJS components
xenForo uses PrismJS library for highlighting code in [code=...] blocks. Not all languages are included in PrismJS that goes with xenForo by default. So you will have to add additional languages directly.

Go to PrismJS components page. There are a lot of files. You need to find the file with the name of the language you want support on your forum. In this example we need to download prism-latex.min.js. Note that there are two files with almost the same name on that page:

  • prism-latex.js
  • prism-latex.min.js

We are downloading the minified .min version of this file. It is compressed and will load faster.

2. Locating downloaded files
In your forum root folder go to js folder and create a prism_additional directory.
Move your downloaded file (prism-latex.min.js in my example) to created folder.

3. Registering additional language in xenForo
Go to Admin CP -> Settings -> Options and select “Messages” option page. (admin.php?options/groups/messageOptions/)

Add the name of added language to “Allowed code BB code block languages” list (latex in this example).

Now go to prism_macros template and add this code (don’t forge to replace latex with your language name):
HTML:

<xf:js src="prism_additional/prism-latex.min.js" />

right after:
HTML:

<xf:js prod="xf/code_block-compiled.js" dev="vendor/prism/prism.min.js, xf/code_block.js" />

The final code should look like that:
HTML:

<xf:macro name="setup">
    <xf:css src="bb_code.less" />
    <xf:js prod="xf/code_block-compiled.js" dev="vendor/prism/prism.min.js, xf/code_block.js" />
    <xf:js src="prism_additional/prism-latex.min.js" />
</xf:macro>

Now go to Appearence -> Phrases and add new code_language.latex phrase. In “Phrase text” type the name of the language (“LaTeX” in this example).

That’s all!

You can insert code blocks with LaTeX code and they will be correctly highlighted:

latex_code.png

_______________________________________

If you want to define “Common languages” or “Default language” I highly recommend to use my addon: Code! The approach below is buggy and not working correctly!

_______________________________________

Adding language to “Common languages”
If you want to add custom language to “Common languages” option group go to editor_dialog_code template and find this code:
HTML:

<xf:optgroup label="{{ phrase('common_languages') }}">
    <xf:foreach loop="$languages" key="$key" value="$language">
        <xf:if is="$language.common">
            <xf:option value="{$key}">{$language.phrase}</xf:option>
        </xf:if>
    </xf:foreach>
</xf:optgroup>

Paste new option <xf:option value="latex">{{ phrase('code_language.latex') }}</xf:option> between <xf:optgroup... and <xf:foreach... lines so the code will look like:
HTML:

<xf:optgroup label="{{ phrase('common_languages') }}">

    <xf:option value="latex">{{ phrase('code_language.latex') }}</xf:option>

    <xf:foreach loop="$languages" key="$key" value="$language">
        <xf:if is="$language.common">
            <xf:option value="{$key}">{$language.phrase}</xf:option>
        </xf:if>
    </xf:foreach>
</xf:optgroup>

You can now choose added additional language from “Common languages” option group.

latex_common_languages.png

Setting the default language option when adding code
xenForo choses “General code” option by default. You want to change this behaviour and set a different language as a default option.

Go to editor_dialog_code template.

If you added additional language in “Common languages” option group simpy add selected="true" attribute to additional language option:
HTML:

<xf:option value="latex" selected="true">{{ phrase('code_language.latex') }}</xf:option>

If there is no direct <xf:option with needed language name in the template you will have to modify <xf:foreach... loop a bit. Replace this block:
HTML:

<xf:optgroup label="{{ phrase('other_languages') }}">
    <xf:foreach loop="$languages" key="$key" value="$language">
        <xf:option value="{$key}">{$language.phrase}</xf:option>
    </xf:foreach>
</xf:optgroup>

With this code:
HTML:

<xf:optgroup label="{{ phrase('other_languages') }}">
    <xf:foreach loop="$languages" key="$key" value="$language">
        <xf:if is="$key == 'latex'">
            <xf:option value="latex" selected="true">{$language.phrase}</xf:option>
            <xf:else />
            <xf:option value="{$key}">{$language.phrase}</xf:option>
        </xf:if>
    </xf:foreach>
</xf:optgroup>

Don’t forget to replace latex with the name of your language.

Table of Contents