Skip to content

Commit

Permalink
i have added the react-syntax-highliteer to my HTML code exampe
Browse files Browse the repository at this point in the history
  • Loading branch information
@massarinoaa
massarinoaa committed Aug 5, 2024
1 parent 38e7b06 commit 9ae9edd
Show file tree
Hide file tree
Showing 15 changed files with 677 additions and 332 deletions.
137 changes: 81 additions & 56 deletions src/MobileViewHTML/Comments&Sub.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { InArticleAdUnit } from "../AdUnit";
import SyntaxHighlighter from "react-syntax-highlighter";

import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";

const CommentsH = () => {
return (
Expand Down Expand Up @@ -34,9 +37,11 @@ const CommentsH = () => {
</p>
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<!-- This is a comment -->
`}
`}
</SyntaxHighlighter>
</code>
</pre>

Expand Down Expand Up @@ -78,40 +83,46 @@ const CommentsH = () => {
<strong>Documentation Comment:</strong>
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<!-- This section displays the user's profile information -->
<div class="user-profile">
<h2>User Profile</h2>
<p>Name: <span class="name">John Doe</span></p>
<p>Email: <span class="email">[email protected]</span></p>
<h2>User Profile</h2>
<p>Name: <span class="name">John Doe</span></p>
<p>Email: <span class="email">[email protected]</span></p>
</div>
`}
`}
</SyntaxHighlighter>
</code>
</pre>
</li>
<li>
<strong>Temporary Disabling Comment:</strong>
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<!-- This feature is temporarily disabled -->
<div>
<!-- <p>This section is hidden</p> -->
<!-- <p>This section is hidden</p> -->
</div>
`}
`}
</SyntaxHighlighter>
</code>
</pre>
</li>
<li>
<strong>Collaboration Comment:</strong>
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<!-- Note to other developers: This section requires additional testing and validation -->
`}
`}
</SyntaxHighlighter>
</code>
</pre>
</li>
Expand Down Expand Up @@ -155,9 +166,11 @@ const CommentsH = () => {
code. For example,
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<!-- This section displays the navigation menu -->.
`}
`}
</SyntaxHighlighter>
</code>
</pre>
</li>
Expand All @@ -166,10 +179,12 @@ const CommentsH = () => {
code during development or testing. For instance,
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<!-- This feature is under development and will be enabled soon -->.
`}
`}
</SyntaxHighlighter>
</code>
</pre>
</li>
Expand Down Expand Up @@ -227,10 +242,12 @@ export const HTMLStructure = () => {
</p>

<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<!DOCTYPE html>
`}
`}
</SyntaxHighlighter>
</code>

<p>
Expand All @@ -251,13 +268,15 @@ export const HTMLStructure = () => {
</p>
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<!DOCTYPE html>
<html>
...
...
</html>
`}
`}
</SyntaxHighlighter>
</code>
</pre>

Expand Down Expand Up @@ -292,15 +311,17 @@ export const HTMLStructure = () => {
Here's an example:`}
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<head>
<title>My Web Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<title>My Web Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
`}
`}
</SyntaxHighlighter>
</code>
</pre>
<p>
Expand All @@ -320,20 +341,22 @@ export const HTMLStructure = () => {
your web page, such as headings, paragraphs, images, forms, and other
elements. {` Here's an example:`}
<pre>
<code>
{`
<code1>
<SyntaxHighlighter language="HTML" style={docco}>
{`
<body>
<h1>Welcome to My Web Page</h1>
<p>This is the main content of my web page.</p>
<img src="image.jpg" alt="Description">
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
<h1>Welcome to My Web Page</h1>
<p>This is the main content of my web page.</p>
<img src="image.jpg" alt="Description">
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
</body>
`}
</code>
`}
</SyntaxHighlighter>
</code1>
</pre>
<p>
In the code above, we have a heading <code>{`(<h1>)`}</code>, a
Expand All @@ -351,19 +374,21 @@ export const HTMLStructure = () => {
</p>
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is the main content of my web page.</p>
</body>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is the main content of my web page.</p>
</body>
</html>
`}
`}
</SyntaxHighlighter>
</code>
</pre>

Expand Down
37 changes: 28 additions & 9 deletions src/MobileViewHTML/Dis&Spans.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { InArticleAdUnit } from "../AdUnit";
import SyntaxHighlighter from "react-syntax-highlighter";

import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";

const Div = () => {
return (
Expand Down Expand Up @@ -26,11 +29,13 @@ const Div = () => {
</p>
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<div>
Content goes here
</div>
`}
</SyntaxHighlighter>
</code>
</pre>

Expand All @@ -50,7 +55,8 @@ const Div = () => {

<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<div>
<div>Header</div>
<div>
Expand All @@ -61,6 +67,7 @@ const Div = () => {
</div>
`}
</SyntaxHighlighter>
</code>
</pre>

Expand All @@ -79,14 +86,16 @@ const Div = () => {
</p>
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<div class="container">
<div class="header">Header</div>
<div class="content">Main Content</div>
<div class="sidebar">Sidebar</div>
</div>
`}
</SyntaxHighlighter>
</code>
</pre>

Expand Down Expand Up @@ -144,14 +153,16 @@ const Div = () => {
<br />
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<div>
<div>Header</div>
<div>Main Content</div>
<div>Footer</div>
</div>
`}
</SyntaxHighlighter>
</code>
</pre>
</li>
Expand Down Expand Up @@ -221,9 +232,11 @@ export const Spans = () => {
</p>
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<span>Highlighted text</span>
`}
</SyntaxHighlighter>
</code>
</pre>

Expand All @@ -241,10 +254,12 @@ export const Spans = () => {
</p>
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<span class="highlight">Highlighted text</span>
`}
</SyntaxHighlighter>
</code>
</pre>

Expand All @@ -263,10 +278,12 @@ export const Spans = () => {
</p>
<pre>
<code>
{`
<span class="tooltip" data-tooltip="This is a tooltip">over me!</span>
<SyntaxHighlighter language="HTML" style={docco}>
{`
<span class="tooltip" data-tooltip="This is a tooltip">over me!</span>
`}
</SyntaxHighlighter>
</code>
</pre>

Expand Down Expand Up @@ -322,10 +339,12 @@ export const Spans = () => {
<br />
<pre>
<code>
{`
<SyntaxHighlighter language="HTML" style={docco}>
{`
<p>This is a <span class="highlight">highlighted</span> sentence.</p>
`}
</SyntaxHighlighter>
</code>
</pre>
</li>
Expand Down
Loading

0 comments on commit 9ae9edd

Please sign in to comment.