From a177a2c78f6b15f7fdb0bc6365635c560b396c12 Mon Sep 17 00:00:00 2001 From: Oliver Geer Date: Tue, 29 Jul 2025 18:12:21 +0100 Subject: [PATCH 1/2] Allow pre/code element styled to be overriden for prism/hljs (documented only in docstrings) --- code-input.css | 6 ++++-- code-input.d.ts | 10 ++++++---- code-input.js | 12 +++++++----- plugins/prism-line-numbers.css | 4 ++-- tests/i18n.html | 8 ++++---- 5 files changed, 23 insertions(+), 17 deletions(-) diff --git a/code-input.css b/code-input.css index a5fd92a..df69cd7 100644 --- a/code-input.css +++ b/code-input.css @@ -55,8 +55,10 @@ code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_p code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-element-styled pre code { /* Remove all margin and padding from others */ - margin: 0px!important; - padding: 0px!important; + margin: 0!important; + padding: 0!important; + border: 0!important; + width: 100%; height: 100%; } diff --git a/code-input.d.ts b/code-input.d.ts index 60bc599..d028d22 100644 --- a/code-input.d.ts +++ b/code-input.d.ts @@ -293,7 +293,7 @@ export class Template { * Constructor to create a custom template instance. Pass this into `codeInput.registerTemplate` to use it. * I would strongly recommend using the built-in simpler template `codeInput.templates.prism` or `codeInput.templates.hljs`. * @param {(codeElement: HTMLElement) => void} highlight - a callback to highlight the code, that takes an HTML `` element inside a `
` element as a parameter
-   * @param {boolean} preElementStyled - is the `
` element CSS-styled as well as the `` element? If true, `
` element's scrolling is synchronised; if false, `` element's scrolling is synchronised.
+   * @param {boolean} preElementStyled - is the `
` element CSS-styled (if so set to true), or the `` element (false)?
    * @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `` element will be given the class name 'language-[lang attribute's value]'.
    * @param {false} includeCodeInputInHighlightFunc - Setting this to true passes the `` element as a second argument to the highlight function.
    * @param {boolean} autoDisableDuplicateSearching - Leaving this as true uses code-input's default fix for preventing duplicate results in Ctrl+F searching from the input and result elements, and setting this to false indicates your highlighting function implements its own fix. The default fix works by moving text content from elements to CSS `::before` pseudo-elements after highlighting.
@@ -307,7 +307,7 @@ export class Template {
    * Constructor to create a custom template instance. Pass this into `codeInput.registerTemplate` to use it.
    * I would strongly recommend using the built-in simpler template `codeInput.templates.prism` or `codeInput.templates.hljs`.
    * @param {(codeElement: HTMLElement, codeInput: CodeInput) => void} highlight - a callback to highlight the code, that takes an HTML `` element inside a `
` element as a parameter
-   * @param {boolean} preElementStyled - is the `
` element CSS-styled as well as the `` element? If true, `
` element's scrolling is synchronised; if false, `` element's scrolling is synchronised.
+   * @param {boolean} preElementStyled - is the `
` element CSS-styled (if so set to true), or the `` element (false)?
    * @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `` element will be given the class name 'language-[lang attribute's value]'.
    * @param {true} includeCodeInputInHighlightFunc - Setting this to true passes the `` element as a second argument to the highlight function.
    * @param {boolean} autoDisableDuplicateSearching - Leaving this as true uses code-input's default fix for preventing duplicate results in Ctrl+F searching from the input and result elements, and setting this to false indicates your highlighting function implements its own fix. The default fix works by moving text content from elements to CSS `::before` pseudo-elements after highlighting.
@@ -355,9 +355,10 @@ export namespace templates {
     * Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/)
     * @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter.
     * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
+    * @param {boolean} preElementStyled - Defaults to true, which should be right for most themes. If the styling is broken, change to false. (See `codeInput.Template` constructor's definition.)
     * @returns template object
     */
-    constructor(prism: Object, plugins?: Plugin[])
+    constructor(prism: Object, plugins?: Plugin[], preElementStyled?: boolean)
   }
   // ESM-SUPPORT-END-TEMPLATE-prism Do not (re)move this - it's needed for ESM generation
   /**
@@ -373,9 +374,10 @@ export namespace templates {
     * Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/)
     * @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter.
     * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
+    * @param {boolean} preElementStyled - Defaults to false, which should be right for most themes. If the styling is broken, change to true. (See `codeInput.Template` constructor's definition.)
     * @returns template object
     */
