Page 1 of 1

Forum Extensions

Posted: Sat Feb 13, 2021 3:25 pm
by cicciocb
Hi All,
I did some background work on the new forum, in particular implementing the following extensions :
  • Clipboard Image
Allows to paste image from clipboard to be added as an attachment.
Any image copied in the clipboard can be pasted directly into the message (this avoid the annoying action to paste into an image file and then upload it)
  • Google Translator
Adds Google Translator to the Forum Header.
This is self explanatory; actually implemented English, Spanish, German, Italian, French (other can be implemented on request)
  • Media Embed PlugIn
An official phpBB extension that allows users to embed content from allowed sites using {media] BBCode, or from simply posting a supported URL in plain text.
This allows to include images / videos and other elements from other hosting sites (i.e. youtube) simply copying the corresponding url
  • phpBB Studio Prism JS syntax highlighter

This is probably the most useful on the list as it enable to show the code with the correct syntax highlight.
I customised this plugin to show the code following the colours defined in the Annex internal editor.

To use it, simply use the code button
image.png
and then, in the block
image.png
add the keyword language as below
image.png
For example this program is with the (code=annex)

Code: [Local Link Removed for Guests]

'I2C Address Scanner
'print in the console the address of the devices found
I2C.SETUP 21, 22  ' set I2C port on pins 4 and 5

for i = 0 to 120
  i2c.begin i
  if i2c.end = 0 then
    wlog"found "; i , hex$(i)
    pause 10
  end if
next i

end
or the same without the option

Code: [Local Link Removed for Guests]

'I2C Address Scanner
'print in the console the address of the devices found
I2C.SETUP 21, 22  ' set I2C port on pins 4 and 5

for i = 0 to 120
  i2c.begin i
  if i2c.end = 0 then
    wlog"found "; i , hex$(i)
    pause 10
  end if
next i

end
The library prismjs supports a lot of programming languages (you can find the full list here https://prismjs.com/ )

For example, this is a piece of html code (code=html)

Code: [Local Link Removed for Guests]

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
and this is a css code (code=css)

Code: [Local Link Removed for Guests]

div.code-toolbar:hover > .toolbar {
	opacity: 1;
}

/* Separate line b/c rules are thrown out if selector is invalid.
   IE11 and old Edge versions don't support :focus-within. */
div.code-toolbar:focus-within > .toolbar {
	opacity: 1;
}

div.code-toolbar > .toolbar .toolbar-item {
	display: inline-block;
}

div.code-toolbar > .toolbar a {
	cursor: pointer;
}
and this is a arduino code (code=arduino)

Code: [Local Link Removed for Guests]

String urlencode(String str) {
	String encodedString = "";
	char c;
	char code0;
	char code1;
	for (int i = 0; i < str.length(); i++) {
		c = str.charAt(i);
		if (c == ' ') encodedString += '+';
		else if (isalnum(c)) encodedString += c;
		else {
			code1 = (c & 0xf) + '0';
			if ((c & 0xf) > 9) code1 = (c & 0xf) - 10 + 'A';
			c = (c >> 4) & 0xf;
			code0 = c + '0';
			if (c > 9) code0 = c - 10 + 'A';
			encodedString += '%';
			encodedString += code0;
			encodedString += code1;
		}
	}
	return encodedString;
}
The code already posted can be easily shown with the right syntax simply adding the =annex in the code window.
I updated some posts in the projects group, just to confirm that it was working.

Let me know if it is not clear enough.

cicciocb

Re: Forum Extensions

Posted: Sat Feb 13, 2021 5:09 pm
by Zim
Sweet!!!
thanks
Zim

Re: Forum Extensions

Posted: Sat Feb 13, 2021 6:29 pm
by PeterN
Fantastic!
Thanks!