# vue-ipynb

**Repository Path**: tlm629/vue-ipynb

## Basic Information

- **Project Name**: vue-ipynb
- **Description**: Demo to view a .ipynb (python notebook) file with VUE.
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-13
- **Last Updated**: 2021-06-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-ipynb
一个Demo，利用 `jsvine/notebookjs` 在VUE中展示 `ipynb` 文件，并作代码高亮。
Demo to view a `.ipynb` (python notebook) file with VUE.


# How to Use

### Install
```
npm install marked ansi_up dompurify jsdom
npm install prismjs 
npm install babel-plugin-prismjs 
```

### Config 
Config `.babelrc` file of your VUE project

```json
{
    "plugins": [
        [
            "prismjs",
            {
                "languages": ["html", "css", "javascript", "python"],
                "plugins": ["line-numbers"]
            }
        ]
    ]
}
```

### Copy files
Copy this files to project:
- prism.css
- notebook.js

### Run and View .ipynb file
```
npm install
npm run serve
```
view:
http://localhost:8080/ 


# Thanks
Many thanks to the following users for catching bugs, fixing typos, and proposing useful features:
https://github.com/jsvine/notebookjs
https://prismjs.com/