-    constructor(hljs: Object, plugins?: Plugin[])
+    constructor(hljs: Object, plugins?: Plugin[], preElementStyled?: boolean)
   }
   // ESM-SUPPORT-END-TEMPLATE-hljs Do not (re)move this - it's needed for ESM generation
   /**
diff --git a/code-input.js b/code-input.js
index 82e92e3..e4ecb3a 100644
--- a/code-input.js
+++ b/code-input.js
@@ -162,7 +162,7 @@ var codeInput = {
          * Constructor to create a custom template instance. Pass this into `codeInput.registerTemplate` to use it.
          * I would strongly recommend using the built-in simpler template `codeInput.templates.prism` or `codeInput.templates.hljs`.
          * @param {(codeElement: HTMLCodeElement, codeInput?: codeInput.CodeInput) => void} highlight - a callback to highlight the code, that takes an HTML `` element inside a `
` element as a parameter
-         * @param {boolean} preElementStyled - is the `
` element CSS-styled as well as the `` element? If true, `
` element's scrolling is synchronised; if false, `` element's scrolling is synchronised.
+         * @param {boolean} preElementStyled - is the `
` element CSS-styled (if so set to true), or the `` element (false)?
          * @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `` element will be given the class name 'language-[lang attribute's value]'.
          * @param {boolean} includeCodeInputInHighlightFunc - Setting this to true passes the `` element as a second argument to the highlight function.
          * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.Plugin`
@@ -1031,12 +1031,13 @@ var codeInput = {
         * Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/)
         * @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter.
         * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
+        * @param {boolean} preElementStyled - Defaults to true, which should be right for most themes. If the styling is broken, change to false. (See `codeInput.Template` constructor's definition.)
         * @returns {codeInput.Template} template object
         */
-        constructor(prism, plugins = []) {
+        constructor(prism, plugins = [], preElementStyled = true) {
             super(
                 prism.highlightElement, // highlight
-                true, // preElementStyled
+                preElementStyled, // preElementStyled
                 true, // isCode
                 false, // includeCodeInputInHighlightFunc
                 plugins
@@ -1055,15 +1056,16 @@ var codeInput = {
          * Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/)
          * @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter.
          * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
+         * @param {boolean} preElementStyled - Defaults to false, which should be right for most themes. If the styling is broken, change to true. (See `codeInput.Template` constructor's definition.)
          * @returns {codeInput.Template} template object
          */
-        constructor(hljs, plugins = []) {
+        constructor(hljs, plugins = [], preElementStyled = false) {
             super(
                 function(codeElement) {
                     codeElement.removeAttribute("data-highlighted");
                     hljs.highlightElement(codeElement);
                 }, // highlight
-                false, // preElementStyled
+                preElementStyled, // preElementStyled
                 true, // isCode
                 false, // includeCodeInputInHighlightFunc
                 plugins
diff --git a/plugins/prism-line-numbers.css b/plugins/prism-line-numbers.css
index 3542034..fba28c1 100644
--- a/plugins/prism-line-numbers.css
+++ b/plugins/prism-line-numbers.css
@@ -5,8 +5,8 @@
  * Files: prism-line-numbers.css
  */
 /* Update padding to match line-numbers plugin */
-code-input.line-numbers textarea, code-input.line-numbers.code-input_pre-element-styled pre,
-.line-numbers code-input textarea, .line-numbers code-input.code-input_pre-element-styled pre {
+code-input.line-numbers textarea, code-input.line-numbers.code-input_pre-element-styled pre, code-input.line-numbers:not(.code-input_pre-element-styled) pre code,
+.line-numbers code-input textarea, .line-numbers code-input.code-input_pre-element-styled pre, .line-numbers code-input:not(.code-input_pre-element-styled) pre code {
   padding-left: max(3.8em, var(--padding, 16px))!important;
 }
 
diff --git a/tests/i18n.html b/tests/i18n.html
index b8d4f7f..a7c702c 100644
--- a/tests/i18n.html
+++ b/tests/i18n.html
@@ -58,8 +58,8 @@
         
 
         
+        
         
         
         
diff --git a/tests/prism.html b/tests/prism.html
index 50fb510..a35d080 100644
--- a/tests/prism.html
+++ b/tests/prism.html
@@ -6,7 +6,7 @@
     code-input Tester
     
     
-    
+