Skip to content

Commit 6a20ae2

Browse files
tsutsu3tsutsu3
committed
First commit
0 parents  commit 6a20ae2

19 files changed

+6374
-0
lines changed

‎.eslintrc.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"root": true,
3+
"env": {
4+
"es6": false,
5+
"node": true,
6+
"jest": true
7+
},
8+
"extends": [
9+
"eslint:recommended",
10+
"prettier"
11+
],
12+
"parserOptions": {
13+
"ecmaVersion": 12,
14+
"sourceType": "module"
15+
},
16+
"plugins": [
17+
],
18+
"rules": {
19+
"quotes": [
20+
2, "double", {
21+
"avoidEscape": true
22+
}
23+
]
24+
}
25+
}

‎.gitignore‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
9+
# Diagnostic reports (https://nodejs.org/api/report.html)
10+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11+
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
17+
18+
# Directory for instrumented libs generated by jscoverage/JSCover
19+
lib-cov
20+
21+
# Coverage directory used by tools like istanbul
22+
coverage
23+
*.lcov
24+
25+
# nyc test coverage
26+
.nyc_output
27+
28+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29+
.grunt
30+
31+
# Bower dependency directory (https://bower.io/)
32+
bower_components
33+
34+
# node-waf configuration
35+
.lock-wscript
36+
37+
# Compiled binary addons (https://nodejs.org/api/addons.html)
38+
build/Release
39+
40+
# Dependency directories
41+
node_modules/
42+
jspm_packages/
43+
44+
# TypeScript v1 declaration files
45+
typings/
46+
47+
# TypeScript cache
48+
*.tsbuildinfo
49+
50+
# Optional npm cache directory
51+
.npm
52+
53+
# Optional eslint cache
54+
.eslintcache
55+
56+
# Microbundle cache
57+
.rpt2_cache/
58+
.rts2_cache_cjs/
59+
.rts2_cache_es/
60+
.rts2_cache_umd/
61+
62+
# Optional REPL history
63+
.node_repl_history
64+
65+
# Output of 'npm pack'
66+
*.tgz
67+
68+
# Yarn Integrity file
69+
.yarn-integrity
70+
71+
# dotenv environment variables file
72+
.env
73+
.env.test
74+
75+
# parcel-bundler cache (https://parceljs.org/)
76+
.cache
77+
78+
# Next.js build output
79+
.next
80+
81+
# Nuxt.js build / generate output
82+
.nuxt
83+
dist
84+
85+
# Gatsby files
86+
.cache/
87+
# Comment in the public line in if your project uses Gatsby and *not* Next.js
88+
# https://nextjs.org/blog/next-9-1#public-directory-support
89+
# public
90+
91+
# vuepress build output
92+
.vuepress/dist
93+
94+
# Serverless directories
95+
.serverless/
96+
97+
# FuseBox cache
98+
.fusebox/
99+
100+
# DynamoDB Local files
101+
.dynamodb/
102+
103+
# TernJS port file
104+
.tern-port
105+
106+
.DS_Store

‎.prettierignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/dist
2+
node_modules
3+
package.json
4+
package-lock.json

‎.prettierrc.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{
2+
}

‎.travis.yml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
language: node_js
2+
3+
notifications:
4+
email: false
5+
6+
node_js:
7+
- node
8+
- lts/*
9+
- 11
10+
- 10

‎CHAGNELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Change Log
2+
3+
## 0.1.0 (2020/10/16)
4+
5+
- First release

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 tsutsu3
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
# markdown-it-named-code-blocks
2+
3+
A [markdown-it](https://github.com/markdown-it/markdown-it#readme) plugin to create named code blocks.
4+
5+
[![Build Status](https://travis-ci.org/tsutsu3/markdown-it-named-code-blocks.svg?branch=master)](https://travis-ci.org/tsutsu3/markdown-it-named-code-blocks)
6+
[![NPM version](https://img.shields.io/npm/v/markdown-it-named-code-blocks.svg?style=flat)](https://www.npmjs.org/package/markdown-it-named-code-blocks)
7+
[![Code Climate](https://codeclimate.com/github/tsutsu3/markdown-it-named-code-blocks/badges/gpa.svg)](https://codeclimate.com/github/tsutsu3/markdown-it-named-code-blocks)
8+
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/tsutsu3/markdown-it-named-code-blocks/LICENSE)
9+
10+
## 🧐 About
11+
12+
With this pllugin you can create named code blocks like:
13+
14+
~~~
15+
```js:hello.js
16+
console.log("Hello World!")
17+
```
18+
~~~
19+
20+
Rendered as:
21+
22+
```html
23+
<pre class="named-fence-block"><code class="language-js">console.log(&quot;Hello World!&quot;);
24+
</code><div class="named-fence-filename">hello.js</div></pre>
25+
```
26+
27+
After applying the css, it looks like this:
28+
29+
![Renderd markdown](image/named_code_blocks.png)
30+
31+
## 🏁 Getting Started
32+
33+
### Prerequisites
34+
35+
- [Node.js](https://nodejs.org/)
36+
37+
### Installing
38+
39+
```bash
40+
npm install markdown-it-named-code-blocks
41+
```
42+
43+
## 🎈 Usage
44+
45+
Use this same as a normal markdown-it plugin:
46+
47+
```js
48+
var md = require('markdown-it');
49+
var namedCodeBlocks = require('markdown-it-named-code-blocks');
50+
51+
var parser = md().use(namedCodeBlocks);
52+
53+
var str = '```js:hello.js\nconsole.log("Hello World!);```'
54+
55+
var result = parser.render(str);
56+
```
57+
58+
Apply CSS like this:
59+
60+
```css
61+
.named-fence-block {
62+
position: relative;
63+
padding-top: 2em;
64+
}
65+
66+
.named-fence-filename {
67+
position: absolute;
68+
top: 0;
69+
left: 0;
70+
padding: 0 4px;
71+
font-weight: bold;
72+
color: #000000;
73+
background: #c0c0c0;
74+
opacity: 0.6;
75+
}
76+
```
77+
78+
Rendered:
79+
80+
![Renderd markdown](image/named_code_blocks.png)
81+
82+
If you want to enable inline CSS:
83+
84+
```js
85+
var parser = md().use(namedCodeBlocks, {isEnableInlineCss: true});
86+
```
87+
88+
```html
89+
<pre class="hljs named-fence-block" style="position: relative; padding-top: 2em"><code>console.log(&quot;Hello World!&quot;)
90+
</code><div class="mincb-name" style="position: absolute; top: 0; left: 0; padding: 0 4px; font-weight: bold; color: #000000; background: #c0c0c0; opacity: .6;">hello.js</div></pre>
91+
```
92+
93+
94+
95+
## 🎉 License
96+
97+
Distributed under the `MIT` License. See [LICENSE]() for more information.

‎image/code_blocks.png‎

14.4 KB
Loading

‎image/named_code_blocks.png‎

16.4 KB
Loading

0 commit comments

Comments
 (0)