https://github.com/varya/bem-highlight.js

BEM block for code highlighted with delicious Highlight.js (bem-core compatible)
https://github.com/varya/bem-highlight.js

Last synced: about 2 months ago
JSON representation

BEM block for code highlighted with delicious Highlight.js (bem-core compatible)

• Host: GitHub
• URL: https://github.com/varya/bem-highlight.js
• Owner: varya
• Created: 2013-11-19T19:02:46.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2015-01-06T19:45:47.000Z (almost 10 years ago)
• Last Synced: 2023-03-10T21:33:31.944Z (almost 2 years ago)
• Language: CSS
• Size: 711 KB
• Stars: 6
• Watchers: 4
• Forks: 4
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS/JavaScript BEM block for code highlighting

This repository contains `bem-highlight.js` block library. The library serves

the `highlight` BEM block whose JavaScript paint code on a page with the help of

remarkable [Highlight.js](http://highlightjs.org/).

**bem-core compalible**

Example of usage:

http://varya.me/bem-highlight.js/desktop.bundles/index/index.html

## Advantages

- Highlight.js implemented with BEM stack


  No manual linking files to the project! You use the `highlight` block and

  everything goes automatically. This is BEM, baby!

- Code blocks are independent and can be highlighted with different themes.

- Easy to redefine for your project structure

## Usage

### With full bem stack

 1. Link the library to your project

    

    a. With `bower`

    

       `bower.json`

    

       ```

    {

      "name": "bem-project-stub",

      "version": "0.0.1",

      "dependencies": {

          ...

          "bem-highlight.js" : "varya/bem-highlight.js"

      }

    }

	   ```

    b. With `repo.db`

 2. Add library levels in the list of levels for the bundles

    

    Example for `bem tools 1.0.0`

    

    ```

    .setBundleBuildLevels([

          'bem-core',

          'bem-components',

          'bem-highlight.js'

     ].reduce(function(levels, lib) {

         return levels.concat([

             environ.getLibPath(lib, 'common.blocks'),

             environ.getLibPath(lib, 'desktop.blocks'),

             environ.getLibPath(lib, 'blocks')

         ]);

     },

     ```

 3. Place a block into your page bemjson code:

   

    ```

    {

       block: 'highlight',

       mods: { theme: 'far' },

       lang: 'html',

       content: '
'

     }

     ```

     You can use any of [implemented

     themes](https://github.com/varya/bem-highlight.js/tree/master/blocks/highlight/_theme).


     Now supported languages are:

     * xml

     * html (xml)

     * js (javascript)

 4. Look at the page compiled


Feel free to redefine the `highlight` block technologies for a bundle or the whole project.


You can easily provide CSS for all the `highlight` blocks within your project by placing `highlight/highlight.css` file into your project block level.


Default theme can be provided with redefining `highlight/highlight.bemhtml` template.

       

### With static BEM

If you do not use BEMHTML to produce HTML markup for your project:

 1. Provide valid HTML markup for the blocks

 

    ```

    


      

        

          <div class="my-block"/>

        

      

    

    ```

 2. Provide dependency to ensure that your static files will have a proper highlight block:

    `page/page.deps.js`

     

    ```

    ({

        shouldDeps: [

            {

                block: 'highlight',

                mods: { 'theme': ['far']}

            }

        ]

    })

    ```

 3. Compile your static files

 4. With linking compiled JavaScript to the page you have you code highlighed within

your BEM project!


## Developing the library

### Installation Requirements:

- [node.js](http://nodejs.org/)

You may also consider [installing bem-tools locally to your environment](http://bem.info/tools/bem/installation/) for [ease of use](#an-easier-more-beautiful-way), though it is **not required**

### Building the library

```

gulp

```