[Highlight.js - Basic Setup] #highlight-js #syntax-highlighter

highlight-js--basic-setup.css

/* Copy Button plugin 
------------------------------------------------------------------------------------------------ 
@here https://github.com/arronhunt/highlightjs-copy/styles/highlightjs-copy.css
*/

.hljs-copy-wrapper {
  position: relative;
  overflow: hidden;
}
.hljs-copy-wrapper:hover .hljs-copy-button,
.hljs-copy-button:focus {
  transform: translateX(0);
}
.hljs-copy-button {
  position: absolute;
  transform: translateX(calc(100% + 1.125em));
  top: 0.5em;
  right: 0.5em;
  width: 2rem;
  height: 2rem;
  text-indent: -9999px; /* Hide the inner text */
  color: var(--hljs-theme-color);
  border-radius: 0.25rem;
  border: 1px solid;
  border-color: color-mix(in srgb, var(--hljs-theme-color), transparent 80%);
  background-color: var(--hljs-theme-background);
  transition: background-color 200ms ease, transform 200ms ease-out;
  overflow: hidden;
}
.hljs-copy-button:not([data-copied="true"])::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: currentColor;
  mask: url('data:image/svg+xml;utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C7 1.89543 7.89543 1 9 1H15C16.1046 1 17 1.89543 17 3V5C17 6.10457 16.1046 7 15 7H9C7.89543 7 7 6.10457 7 5V3ZM15 3H9V5H15V3Z" fill="black"/></svg>');
  mask-repeat: no-repeat;
  mask-size: 1rem;
  mask-position: center center;
}

.hljs-copy-button:hover {
  background-color: color-mix(
    in srgb,
    var(--hljs-theme-color),
    transparent 90%
  );
}
.hljs-copy-button:active {
  border-color: color-mix(in srgb, var(--hljs-theme-color), transparent 60%);
}
.hljs-copy-button[data-copied="true"] {
  text-indent: 0px; /* Shows the inner text */
  width: auto;
}
@media (prefers-reduced-motion) {
  .hljs-copy-button {
    transition: none;
  }
}

/* Line Numbering plugin
------------------------------------------------------------------------------------------------ 
@here it's included in the repo readme (https://github.com/wcoder/highlightjs-line-numbers.js), 
	  BUT it needs some fixes/mods - the below version is the fixed one.
*/

/* visually-hidden */
.hljs-copy-alert {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* for block of numbers */
.hljs-ln-numbers {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	text-align: center;
	color: rgba(204, 204, 204, .3);
	border-right: 1px solid rgba(204, 204, 204, .3);
	vertical-align: top;
	padding-right: 10px!important;
}

/* for block of code */
.hljs-ln-code {
	padding-left: 10px!important;
}

/* Language Display plugin
------------------------------------------------------------------------------------------------ 
@here it's included in the repo readme (https://github.com/wcoder/highlightjs-lang.js) as well.
*/

.hljs-lang {
    background: #333;
    text-align: center;
    color: #fff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}	

highlight-js--basic-setup.js

hljs.highlightAll();
hljs.addPlugin(new CopyButtonPlugin());
hljs.initLineNumbersOnLoad();

$(document).ready(function() {
    $('code.hljs').each(function(i, block) {
        hljs.initLangBlock(block);
    });
});

highlight-js--basic-setup.php

<html>
    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

        <title>Title of the document</title>

  		<?php
  		/**
         * All the highlight.js scripts and styles --------------------------------------------------------------------------------------------------------
         */
  
  		// Yes, jQuery is required as well - it seems that the language display plugin (highlightjs-lang.min.js) needs it.
		?>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

        <script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>

        <script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/highlightjs-lang.js@latest/dist/highlightjs-lang.min.js"></script>

        <script src="highlight-js--basic-setup.js"></script>

        <?php
		// Load additional languages - this is only for reference, html is part of the core
        // <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/html.min.js"></script>
  		?>
        
        <?php
  		/**
         * EOF All the highlight.js scripts and styles ----------------------------------------------------------------------------------------------------
         */  
         ?>

		<link rel="stylesheet" href="highlight-js--basic-setup.css">

    </head>
  
  	<body>

		<p>Consider the following CSS:</p>

<?php
// BAD NEWS: because of how the PRE tag works/behaves, code blocks to be displayed with highlight.js 
// 			 must be taken out of the beautified HTML structure and put to the left edge. 
// 			 YES, UGLY AF, but let's learn to live with it...
?>
<pre><code class="css">article p {
     color: black;
}

:is(article, section, aside) p {
     color: red;
}

:where(article, section, aside) p {
     color: blue;
}</code></pre>

		<p>Let’s apply this CSS to the following HTML:</p>

<?php
// BAD NEWS: because of security reasons, highlight.js stopped supporting html tags inside a pre->code 
// 			 code block. You have to use html encoding.
// 			 These online html encoders can be used to facilitate the process:
// 			 https://emn178.github.io/online-tools/html_encode.html
// 			 http://htmlencode.net/
?>
<pre><code class="html">&lt;article&gt;
     &lt;p&gt;paragraph text&lt;/p&gt;
&lt;/article&gt;</code></pre>      
      
	</body>
  
</html>