Provide documentation and examples for how to install and use with non-npm normal html and vanilla systems.

[WhyFenceCode]

When i tried to do what you did in your tutorial it did not work. The code did not highlight, there was no way to make a new line. I therefore want to switch to using this, but I am unsure of 2 things:

1. Can i use hljs (highlight js) and if so how can i use a custom theme and use a downloaded version.
2. How do i use this in a normal webpage?

Any tutorials and/or answers are much appreciated.

[WebCoder49]

@WhyFenceCode Thank you for reaching out here! I have put together a demo HTML file on CodePen here. I should probably do the same for Prism.js and put them in the README, so please leave this issue open, but do let me know if this helps.

[WhyFenceCode]

Thank you so much, that helps a lot. You have just solved so many problems with a code editor I am writing. Do you want to be credited when I release @WebCoder49 ?

[WhyFenceCode]

Also, I am unable to make it scale to 100% width without overflow, and I can not remove margins/padding

[WebCoder49]

Thank you so much, that helps a lot. You have just solved so many problems with a code editor I am writing. Do you want to be credited when I release @WebCoder49 ?

Yes please, that would be nice! 😊 If it is OK, please could you credit me as the maintainer of code-input but also provide a link to https://github.com/webCoder49/code-input/graphs/contributors?

[WebCoder49]

Also, I am unable to make it scale to 100% width without overflow, and I can not remove margins/padding

margins/padding

Currently you will have to style these attributes with !important as code-input's default styles seem to override otherwise: the --padding is a CSS variable that code-input later processes, but margin can be set:

code-input {
  margin: 100px!important;
  --padding: 100px!important;
}

I had forgotten about the !important workaround for a while and it should probably be removed if possible. I will look at this for a later release when I am less busy (#91).

Scaling to 100% width without overflow

By overflow I assume you mean horizontal scrolling of the page. As is default behaviour with all elements to my knowledge, if extra margin is added to a code-input element, you must use the CSS calc function to subtract this margin twice (once for the left, once for the right) from the 100% width:

code-input {
  width: calc(100% - 200px);
  margin: 100px!important;
  --padding: 100px!important;
}

I believe you may alternatively be able to use the CSS box-sizing property.

---

I hope this is useful, but please let me know if anything else goes wrong with code-input. Good luck with the code editor - I'd love to see it if possible when it's complete.

[WhyFenceCode]

Thank you so much, just an idea to fix this, make sure that your style sheet runs first, so that the others will override it. I might pr this when I have time

[WhyFenceCode]

Also, how do i download the files, and are all of them needed as I dont have npm or any package manager for my editor.

[WebCoder49]

Also, how do i download the files, and are all of them needed as I dont have npm or any package manager for my editor.

You can download a ZIP file under the green Code button on the main repository page, and extract its contents. I'd suggest keeping the README, JSON and d.ts files there as they will make it easier to remember where you got the code-input package from, work out its version number if you report later bugs, and give you a better editing experience. The code-input LICENSE file must be left and distributed with your software, as a legal requirement.

Out of the other files, having both .min.js and .js, .min.css and .css versions are useful as .min should be used in production and non-minified in testing. However, you can delete the tests and .github folders, and delete any plugins in the plugins folder you are not using. This will help make your repository smaller in size, but is not necessary.

This won't activate NPM or anything, as you are downloading the files from GitHub, not NPM (which is an alternative). I hope this clarifies things!

[WhyFenceCode]

Thank You For ALL YOUR HELP

[WhyFenceCode]

One last thing, when I use this it scales in an odd way (the entire page moves left) any ideas why? Using both width and height mess it up. Ill post my code: https://github.com/WhyFenceCode/verbatim_code_editor The styles applied are in editor.css

[WhyFenceCode]

Also occurs with no styling i think

[WhyFenceCode]

fixed everything, thank you so much for all your help, im gonna close this and open one to remind you about docs