Introdution

:rocket: CodeStyler is a simple Open Source to style your code for html using JavaScript and CSS.

Webpage: https://maythamfahmi.github.io/CodeStyler

Installation

You can download CodeStyler via Releases or cloning this repository.

Just copy following folder and files:

• css/codestyler.css
• js/codestyler.js

to your project directory.

And add following to your html header

<link rel="stylesheet" href="./css/codestyler.css">

And add following at the end of html just before

tag

<script src="./js/codestyler.js"></script>

Versions

• Refacotring
• Documentation

• Init release 2019

Issues

Please report issues here.

How to use

After adding the library folder to your working project, you can go a head and follow some of the examples below. We have also provided example folder that show the same examples.

Customization

<script type="text/javascript">
    var addLines = true; // if addLines is not set, by default is true
    var fontSize = 0; // if fontSize is not set, by default 0, which is size 14
</script>
<script src="./js/codestyler.js"></script>

View HTML line

<pre><&zwj;div>Hello World!<&zwj;/div></pre>

Copy code as URL

<p>Code Sample <a href="#" onclick="codeCopy('code1')">(Copy code to clipboard as Link)</a></p>
    <pre><code><span id='code1'>public static void Main()
{
    Console.WriteLine("Test");
}</span></code></pre>

Code Sample with copy code button inside pre tag

<div class="code">
        <pre><span id='code2'>void Start()
{
    Console.WriteLine("I will start");
}</span></pre>
        <button class="codeButton" onclick="codeCopy('code2')">Copy</button>
    </div>

Make code editable, this feature is not part of this library but it is a HTML5 feature

<p>This code inside is editable!</p>
    <div class="code">
        <pre contenteditable='true'><span id='code3'>void Editable()
{
    Console.WriteLine("Edit me");
}</span></pre>
        <button class='codeButton' onclick="codeCopy('code3')">Copy</button>
    </div>

Contributing

I need your help, so if you have good knowledge of JavaScript and CSS, just grab one of the issues and add a pull request. The same is valid, if you have idea for improvement, adding new feature or even documentation improvement and enhancemnet, you are more than welcome to contribute.

How to contribute:

Here is a link to learn how to contribute if you are not a ware of how to do it.