Latest revision as of 10:38, 2 November 2023

Color and bold inside of pre

surround the pre tag with <html>.
then, you can use span to break the <pre>
<html> <pre> <span> <font color=red> 0 </font> </span> </pre> </html>

	/* Common settings */
	param.frequency = 0;
	param.pl5_refdiv = 1;
	param.pl5_divval = 0;
	param.pl5_spread = 0x16;

Banner for RZ/V Page

✨ Introduction Video	🎥 Demo Videos	📰 Whitepapers and Blogs	🚀 Evaluation Boards	🧭 Easy Download Guide A complete list of all downloads on renesas.com	🧩 System Examples

️ ✍️

Embedded Video

https://raw.githubusercontent.com/seebe/test/master/qtgame_1628KB.mp4

Introduction Video
✨
Overview of products and eval kits

Online Guide
🧭
Where to find information on www.renesas.com

Evaluation Boards
🚀
BSP instructions and helpful hints

Articles
📰
Learn using Articles, Whitepapers and Blogs

Demo Videos
🎥
Links to videos

System Examples
🧩
Combing components for a complete solution

Easy Download Guide
🧭
A complete list of all downloads

style="width: 85%;"

Testing copy to clipboard

sudo apt update

sudo apt update

Formatting Links

Tables: https://www.mediawiki.org/wiki/Help:Tables
Change background color of a row

heading1	heading2
cell1	cell2
cell3	cell4

{|class="wikitable"
!style="font-weight: normal"|heading1
!heading2
|-style="background-color:red"
|cell1
|cell2
|-
|cell3
|cell4
|}

Open Links in new Tab

docker container (media wiki default, same window)
docker container (custom <a> tag, target=_blank)

.mw-parser-output a.external {
    background-image: url(/w/skins/Vector/resources/common/images/link-external-small-ltr-progressive.svg?14604);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.857em;
    padding-right: 1em;
}

