Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

README.md

CoderJs

Coderjs is an amazing js wrapper around prismjs (code highlighter) that lets you easily embed multple codes in html. That's mean you can also use your code in your website.

Demo

You can see live demos below

demo1 - demo-html_css_js.html
demo2 - demo_desktop_languages.html
demo3 - demo_php_blog.html

How to use (for community):

Just open Builder/Coder.html, Select your settings and Click Generate.

It will generate html code automatically at bottom.

You can embed this code in any site or play locally with any broswer.

How to use (for developers):

Step:1 (Put code with settings)

I am always use textarea for displaying codes,
Because it don't need to escape characters,
Currently, github don't allow running js,
So we can't show live demo here.


<textarea 
language="javascript" <!-- Define your language                        -->
index="1"             <!-- At which plote should code go ?             -->
display="block"       <!-- Should code be displayed ?                  -->
id="coderjs"          <!-- Leave as it was. Wrapper will deal with it  -->
>
//You can embed any type of code here
//For example, I am using javascript
document.write("Hello World");
</textarea>

*language

Define name of language which you will put as code in textarea, Currently, these languages are suppoerted,
At a time, only language allowed for 1 textarea.
Example: language="vbnet" , language="csharp" , language="cpp" , language="python"

*Index

Define plot number where code should be embed,
Let's suppose I have 3 code snippets,
I want to show them all in one place with tabs,
When specific tab pressed then specific language should be shown at a time,
So I will have to give same plot number to all of them.
Example: index="0" , index="4" , index="5" , index="8"

*Display

Define that should your code be visible at startup.
Example: display="none" , display="block"

*ID

id="coderjs" should remain as it was,
It is for wrapper only, Wrapper will automatically detect textareas with id coderjs.

Step:2 (Put script with settings)

Add this code at the end of page.


<script src="https://raw.githack.com/DarkSecDevelopers/CoderJs/master/Codes/script.min.js"></script>
<script>
//Choose your theme
SetTheme("-okaidia");
//SetTheme("-solarizedlight");	 
//SetTheme("-coy");
//SetTheme("-dark");
//SetTheme("-funky");
//SetTheme("-tomorrow"); 
//SetTheme("-twilight");
//SetTheme(""); //Default theme

//Should tab be displayed ? //Yes = true and No = false ShowTabs = true; //true or false

//Don't touch, Leave as it was. window.onload = StartAction(); </script>

Contact me:

Please don't waste time in hello,hi. Just tell what you need or want.

I Love ALLAH + Holy Prophet + Islam and Pakistan.

About

Embed syntax highlighted multiple codes snippets in html using coderjs easily.

Resources

License

You can’t perform that action at this time.