nteract / markdown

A package for rendering Markdown within Jupyter notebooks

the interactive computing suite for you

nteract is an open-source organization committed to creating fantastic interactive computing experiences that allow people to collaborate with ease.

We build SDKs, applications, and libraries that help you and your team make the most of interactive (particularly Jupyter) notebooks and REPLs.

To learn more about the nteract open source organization and the rest of our projects, please visit our website.

What's in this repo?

This repo is a monorepo. It contains the code for the nteract core SDK and nteract's desktop and web applications. It also contains the documentation for the SDK and the applications. Here's a quick guide to the contents of the monorepo.

Folder	Description
applications/desktop	Source code for the nteract desktop application. The desktop application is a cross-platform app built using Electron.
applications/jupyter-extension	Source code the nteract Jupyter extension. This extension can be installed alongside Jupyter classic and JupyterLab in your Jupyter deployments or personal Jupyter server.
packages	JavaScript packages that are part of the nteract core SDK.
changelogs	Changelogs for each release of the nteract core SDK and applications.

How do I contribute to this repo?

If you are interested in contributing to nteract, please read the contribution guidelines for information on how to set up your nteract repo for development, how to write tests and validate changes, how to update documentation, and how to submit your code changes for review on GitHub.

How do I use the nteract core SDK?

If you are a developer who wants to build an nteract-based notebook application, check out the following documentation resources for more info.

Link	What's in it?
docs.nteract.io	This page contains our how-to and tutorial style documentation. Get started learning about the nteract core SDK here.
packages.nteract.io	This page contains the API documentation for packages in our core SDK. Bookmark this and use it as a reference when building your nteract-based UI.
components.nteract.io	This page contains the documentation for our suite of composable React components. It contains code samples that you can reference when building your nteract-based UI.

Our documentation is living. We are always making changes and adding more content. If you have feedback about the documentation, please open an issue in this repo. If you are interested in submitting a change to our documentation page, please review the contribution guidelines and submit a pull request.

How do I use the nteract desktop application?

To get started with the nteract desktop app, head over to the nteract homepage to download the application for your operating system.

Once you've download the app, head over to our documentation page for tutorials and guides on using the app for your data analysis and science workflows.

Supporting nteract

nteract is a non-profit open-source organization fiscally sponsored by NumFOCUS. If you are interested in supporting development on nteract, please consider making a recurring donation.

Development on nteract is also supported by the following organizations.

markdown's Issues

Incorrect Rendering of \times and \rightarrow

\times and \rightarrow in the math block are rendered as text "imes" and "ightarrow". I suspect \t and \r are somehow replaced to tab and carriage return characters before being handled as part of a math expression.

Example

Input: Let $F_0: \{0, 1\}^k \times \{0, 1\}^m \rightarrow \{0, 1\}^n$ be a secure PRF.
Output:

Upgrade to react-markdown 7?

Hey there!

It looks like this package is using a pretty old version of react-markdown and could probably, with some elbow grease, be upgraded to v7. I noticed this via a dependabot warning on [email protected] via @nteract/markdown#react-markdown#remark-parse#trim.

Doing that would also allow using https://github.com/remarkjs/remark-math which seems to, according to some Git history sleuthing – nteract/nteract@61fa1a4, be the evolution of this repo's remark-math stuff. That might help with #5.

I could (try to) do the work, unless there's a good reason not to? :)

Math in tables exhibits odd rendering behaviour

Hello again!

I'd like to take a moment to thank you for maintaining this package. I'm using it as a pretty major parsing component of a quantum computing app I'm trying to get off the ground, and this is by far the best general purpose math+markdown parser I've run into thus far.

I've recently been having some issues with math blocks in HTML tables, and I'm wondering if you have any experience with or suggestions for solving these problems.

First, math delimited with '$' is being parsed as text, not as math.
Math delimited with '$$' is being parsed correctly when using hard refreshes or url navigation, but not when using view-layer navigation. When using view-layer navigation, the math remains in string form, complete with the $$ delimiter.

As far as I can tell, this issue happens exclusively with tables. Do have any ideas as to what may be causing the problem?

Here's the table, for your reference.

  <table style='font-size:16px;margin-left:auto;margin-right:auto;'>
       <tr>
              <th>Bit Value</th>
             <th style='text-align:center;'>Basis</th>
             <th style='text-align:center;'>Qubit State</th>
         </tr>
         <tr>
             <td style='text-align:center;'>0</td>
             <td>Computational</td>
             <td style='text-align:center;'>$\\left|{0}\\right\\rangle$</td>
         </tr>
         <tr>
             <td style='text-align:center;'>1</td>
             <td>Computational</td>
             <td style='text-align:center;'>$$\\left|{1}\\right\\rangle$$</td>
    </table>

Syntax highlighting works in rendered markdown not respecting theme

For some languages in the markdown source editor, code fences are properly highlighted, but when rendered that syntax highlighting is lost. This is a tear off of a comment left on the related issue nteract/nteract#4445.

java is working in markdown source but not in code cells, nor in rendered markdown. Here is a screenshot:

This was on nteract desktop v0.14.3, windows 10. I'll also attach the notebook in case anything in there is interesting/helpful:

Notebook JSON