@@ Line 1: / Line 1: @@
+= Color and bold inside of pre =
+* surround the pre tag with '''&lt;html>'''.
+* then, you can use span to break the '''&lt;pre>'''
+* &lt;html> &lt;pre> &lt;span> &lt;font color=red> 0 &lt;/font> &lt;/span> &lt;/pre> &lt;/html>
+<html><pre>
+	<span><font color=navy><B>/* Common settings */</B></font></span>
+	param.frequency = <span><font color=red>0</font></span>;
+	param.pl5_refdiv = <span><font color=red>1</font></span>;
+	param.pl5_divval = <span><font color=red>0</font></span>;
+	param.pl5_spread = <span><font color=red>0x16</font></span>;
+</pre></html>
+= Banner for RZ/V Page =
+{| class="wikitable" style="margin: auto; color:rgb(0,0,0); background-color:rgb(183,219,255);"
+| style="height:100px; width:100px; text-align:center;" | <font size=10>✨</font><br> Introduction Video
+| style="height:100px; width:100px; text-align:center;" | <font size=10>🎥</font><br> Demo Videos
+| style="height:100px; width:100px; text-align:center;" | <font size=10>📰</font><br> Whitepapers and Blogs
+| style="height:100px; width:100px; text-align:center;" | <font size=10>🚀</font><br> Evaluation Boards
+| style="height:100px; width:100px; text-align:center;" | <font size=10>🧭</font><br> Easy Download Guide <br> A complete list of all downloads on renesas.com
+| style="height:100px; width:100px; text-align:center;" | <font size=10>🧩</font><br> System Examples
+|}
+&#xFE0F;
+✍️
+= Embedded Video =
+* https://raw.githubusercontent.com/seebe/test/master/qtgame_1628KB.mp4
+<html>
+<video controls="controls" src="https://raw.githubusercontent.com/seebe/test/master/qtgame_1628KB.mp4">
+    Your browser does not support the HTML5 Video element.
+</video>
+</html>
+{| style="background-color:rgb(250,250,250); color:#000000; width=100%; text-align: center;"
+|-
+| style="height:80px; width:80px; text-align:center; background-color: rgb(183,219,255); width: 160px; border: 4px solid;padding: 2px; border-radius: 8px;" | '''Introduction Video'''<br><font size=10>✨</font><br>Overview of products and eval kits
+| style="height:80px; width:80px; text-align:center; background-color: rgb(183,219,255); width: 160px; border: 4px solid;padding: 2px; border-radius: 8px;" | '''Online Guide'''<br><font size=10>🧭</font><br>Where to find information on www.renesas.com
+| style="height:80px; width:80px; text-align:center; background-color: rgb(183,219,255); width: 160px; border: 4px solid;padding: 2px; border-radius: 8px;" |  '''Evaluation Boards'''<br><font size=10>🚀</font><br> BSP instructions and helpful hints
+| style="height:80px; width:80px; text-align:center; background-color: rgb(183,219,255); width: 160px; border: 4px solid;padding: 2px; border-radius: 8px;" | '''Articles'''<br><font size=10>📰</font><br> Learn using Articles, Whitepapers and Blogs
+| style="height:80px; width:80px; text-align:center; background-color: rgb(183,219,255); width: 160px; border: 4px solid;padding: 2px; border-radius: 8px;" |  '''Demo Videos'''<br><font size=10>🎥</font><br>Links to videos<br><br>
+| style="height:80px; width:80px; text-align:center; background-color: rgb(183,219,255); width: 160px; border: 4px solid;padding: 2px; border-radius: 8px;" |  '''System Examples'''<br><font size=10>🧩</font><br>Combing components for a complete solution
+|}
+<br>
+<b>Easy Download Guide</b> <br> <font size=10>🧭</font> <br> A complete list of all downloads
+<br>
+style="width: 85%;"
+= Testing copy to clipboard =
 <html><script>function copy_to_clipboard_2(text) {navigator.clipboard.writeText(text);alert("Copied: " + text);}</script></html>
 <html><script>function copy_to_clipboard(text) {
 btn = document.activeElement;
 navigator.clipboard.writeText(text);
-btn.value="Copied!";
+btn.value="📋Copied!";
 //btn.style.backgroundColor = 'green';
 //btn.style.color = 'white';
 btn.style.color = 'blue';
-}</script></html>
+}</script>
+</html>
+<html><script>function code_box(text) {
+document.write("<pre>");
+document.write(text);
+document.write("</pre>");
+document.write("<br/>");
+}
+</script></html>
+<html><script>function command_box(text) {
+if (text.startsWith('$ '))
+  text_to_copy = text.substring(2);
+else
+  text_to_copy = text;
+document.write("<table border=0 width=100%><tr><td>");
+document.write("<pre>" + text + "</pre>");
+document.write("</td><td width=1>");
+document.write("<input type=button value=\"📋Copy\" onclick=\"copy_to_clipboard('" + text_to_copy + "')\" />");
+document.write("</td></tr></table>");
+}
+</script></html>
+<pre>
+sudo apt update
+</pre>
+<html><input type="button" value="📋Copy" onclick="copy_to_clipboard('sudo apt update')" /></html>
+<br>
+<hr>
+<table border=0 width=100%><tr><td>
 <pre>
 sudo apt update
 </pre>
-<html><input type="button" value="Copy" onclick="copy_to_clipboard('sudo apt update')" /></html>
+</td><td width=1>
+<html><input type="button" value="📋Copy" onclick="copy_to_clipboard('sudo apt update')" /></html>
+</td></tr></table>
+<hr>
+<html><script>code_box("hello bye")</script></html>
+<hr>
+<html><script>command_box("hello bye command box")</script></html>
+<html><script>command_box("dog cat")</script></html>
+<html><script>command_box("$ dog cat")</script></html>
+= Formatting Links =
+* Tables: https://www.mediawiki.org/wiki/Help:Tables
+* Change background color of a row
+{|class="wikitable"
+!style="font-weight: normal"|heading1
+!heading2
+|-style="background-color:yellow"
+|cell1
+|cell2
+|-
+|cell3
+|cell4
+|}
+<pre>
+{|class="wikitable"
+!style="font-weight: normal"|heading1
+!heading2
+|-style="background-color:red"
+|cell1
+|cell2
+|-
+|cell3
+|cell4
+|}
+</pre>
+= Open Links in new Tab =
+* [https://www.docker.com/ docker container] (media wiki default, same window)
+* <html><a href=https://www.docker.com target=_blank style="
+    background-image: url(/w/skins/Vector/resources/common/images/link-external-small-ltr-progressive.svg?14604);
+    background-position: center right;
+    background-repeat: no-repeat;
+    background-size: 0.857em;
+    padding-right: 1em;"> docker container </a></html> (custom <a> tag, target=_blank)
+<pre>
+.mw-parser-output a.external {
+    background-image: url(/w/skins/Vector/resources/common/images/link-external-small-ltr-progressive.svg?14604);
+    background-position: center right;
+    background-repeat: no-repeat;
+    background-size: 0.857em;
+    padding-right: 1em;
+}
+</pre>