Merge pull request #170 from WebCoder49/pre-or-code-styled

Allow which of pre/code element styled to be overriden for prism/hljs

Author: WebCoder49

code-input.css

@@ -58,8 +58,9 @@ 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;
 }
 
 code-input textarea, code-input pre, code-input pre * {

code-input.d.ts

@@ -298,7 +298,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 `<code>` element inside a `<pre>` element as a parameter
-   * @param {boolean} preElementStyled - is the `<pre>` element CSS-styled as well as the `<code>` element? If true, `<pre>` element's scrolling is synchronised; if false, `<code>` element's scrolling is synchronised.
+   * @param {boolean} preElementStyled - is the `<pre>` element CSS-styled (if so set to true), or the `<code>` element (false)?
    * @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `<code>` element will be given the class name 'language-[lang attribute's value]'.
    * @param {false} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` 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.
@@ -312,7 +312,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 `<code>` element inside a `<pre>` element as a parameter
-   * @param {boolean} preElementStyled - is the `<pre>` element CSS-styled as well as the `<code>` element? If true, `<pre>` element's scrolling is synchronised; if false, `<code>` element's scrolling is synchronised.
+   * @param {boolean} preElementStyled - is the `<pre>` element CSS-styled (if so set to true), or the `<code>` element (false)?
    * @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `<code>` element will be given the class name 'language-[lang attribute's value]'.
    * @param {true} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` 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.
@@ -360,9 +360,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
   /**
@@ -378,9 +379,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
   /**

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 `<code>` element inside a `<pre>` element as a parameter
-         * @param {boolean} preElementStyled - is the `<pre>` element CSS-styled as well as the `<code>` element? If true, `<pre>` element's scrolling is synchronised; if false, `<code>` element's scrolling is synchronised.
+         * @param {boolean} preElementStyled - is the `<pre>` element CSS-styled (if so set to true), or the `<code>` element (false)?
          * @param {boolean} isCode - is this for writing code? If true, the code-input's lang HTML attribute can be used, and the `<code>` element will be given the class name 'language-[lang attribute's value]'.
          * @param {boolean} includeCodeInputInHighlightFunc - Setting this to true passes the `<code-input>` 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`
@@ -1049,12 +1049,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
@@ -1073,15 +1074,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

plugins/prism-line-numbers.css

@@ -4,9 +4,9 @@
  * https://prismjs.com/plugins/line-numbers/
  * Files: prism-line-numbers.css
  */
-/* Update padding to match line-numbers plugin, and decrease width likewise */
-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 {
+/* Update padding to match line-numbers plugin */
+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;
 }
 

tests/i18n.html

@@ -58,8 +58,8 @@
         <code-input dir="ltr" template="hljs+" language="markdown"><textarea code-input-fallback placeholder="hljs ltr"></textarea></code-input>
 
         <script>
-            codeInput.registerTemplate("hljs", codeInput.templates.hljs(hljs, []));
-            codeInput.registerTemplate("prism", codeInput.templates.prism(Prism, []));
+            codeInput.registerTemplate("hljs", new codeInput.templates.Hljs(hljs, []));
+            codeInput.registerTemplate("prism", new codeInput.templates.Prism(Prism, []));
 
             // Attribution: Translated by Oliver Geer with some help from English Wiktionary
             let findAndReplaceTranslations = {
@@ -96,7 +96,7 @@
                 tabForNavigation: "Tabulador y Mayús-Tabulador actualmente para la navegación por el teclado. Tecla para activar la indentación.",
             };
 
-            codeInput.registerTemplate("hljs+", codeInput.templates.hljs(hljs, [
+            codeInput.registerTemplate("hljs+", new codeInput.templates.Hljs(hljs, [
                 new codeInput.plugins.AutoCloseBrackets(),
                 new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
                     if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
@@ -114,7 +114,7 @@
                 new codeInput.plugins.SelectTokenCallbacks(codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation("in-selection"), false, true, true, true, true, false),
                 //new codeInput.plugins.SpecialChars(true),
             ]));
-            codeInput.registerTemplate("prism+", codeInput.templates.prism(Prism, [
+            codeInput.registerTemplate("prism+", new codeInput.templates.Prism(Prism, [
                 new codeInput.plugins.AutoCloseBrackets(),
                 new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
                     if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {

tests/prism.html

@@ -6,7 +6,7 @@
     <title>code-input Tester</title>
     <!--Import Prism-->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" data-manual></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">