How to Display Highlighted Arduino Code on Shopify Page

Solved
Highlighted
New Member
2 0 0

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

0 Likes

Success.

Shopify Expert
2181 367 456

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 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
New Member
2 0 0

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

0 Likes
Shopify Expert
2181 367 456

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.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes