Package Exports
- tui-jsdoc-template
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tui-jsdoc-template) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
TUI JSDoc Template
Toast UI JSDoc template
Demo: https://nhnent.github.io/tui.jsdoc-template/latest/
Install
npm i -D tui-jsdoc-template
Feature
TUI JSDoc template has the following features:
- Navigation:
- AutoComplete Searchbox
- Collapsible
- Members / Methods / Events
- API / Examples (Tutorials) switcher
- Resizable
- Examples: HTML/JS source tab in example pages
Configuration
Template
"opts": {
"template": "node_modules/tui-jsdoc-template"
}
Logo
"templates": {
"logo": {
"url": "http://nhnent.github.io/tui.component.tree/latest/styles/logo.png",
"width": "150px",
"height": "13px",
"link": "https://github.com/nhnent/tui.jsdoc-template"
}
}
Page title
"templates": {
"name": "Tui JSDoc Template"
}
Footer text
"templates": {
"footerText": "My awesome footer text"
}
Use collapsible api list
Default: true
"templates": {
"useCollapsibles": ture
}
Tab Names
"templates": {
"tabNames": {
"api": "API",
"tutorials": "Examples"
}
}
api
defaults to the value API
and tutorials
defaults to the value Examples
.
Custom Styles
With a folder structure like this:
static
└── styles
└── custom.css
└── another.css
And a config like this:
"templates": {
"default": {
"staticFiles": {
"include": ["static/"]
}
},
"css": [
"styles/custom.css",
"styles/another.css",
"http://example.com/remote.css"
]
}
styles/custom.css
, styles/another.css
, and remote.css
get included in the layout.
default.staticFiles
is the build-in jsdoc way of copying extra files.
Expose the html/js code to exmaple page
If script
or div
elements have code-js
or code-html
class, expose their innerHTML.
- innerHTML of
script.code-js
tag - innerHTML of
div.code-html
tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<div class="code-html">
<h3> Base Example </h3>
<p> Hello world </p>
</div>
<script class="code-js">
console.log('hello world');
</script>
</body>
</html>
Development
- Use
npm run serve
orgulp serve
command to ascertain realtime. - Api-Example tab, Auto-Complete and Resize functions are written in the
static/scripts/tui-doc.js
file.