In our recent projects for SharePoint 2013, we have to use the design manager to build a responsive branding design package.  If you are not familiar with this new feature, please take a look at  Overview of Design Manager in SharePoint 2013 to familiarize yourselves.

One of the challenges that we found with SharePoint 2013 Design Manager is that it modifies and rearranges not only <!–MS/ME/SPM –> markup code, but also the HTML itself during design package import process.

One such example was when we included protocol agnostic script source tag for jquery.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

The resultant tag in the imported instance was the following.

<script type="text/javascript" src="/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

After attempting various tricks using <!– –> markup and trying to enclose the html in the design manager tags with no particular success.  The workaround was as follows, after obtaining an answer to our post on MSDN forum:

<!--SPM:<asp:Literal runat="server" Text="&amp;#60;script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' &amp;#62; &amp;#60;/script&amp;#62;" /> -->

The Literal ASP.Net server control is used to emit raw html that we need during response. Note, that the input has to be html encoded to avoid further issues with Design Manager.  This is really ugly but will do for now.