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: @@
-{| style="background-color:#2a289d; color:#FFFFFF; width:100%"
-| &nbsp; <html><img src=https://www.renesas.com/themes/idt8/components/components/header/header-sets/header2/header-w.svg  style="vertical-align:middle;margin:6px 10px"></html>
+= 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
 |}
-{| style="background-color:#121184; color:#FFFFFF; width:100% ; border:none"
+&#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="width: 900px" | <center><font size=+3><b>Information for engineers, from engineers.</b></font></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;" | '''Online Guide'''<br><font size=10>🧭</font><br>Where to find information on www.renesas.com
-<center><font size=30>📇</font><font size=+1>This site contains helpful technical information about Renesas products and solutions.</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;" |  '''Evaluation Boards'''<br><font size=10>🚀</font><br> BSP instructions and helpful hints
-<p align=right>''After all, nothing beats a well placed printf.''</p>
+| 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>
-<font size=+2> Product Pages </font>
+<b>Easy Download Guide</b> <br> <font size=10>🧭</font> <br> A complete list of all downloads
-<HR>
-{| style="background-color:#ffffff; color:#000000; width=100%; text-align: center;"
-|-
+<br>
-| colspan="4"| <font size=+2> High-end 32 & 64-bit MPUs </font>'''<br><html><img src=https://www.renesas.com/sites/default/files/styles/banner_2016x349/public/2020-01/rz-32-bit-high-end-mpus-hero.jpg height="80"></html>
-|
+style="width: 85%;"
-|
-|-
+= Testing copy to clipboard =
-|-
-| style="width: 25%;" | <center><p style="background-color: rgb(250,250,250); width: 160px; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);border: 0px solid;padding: 10px; border-radius: 8px;"><font size=+2> ◼'''[[RZ-A | RZ/A MPU]] </font><br>RTOS'''</p></center>
+<html><script>function copy_to_clipboard_2(text) {navigator.clipboard.writeText(text);alert("Copied: " + text);}</script></html>
-| style="width: 25%;" | <center><p style="background-color: rgb(250,250,250); width: 160px; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);border: 0px solid;padding: 10px; border-radius: 8px;"><font size=+2> ◼'''[[RZ-G | RZ/G MPU]] </font><br>Linux'''</p></center>
+<html><script>function copy_to_clipboard(text) {
-| style="width: 25%;" | <center><p style="background-color: rgb(250,250,250); width: 160px; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);border: 0px solid;padding: 10px; border-radius: 8px;"><font size=+2> ◼'''[[RZ-V | RZ/V MPU]] </font><br>AI Computing'''</p></center>
+btn = document.activeElement;
-| style="width: 25%;" | <center><p style="background-color: rgb(250,250,250); width: 180px; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);border: 0px solid;padding: 10px; border-radius: 8px;"><font size=+2> ◼'''[[RZ-Five | RZ/Five MPU]] </font><br>RISC-V'''</p></center>
+navigator.clipboard.writeText(text);
+btn.value="📋Copied!";
+//btn.style.backgroundColor = 'green';
+//btn.style.color = 'white';
+btn.style.color = 'blue';
+}</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>
-| colspan="4"| <br>
+sudo apt update
-|}
+</pre>
+<html><input type="button" value="📋Copy" onclick="copy_to_clipboard('sudo apt update')" /></html>
 <br>
-<font size=+2> Other Topics </font>
+<hr>
-<HR>
-{| width="100%" style="text-align: center;"
+<table border=0 width=100%><tr><td>
+<pre>
+sudo apt update
+</pre>
+</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
 |-
-| style="width: 50%;" | <center><p style="background-color: rgb(250,250,250); width: 260px; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);border: 0px solid;padding: 10px; border-radius: 8px;"><font size=+1><b> ◼ [[TicketSystem | Technical Support Ticket System 🚑</b></font> ]] <br>• For customers in '''US''', '''Canada''' and '''Europe''', there is a ticket system.</p></center>
+|cell3
-| style="width: 50%;" | <center><p style="background-color: rgb(250,250,250); width: 260px; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);border: 0px solid;padding: 10px; border-radius: 8px;"><font size=+1><b> ◼ [[Customer_Survey | Customer Survey 🧑‍🤝‍🧑</font> ]] </b></font><br> • Please consider taking the follow '''anonymous survey''' to provide feedback to Renesas. </p></center>
+|cell4
-|-
+|}
-| style="width: 50%;" | <center><p style="background-color: rgb(250,250,250); width: 260px; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);border: 0px solid;padding: 10px; border-radius: 8px;"><font size=+1><b> ◼ [[Learning | Learning 🔰</font> ]] </b></font><br>• Helpful information on topics such as SW Development, Linux, Open Source, Training, etc...</p></center>
+<pre>
-|
+{|class="wikitable"
+!style="font-weight: normal"|heading1
+!heading2
+|-style="background-color:red"
+|cell1
+|cell2
 |-
-| colspan="2"| <br>
+|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>