I am using docsify to build a documentation for my API. However when I insert code block (especially json) the code is written in black.
I don't know how to change it.
Any suggestion ?
Docsify uses Prism for syntax highlighting as explained in the Documentation.
To add support for a specific language you need to add the matching grammar file as so :
<!-- Loading Docsify -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- Adding json syntax highlighting -->
<script src="//cdn.jsdelivr.net/npm/prismjs#1.22/components/prism-json.min.js"></script>
If you want to browse the list of grammar files available you can browse them here : PrismJS on Github
You must add the scripts after the docsify js script. If you add them before, you will see an error in the console that says Prism is not defined.
Add them like so:
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs#1.28/components/prism-bash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs#1.28/components/prism-typescript.min.js"></script>
After that, you can highlight using your new language:
```bash
yarn add fast-data-engine
```
...and it will work as expected.
Related
Am I missing something? I have a rendering pipeline set up with assemble.io via an express server and everything is rendering as expected. However, when I add in bracket fences for Markdown there seems to be an issue with the syntax highlighting. It does drop the code into <code> and <pre> tags as expected and when I add in the language identifier after the top fence it does add in the class="language-[LANG] like you would think it would, however, it does nothing to the code within it (e.g. wrapping the tag elements, attributes, important names, etc. in span tags).
Is there a helper I need to add to the pipeline and pass the file through? So far I've tried adding prismjs, but that flattened the entire page into code (not ideal).
Result:
<a href="">this is the link</a>
Expected:
<<span class="some-tag-class">a</span> <span class="some-name-class">href</span>="">this is the link</a>
Looking at the markdown documentation directly or at the assemble.io documentation does no good.
It's clearly listed on the helper-markdown github/npm sites respectivly.
Is there a way to create my own abbreviations in atom and sublime like I can do with notepad++?
for example:
I have a chunk of code:
<!DOCTYPE html>
<html>
blah... blah... blah...
</html>
With notepad++, I can just use shortcut to wrap it with abbreviation (e.g.: html) and next time I can just type html and expand it, it'll pop out all the code. Instead of all the $>>>>** like in Sublime.
I've read a dozen of manual online for sublime and atom but honestly, I still don't get it.
Update:
Sublime > Tools > Developer > New Snippet...
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html>
Blah blah blah
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>html-blah</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.python</scope>
</snippet>
So after successfully saved the snippet, I type html-blah, there's no tab option.
The answer to your question (in the case of Sublime) is indeed Snippets as you've mentioned. They're a powerful way to include all sorts of text, including the ability to put placeholder fields that allow you to fill out more complex structures quickly and easily.
As outlined in your question the snippet you've defined will only have an effect in a Python source file because the scope is set to source.python.
Presuming that you want to use it to create a stub HTML document, you need to change the scope to text.html instead so that it will trigger from within HTML documents.
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html>
Blah blah blah
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>html-blah</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.html</scope>
</snippet>
You can determine the scope to use by placing the cursor in a file that you want to trigger the snippet in and selecting Tools > Developer > Show Scope Name from the menu. That command shows you the full scope of the character at the cursor, and the more of it you include in your scope the more dialed in your snippet becomes.
For example, a scope of text works in all text files, text.html works in HTML based files like HTML and Markdown, and text.html.basic only works in HTML files but not Markdown (which are text.html.markdown).
Something to keep in mind is that the scope is based on the syntax that is set for the file, and by default all new tabs in Sublime are created using the syntax for Plain Text, so before the snippet will trigger you need to assign the appropriate syntax.
You can do that by:
Saving the file with an appropriate extension
Selecting the appropriate syntax from View > Syntax in the menu or by clicking on the type of the current file in the bottom right of the window (both open the same menu)
Selecting the appropriate Set Syntax: command from the Command Palette.
For more information on the power of snippets I recommend the Unofficial Documentation, which includes a section on Snippets.
Note that there is already an existing snippet that ships with Sublime named html that does something similar to your example already.
In sublime you need to install the Emmet package. It is easyer done by using the Package control. There are instructions on how to install it in the github repo: https://github.com/sergeche/emmet-sublime#available-actions
Sorry for mistaking your issue with snippets :)
I'm using MathJax in a hand-written web page (which is unfortunately not online yet, so I cannot point you to the whole source code).
I embed MathJax in the page as follows, which is simply copy/pasted from the official documentation:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {
webFont: "TeX"
}
});
</script>
<script
type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML.js">
</script>
After that, MathJax seems to work well on every formula I tried, but I cannot get it to render the \TeX and \LaTeX commands to obtain the TeX and LaTeX logos. Everything on the web makes it look like these two commands are supported by MathJax, and I remember of having used them with MathJax in a wordpress blog years ago, so I think there must be some extension or option missing.
So why are those commands not working and what can I do to fix them? Or are they not supported?
MathJax only processes the math on the page, not other text-mode macros. So if you want MathJax to process the \TeX or \LaTeX macros, try using
$\rm\TeX$ or $\rm\LaTeX$
in your page instead.
EDIT:
Here is an example. Run the code snippet to see it work.
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
\(\rm\TeX\) and \(\rm\LaTeX\)
In one of the project that I am working on, we need to create a folder named after version of the project and the minified JavaScript and CSS files are stored there. As per usemin's documentation, to update the reference in the HTML page, we need to add the build comment.
<!-- build:js 1.2.5/Combinedjs.js -->
<script src="file1.js"></script>
<script src="file2.js"></script>
<!-- endbuild -->
I want the name of folder mentioned above (1.2.5) to be dynamic and I don't want to change the build comment every time before running the grunt tasks. Does usemin provide any options to achieve this?
Take a look an alternative project named grunt-applymin: https://github.com/ghosert/grunt-applymin
If MathJax can export formula as image, I can use to insert it to a webpage easily. Unfortunately, current MathJax don't support to export image! :(
Is there a simple way to create a embeded code to show formula just like Twitter above? If you have, could you show me some sample codes? Thanks!
< href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="my">Tweet
< script type="text/javascript" src="//platform.twitter.com/widgets.js">
See my response to this question on the MathJax user's forum.
MathJax does not have image creation capabilities, and I don't know of a way to
make that possible from Javascript (a quick web search suggests it is not readily doable).
If you are looking to convert TeX to images, there are plenty of tools for doing that
already. You could, for example, use TeX with dvipng, or one of the tools designed for
that like the LaTeX Equation Editor or Laeqed applications. There are a number of
on-line tools for doing this as well.
This question is already kinda old. But was searching for something like this myself. Apparently there are some Tex Rendering Services Available.
Take a look at this Answer:
https://meta.stackexchange.com/questions/53436/implement-an-api-call-to-display-latex-as-inline-image
Try this
<html>
<head>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<body>
$$e = mc^2$$
</body>
</html>
http://jsfiddle.net/16h1hjot