How to Display Highlighted Arduino Code on Shopify Page

[abotics]

Hello Everyone,

I am trying to display Arduino example code on my web page, but can't seem to get it to work properly. I copied the page source from the Arduino website: https://www.arduino.cc/reference/en/language/functions/digital-io/digitalread/

However, it does not highlight the source code and merely displays plain text. I've inserted the copied HTML code below.

<p>Sets pin 13 to the same value as pin 7, declared as an input.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-arduino" data-lang="arduino">int ledPin = 13;  // LED connected to digital pin 13
int inPin = 7;    // pushbutton connected to digital pin 7
int val = 0;      // variable to store the read value

void setup() {
  pinMode(ledPin, OUTPUT);  // sets the digital pin 13 as output
  pinMode(inPin, INPUT);    // sets the digital pin 7 as input
}

void loop() {
  val = digitalRead(inPin);   // read the input pin
  digitalWrite(ledPin, val);  // sets the LED to the button's value
}</code></pre>
</div>
</div>

-Regards, Abe

[Jasoliya · Accepted solution]

Hi,
Add this code:

<div class="listingblock">
  <div class="content">
    <pre class="highlight"><code class="language-arduino hljs" data-lang="arduino"><span class="keyword">int</span> ledPin = <span class="number">13</span>;  <span>// LED connected to digital pin 13</span>
<span class="keyword">int</span> inPin = <span class="number">7</span>;    <span>// pushbutton connected to digital pin 7</span>
<span class="keyword">int</span> val = <span class="number">0</span>;      <span>// variable to store the read value</span>

<span class="keyword">void</span> <span class="main_fun">setup</span>() {
  <span class="main_fun">pinMode</span>(ledPin, <span>OUTPUT</span>);  <span>// sets the digital pin 13 as output</span>
  <span class="main_fun">pinMode</span>(inPin, <span>INPUT</span>);    <span>// sets the digital pin 7 as input</span>
}

<span class="keyword">void</span> <span class="main_fun">loop</span>() {
  val = <span class="main_fun">digitalRead</span>(inPin);   <span>// read the input pin</span>
  <span class="main_fun">digitalWrite</span>(ledPin, val);  <span>// sets the LED to the button's value</span>
}</code></pre>
  </div>
</div>

<style>
  .keyword{color: #00979d;}
  .number{color: #8a7b52;}
  .main_fun{color: #d35400;}
</style>

Let me know if you need help 

[abotics]

Thanks Jasoliya_Brij! That seems to work.

Just wish there was an easier method instead of manually specifying the style for each specific word.

-Thanks, Abe

[Jasoliya]

We have most of word in different color so we have just specified class to each different line and added its style in last.
let me know if you need any help.