{
  "cells": [
    {
      "cell_type": "code",
      "source": [
        "for (int i = 0; i < 3; i++) {\n",
        "    System.out.println(\"i: \" + i);\n",
        "}"
      ],
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "i: 0\n",
            "i: 1\n",
            "i: 2\n"
          ]
        }
      ],
      "execution_count": 2,
      "metadata": {
        "collapsed": false,
        "outputHidden": false,
        "inputHidden": false
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "```java\n",
        "for (int i = 0; i < 3; i++) {\n",
        "    System.out.println(\"i: \" + i);\n",
        "}\n",
        "```\n",
        "```python\n",
        "for i in range(0, 3):\n",
        "    print('i:', i)\n",
        "```\n",
        "```go\n",
        "package main\n",
        "```"
      ],
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": [],
      "metadata": {}
    }
  ],
  "metadata": {
    "kernel_info": {
      "name": "java"
    },
    "language_info": {
      "name": "Java",
      "version": "9+181",
      "mimetype": "text/x-java-source",
      "file_extension": ".jshell",
      "pygments_lexer": "java",
      "codemirror_mode": "java"
    },
    "kernelspec": {
      "name": "java",
      "language": "java",
      "display_name": "Java"
    },
    "nteract": {
      "version": "0.14.3"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 0
}

The interesting information being:

"language_info": {
  "name": "Java",
  "version": "9+181",
  "mimetype": "text/x-java-source",
  "file_extension": ".jshell",
  "pygments_lexer": "java",
  "codemirror_mode": "java"
}

XSS issue with escapeHtml=false in react-markdown

Is there a plan to sanitize the html markups when rendering the html?
Following are examples of scripts can be executed.

<img src="" onerror="alert()">
<a href="javascript:alert()">hey</a>

Two closing br tags in a markdown cell makes notebook disappear

Application or Package Used
nteract desktop, nteract web

Describe the bug
Two unclosed html tags in a markdown cell makes notebook disappear

To Reproduce
Steps to reproduce the behavior:

1. Open nteract desktop
2. In a new notebook, create a markdown cell
3. Type "</br></br>"
4. Click off cell to unfocus
5. Notebook will disappear

Expected behavior
Either don't show invalid HTML or show as text

Screenshots
After following repro steps, notebooks dissappears like below

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox, Chrome

Additional context
Also works with "</img></img>", seems to be two closing tags of any HTML tag the markdown supports

Repository Link from @nteract/markdown NPM page is broken

The repository link on this page:
https://www.npmjs.com/package/@nteract/markdown

Points to this broken link:
https://github.com/nteract/nteract/tree/master/packages/markdown

nteract doesnt interpret formulae

Application or Package Used
VS code

Describe the bug
The section $y^{pred}= \text{[0 if y_score &lt; 0.5 else 1]}$ didn't get interpreted properly in VSCode however I can see this properly interpreted in the Jupyter notebook in the browser.
Please visit this link for more info:- VSCode Python Extension bug

To Reproduce
Steps to reproduce the behavior:

1. Go to VSCode
2. Create ipynb file
3. Put this code in the markdown section

<pre>
<font color='red'><b>A.</b></font> Compute performance metrics for the given data <strong>5_a.csv</strong>
   <b>Note 1:</b> in this data you can see number of positive points >> number of negatives points
   <b>Note 2:</b> use pandas or numpy to read the data from <b>5_a.csv</b>
   <b>Note 3:</b> you need to derive the class labels from given score</pre> $y^{pred}= \text{[0 if y_score < 0.5 else 1]}$

<pre>
<ol>
<li> Compute Confusion Matrix </li>
<li> Compute F1 Score </li>
<li> Compute AUC Score, you need to compute different thresholds and for each threshold compute tpr,fpr and then use               numpy.trapz(tpr_array, fpr_array) <a href='https://stackoverflow.com/q/53603376/4084039'>https://stackoverflow.com/q/53603376/4084039</a>, <a href='https://stackoverflow.com/a/39678975/4084039'>https://stackoverflow.com/a/39678975/4084039</a> Note: it should be numpy.trapz(tpr_array, fpr_array) not numpy.trapz(fpr_array, tpr_array)</li>
<li> Compute Accuracy Score </li>
</ol>
</pre>

4. See formulae is printed as code instead of showing it as formulae.

Expected behavior
In the Jupyter notebook, I can see the formulae is interpreted properly.

Screenshots
VS Code Screenshot

Jupyter notebook Screenshot

Desktop (please complete the following information):

• OS: Windows
• Editor: VS Code
• Version: 1.43.2

LaTeX environment

Hello,

Is there a way to specify some LaTeX environment file—I use a lot of custom commands? For instance with (some) LaTeX environments for Jupyter notebook one can put a file named latexdefs.tex next to the ipynb files, which is quite convenient. Thanks!

Module not found: Can't resolve '@nteract/mathjax

just installed @nteract/markdown

now project won't compile it says

./node_modules/@nteract/markdown/lib/markdown-render.js
Module not found: Can't resolve '@nteract/mathjax' in '...path\node_modules\@nteract\markdown\lib'

UPDATE!!
As commented here : nteract/mathjax#4 mathjax does exits in \node_modules@nteract\mathjax but it wasn't built so it was missing the mathjax\lib folder also its dependency presentational-components has missing the presentational-components\lib

i provide a zip with built lib folder, just copy the corresponding libs folder to your node_modules@nteract{component missing lib}

You can compile with npm run bild, just verify that pakages,json has

"scripts": {
    "build": "tsc -b",
    "test": "jest"
  },

and that tsconfig.json is like this

{
  "compilerOptions": {
    "strict": true,
    "declaration": true,
    "esModuleInterop": true,
    "composite": true,
    "lib": ["esnext", "dom"],
    "target": "es2017",
    "module": "commonjs",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "noImplicitAny": true,
    "outDir": "lib",
    "rootDir": "src",
    "resolveJsonModule": true,
    "preserveWatchOutput": true,
    "jsx": "react",
    "typeRoots": ["./node_modules/@types", "types"]
  },
  "include": ["src"],
  "references": []
}

@nteract.zip