Developing Syntax app SharePoint Online PrismJS

252 views Asked by At

I'm trying to build a SharePoint Online app using Napa to use Syntax Highlighting. I've started a new project and included the .js and .css files in the Default.aspx webpage. When I try to create a highlighted code block it won't work.

PS: I'm not a coder :)

.js and .css files are uploaded in the script and content folders, the code of default.aspx is shown below:

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>

    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/prism.css" />
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/prism.js"></script>
    <script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <pre class="line-numbers"><code class="language-*">
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>I can haz embedded CSS and JS</title>
            <style>
                @media print {
                    p { color: red !important; }
                }
            </style>
        </head>
        <body>
            <h1>I can haz embedded CSS and JS</h1>
            <script>
            if (true) {
                console.log('foo');
            }
            </script>

        </body>
        </html>
    </code></pre>
</asp:Content>
2

There are 2 answers

0
Cent On BEST ANSWER

You're missing the <code></code> tags.

Prism.js doesn't highlight any syntax not encased within the code tags.

1
Rahul On

add type = "text/javascript in script tag. Also put 'if' under a function.