Skip to content
Highlight code in the web page.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
src
.gitignore
Gruntfile.js
LICENSE
README.md
index.html
package-lock.json
package.json

README.md

dyCodeHighlighter

Highlight code in the web page.

Status

license npm version

Documentation

Click here for the project documentation.

Getting Started

  • Download the latest release of this project.
  • Clone the repo: git clone https://github.com/yusufshakeel/dyCodeHighlighter.git
  • Install with npm: npm install dycodehighlighter
  • From jsDelivr CDN: https://www.jsdelivr.com/package/npm/dycodehighlighter

How to use?

Include the Javascript and Stylesheet file from the dist directory.

Then call the init() method of dyCodeHighlighter.

Sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dyCodeHighlighter</title>
    <!-- dyCodeHighlighter stylesheet -->
    <link rel="stylesheet" href="path/to/dist/css/dycodehighlighter.min.css">
</head>
<body>
    
    <pre class='dyCodeHighlighter'>
      <code>
        // some code goes here...
      </code>
    </pre>

    <!-- dyCodeHighlighter javascript -->
    <script src="path/to/dist/js/dycodehighlighter.min.js"></script>
    <script>dyCodeHighlighter.init();</script>
</body>
</html>

Features

  • Style pre.dyCodeHighlighter code content
  • Show line numbers
  • Highlight lines
  • Show header info like: total lines and filename
  • Start line number from a custom integer value like -10, 0, 10 etc.
  • Theme: blue, choco, dark, gray
  • Custom style

License

It's free and released under MIT License Copyright (c) 2017 Yusuf Shakeel

Donate

Feeling generous :-) Buy me a cup of tea.

Donate via PayPal

You can’t perform that action at this time.