Start publishing content on Codepur.

Just start writing

Codepur offers a powerful visual editor with familiar formatting options, as well as the ability to add dynamic content.

Select your text to add formatting such as headers or to create links. Or use Markdown shortcuts to do the work for you - if that's your thing.

Rich editing at your fingertips

The editor can also handle rich media objects, called cards, which can be organised and re-ordered using drag and drop.

You can insert a card either by clicking the  +  button, or typing  /  on a new line to search for a particular card. This allows you to efficiently insert images, markdown, html, embeds and more.

For example:

• Insert a video from YouTube directly by pasting the URL
• Create unique content like buttons or forms using the HTML card
• Need to share some code? Embed code blocks directly

<header class="site-header outer">
    <div class="inner">
        {{> "site-nav"}}
    </div>
</header>

It's also possible to share links from across the web in a visual way using bookmark cards that automatically render information from a websites meta data. Paste any URL to try it out:

MTECHVIRAL

My name is Pawan Kumar and I am India’s first flutter GDE.To the outside world I am just an ordinary software developer but secretly with the help of my MacBook I fight bugs and create awesome content for the community.When I was a child I didn’t have many resources to learn new things so I decide…

YouTube

Working with images in posts

You can add images to your posts in many ways:

• Upload from your computer
• Click and drag an image into the browser
• Paste directly into the editor from your clipboard
• Insert using a URL

Elements

Headings:

All HTML headings, <h1> through <h6>, are available.

H1. Heading example

H2. Heading example

H3. Heading example

H4. Heading example

H5. Heading example

H6. Heading example

List Types

Ordered List

An unordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:

1. List Item 1
2. List Item 2
3. Nested list item A
4. Nested list item B
5. List Item 3

Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets by default:

• List Item a
• List Item b
• Nested list item 1
• Nested list item 2
• Double Nested item 1
• Double Nested item 2
• List Item 3

You can also remove the default styling by adding the class list--unstyled. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

Example:

<ul class="list--unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
</ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet

Blockquotes & alert boxes

Blockquotes

For quoting blocks of content from another source within your document.
Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. - Pawan Kumar

Alert boxes

You can create the following content boxes using the markdown editor.

Default

<div class="alert">
...
</div>

Info

<div class="alert info">
...
</div>

Warning

<div class="alert warning">
...
</div>

Error

<div class="alert error">
...
</div>

Success

<div class="alert success">
...
</div>

HTML Tags

Code

Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a <pre> block. Because we have more specific typographic needs for code, we'll specify Consolas and Monaco ahead of the browser-defined monospace font.

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

Here are a few examples of code highlighting:

HTML markup:

<!DOCTYPE html>
<html>
<body>

<h2>The title attribute</h2>

<p title="I'm a tooltip">
Check out the title attribute as a tooltip.
</p>

</body>
</html>

CSS code:

body { 
   background-color: #FFFFF0; 
   font-family: Arial, Verdana, sans-serif; 
   font-size: 18px; 
   color: #00008B;
}

Javascript code:

var x, y, z;
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML = z;

Text-level semantics

Styling for common inline HTML5 elements.

The a element example.
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The _{sub element} example
The ^{sup element} example
The var element example
The u element example
The <details> element.Epcot Center

Buttons

Colors

<button class="btn m-b">Default</button>
<button class="btn btn--brand m-b">Primary</button>
<button class="btn btn--secondary m-b">Secondary</button>
<button class="btn btn--dark m-b">Dark</button>
<button class="btn btn--light m-b">Light</button>

Sizes

<button class="btn btn--sm m-b">Small Button</button>
<button class="btn m-b">Default Button</button>
<button class="btn btn--lg m-b">Large Button</button>
<button class="btn btn--xl m-b">Huge Button</button>
<button class="btn btn--full m-b">Full Width Button</button>

Tables

Images

Image optimisation

Codepur editor will automatically resize and optimise your images with lossless compression. Your posts will be fully optimised for the web without any extra effort on your part. However, my suggestion would be to use tiny png to compress your images before uploading for best results and make it more faster.

Image Gallery

Embeds

View this post on Instagram

A post shared by P a w a n K u m a r (@codepur_ka_superhero)

Next: Publishing Options

Once your post is looking good, you'll want to use the publishing options to ensure it gets distributed in the right places, with custom meta data, feature images and more.