ph-highlight attribute

The service is allowed in your site too. because it allow CORS requst.

Code to format: Formatted:

Formatted Show:

<form ph-form="https://pagehelper.lets-script.com/highlight/"
  method="get" 
  ph-params="inline::true" 
  ph-target="#code-after-format,#formatted-show">
<span ph-error-css-for-content="is-invalid">Code to format:</span>
<textarea name="content" style="width:100%;" id="code-to-format" 
  ph-validate="string::min:3,max:65536" rows="10"></textarea>
Formatted: <span ph-to-clipboard="#code-after-format">copy</span>
<textarea ph-ignore style="width:100%;" id="code-after-format" ph-data-consumer="value" rows="6"></textarea>

<select id="lang-selector" name="lang">
<option value="1C">1C</option>
<option value="4D">4D</option>
<option value="ABAP">ABAP</option>
<option value="ABNF">ABNF</option>
<option value="Zig">Zig</option>
</select>

<div>Formatted Show:</div>
<div id="formatted-show" ph-data-consumer="innerhtml">
</div>

<button
type="submit"
class="btn btn-sm">
<span>format</span>
</button>

struct of the `ph-highlight`

Usually, wrap the code in <pre> tags so that editor formatting actions will not affect the arrangement of the code. The server side will return the code wrapped with <pre><code>

import { PageHelper, FormEnricher } from "/dist/bundle.es.js";
const pageHelper = new PageHelper({ debug: true });
pageHelper.enrich();

<div
      ph-highlight="/highlight/"
      ph-params="lang::javascript,inline::true"
    >
      <pre>
import { PageHelper, FormEnricher } from "/dist/bundle.es.js";
const pageHelper = new PageHelper({ debug: true });
pageHelper.enrich();
</pre>
</div>

ph-highlight attribute

struct of the ph-highlight

struct of the `ph-highlight`