Code-Line.js

Code-line.js is a lightweight plugin, it finds every <pre><code>... in your page, and append line numbers. Most of the features are dependent on CSS to complete, so very flexible & efficient.

It’s mainly use with Highlight.js or Prism, but you can also render your code in any way.

GitHub Pages

Demo

Let’s demonstrate a “Hello, World!” to you.

(Highlight code by Highlight.js)

java-hello-world

If you like, keep looking down 😆 or see more Example.

Install

HTML

<script src="https://cdn.jsdelivr.net/npm/code-line"></script>

NPM

npm install code-line

Getting Started

The only thing you need to do is:

<script>CodeLine.initOnPageLoad()</script>

Choose the loading time

If you want to customize the loading time:

// Maybe event-triggered or <script> below the html body
CodeLine.load()

important:

If you use Prism as a syntax-highlighter, CodeLine needs to be load() after it. Ex: Prism.hooks.add('complete', CodeLine.load)

Nohighlight

Same as the Highlight.js, to disable code-line altogether use the nohighlight class:

<pre><code class="nohighlight">...</code></pre>

Absolute Position

We usually have to trace codes with mobile devices.

need-to-trace-code?.png

Line-numbers.js use position: absolute default. As a result, you can slide your screen without losing direction and number.

slide it!

If you don’t like it, just append your CSS rules, like:

pre.cljs code {
  position: relative;
}

Soft Wrap

Hard Wrap is the default setting of Code-line. If you want to use Soft Wrap, append soft-wrap class to your <code>:

<pre><code class="soft-wrap">...</code></pre>

Widget

Currently, CodeLine supports two widgets – CopyButton & LineNumbersToggle.

two-widgets.png

It may be useful or annoying, you can enable/disable it whatever you love.

Options

Name Type Default Description
minLine {Number} 3 Code below minLine will not be applied
show {Boolean} true Enable/Disable Line Numbers
showOnMobile {Boolean} false Enable/Disable Line Numbers on mobile
softWrap {Boolean} false Enable/Disable softwrap
maxMobileWidth {Number} 420 Width below the maxMobileWidth will be considered as mobile
copyBtn {Object} {show: true, position: ‘bottom’, showOnMobile: false, positionOnMobile: ‘bottom’} The setting of the Copy Button
toggleBtn {Object} {show: true, position: ‘top’, showOnMobile: true, positionOnMobile: ‘top’} The setting of the Line Numbers Toggle Button

Example:

<script>
  CodeLine.initOnPageLoad({
    showOnMobile: true,
    toggleBtn: {show: true, showOnMobile: false, position: 'bottom'}
  })
</script>